一、创建vue项目

前两步操作，详见之前vue方面的博客

1. 安装node.js
2. 安装vue脚手架
3. vue create 项目名字
    - 选择自定义配置
    - 选择安装 Babel、Router、Vuex 三项
    - ? Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n)  ==》 y
    - 选择  In package.json 
    # 是否保存本次设置，如果输入y，需要输入一个名字记录这次的配置，下次创建项目时可以直接使用
    - ? Save this as a preset for future projects? (y/N) 

二、在pycharm环境下开发vue项目

需要安装vue.js插件

步骤：

file ---> Settings ---> Plugins ---> install(在左下方) ---> 搜索 vue.js ---> 下载安装 ---> 安装完成重启 pycharm 即可

运行 vue 项目

Edit Configrations ---> + 号 ---> npm ---> Scripts =》 serve

三、Vue 项目目录结构：

- node_modules:项目依赖(以后项目要传到git上,这个不能传)
- publish--->index.html  是总页面
- src :项目
    - assets:静态资源
    - components:组件
    - views:视图组件
    - APP.vue:根组件
    - main.js :总的入口js
    - router.js :路由相关,所有路由的配置,在这里面
    - store.js  :vuex状态管理器
- package.json:项目的依赖,npm install 是根据它来安装依赖的

基本组件三大组成部分：

<template>
    
</template>
<script>
    export default {
        
    }
</script>
<style scoped>
</style>

新建组件步骤：

- 创建一个组件
- 去路由做配置
    import Course from './views/Course.vue'
    {
        path: '/course',
        name: 'course',
        component: Course
    }   
- 使用：在根组件中
    <router-link to="/course">专题课程</router-link>

显示数据:

# script中:
    export default {
        data:function () {
            return{
                course:['python','linux'],
                aa:'我是aa'
            }
        }   

方法绑定:

<button @click="init">点我</button>
        
# script中
methods: {
    init: function () {
        alert('111')
    }
}

vue中的ajax：-------axios

安装：

npm install axios

使用：

// 先在 main 中配置： 将 axios 配置成全局属性
import axios from 'axios'
Vue.prototype.$http=axios

// 在组件中    this.$http.request().then().catch()
this.$http.request({
    url:'请求的地址',
    method:'请求方式',
}).then(function(response){
    ....函数回调处理
})

注意:

​ this需要在上面重新赋值给一个变量
​ 请求成功函数内部:

_this.course = response.data