Vue 实战项目开发流程

一 基础配备

## 一.环境搭建

#### 1.安装node

- 去[官网](https://nodejs.org/zh-cn/)下载node安装包
- 傻瓜式安装
- 万一安装后终端没有node环境,要进行node环境变量的配置(C:\Program Files\nodejs\)
- 可以通过node提供的npm包管理器安装vue脚手架
- 通过npm安装淘宝镜像cnpm,将nmp指令都修改为cnpm指令(npm install -g cnpm --registry=https://registry.npm.taobao.org)

#### 2.安装全局vue脚手架

- 起管理员终端(mac: sudo)
- cnpm install -g @vue/cli
- 如果安装失败,检测网络,请npm缓存(npm cache clean --force)后重新安装

#### 3.创建项目

- 采用可视化方式创建(vue ui)
- 命令行

```
1.打开终端
2.去向目标目录(将项目创建在该目录)(cd 目标目录)
3.指令创建项目(vue creat 项目名)
4.选择自定义:Manually select features
5.用空格选取所需插件:Router, Vuex
6.采用Router的history...
7.在目标目录创建一个项目名的文件夹,该文件夹就是所创的项目
```

#### 4.启动项目

```
1.进入项目目录
2.启动服务器(npm run serve)
3.退出服务器|刷新服务器(ctrl+c)
4.项目完成后,在项目目标下可以进行项目打包发布,要提前做配置(npm run build)
```

#### 5.项目目录

```
vue目录结构:
        -dist: 打包的项目目录(打包后会生成)
        -node_modules:项目依赖(以后项目要传到git上,这个不能传)
        -publish--->index.html  是总页面
        -src :项目
            -assets:静态资源
            -components:组件
            -views:视图组件
            -APP.vue:根组件
            -main.js :总的入口js
            -router.js :路由相关,所有路由的配置,在这里面
            -store.js  :vuex状态管理器
        -package.json:项目的依赖,npm install 是根据它来安装依赖的
        -vue.config.js: 项目配置文件(没有可以自己新建)
    每个组件会有三部分:
        <template><!-- 模板区域 --></template>
        <script>
        // 逻辑代码区域
        // 该语法和script绑定出现
        export default {}
        </script>
        <style scoped>
        /* 样式区域 */
        /* scoped表示这里的样式只适用于组件内部, scoped与style绑定出现 */
        </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中配置:
                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
```

#### 6.项目开发

- vue.config.js

```
module.exports={
    devServer: {
        port: 8888
    }
}
// 修改端口,选做
```

- main.js

```
// 不用修改
// 采用之前的语法创建根实例
new Vue({
    el: "#app",
    router: router,
    store: store,
    render: function (h) {
        return h(App)
    }
})
```

环境搭建 目录解析