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) } }) ```