一 基础配备
1## 一.环境搭建 2 3#### 1.安装node 4 5- 去[官网](https://nodejs.org/zh-cn/)下载node安装包 6- 傻瓜式安装 7- 万一安装后终端没有node环境,要进行node环境变量的配置(C:\Program Files\nodejs\) 8- 可以通过node提供的npm包管理器安装vue脚手架 9- 通过npm安装淘宝镜像cnpm,将nmp指令都修改为cnpm指令(npm install -g cnpm --registry=https://registry.npm.taobao.org) 10 11#### 2.安装全局vue脚手架 12 13- 起管理员终端(mac: sudo) 14- cnpm install -g @vue/cli 15- 如果安装失败,检测网络,请npm缓存(npm cache clean --force)后重新安装 16 17#### 3.创建项目 18 19- 采用可视化方式创建(vue ui) 20- 命令行 21 22``` 231.打开终端 242.去向目标目录(将项目创建在该目录)(cd 目标目录) 253.指令创建项目(vue creat 项目名) 264.选择自定义:Manually select features 275.用空格选取所需插件:Router, Vuex 286.采用Router的history... 297.在目标目录创建一个项目名的文件夹,该文件夹就是所创的项目 30``` 31 32#### 4.启动项目 33 34``` 351.进入项目目录 362.启动服务器(npm run serve) 373.退出服务器|刷新服务器(ctrl+c) 384.项目完成后,在项目目标下可以进行项目打包发布,要提前做配置(npm run build) 39``` 40 41#### 5.项目目录 42 43``` 44vue目录结构: 45 -dist: 打包的项目目录(打包后会生成) 46 -node_modules:项目依赖(以后项目要传到git上,这个不能传) 47 -publish--->index.html 是总页面 48 -src :项目 49 -assets:静态资源 50 -components:组件 51 -views:视图组件 52 -APP.vue:根组件 53 -main.js :总的入口js 54 -router.js :路由相关,所有路由的配置,在这里面 55 -store.js :vuex状态管理器 56 -package.json:项目的依赖,npm install 是根据它来安装依赖的 57 -vue.config.js: 项目配置文件(没有可以自己新建) 58 每个组件会有三部分: 59 <template><!-- 模板区域 --></template> 60 <script> 61 // 逻辑代码区域 62 // 该语法和script绑定出现 63 export default {} 64 </script> 65 <style scoped> 66 /* 样式区域 */ 67 /* scoped表示这里的样式只适用于组件内部, scoped与style绑定出现 */ 68 </style> 69 新建组件: 70 -创建一个组件 71 -去路由做配置: 72 import Course from './views/Course.vue' 73 { 74 path: '/course', 75 name: 'course', 76 component: Course 77 } 78 -使用: 79 <router-link to="/course">专题课程</router-link> 80 显示数据: 81 -script中: 82 export default { 83 data:function () { 84 return{ 85 86 course:['python','linux'], 87 aa:'我是aa' 88 } 89 } 90 方法绑定: 91 <button @click="init">点我</button> 92 93 -script 94 methods: { 95 init: function () { 96 alert('111') 97 } 98 } 99 vue中的ajax: 100 -axios 101 -安装:npm install axios 102 -使用: 103 -先在main中配置: 104 import axios from 'axios' 105 Vue.prototype.$http=axios 106 -在组件中: 107 this.$http.request().then().catch() 108 this.$http.request({ 109 url:请求的地址 110 method:请求方式 111 }).then(function(response){ 112 ....函数回调处理 113 }) 114 -注意: 115 this需要在上面重新赋值给一个变量 116 请求成功函数内部: 117 _this.course=response.data 118``` 119 120#### 6.项目开发 121 122- vue.config.js 123 124``` 125module.exports={ 126 devServer: { 127 port: 8888 128 } 129} 130// 修改端口,选做 131``` 132 133- main.js 134 135``` 136// 不用修改 137// 采用之前的语法创建根实例 138new Vue({ 139 el: "#app", 140 router: router, 141 store: store, 142 render: function (h) { 143 return h(App) 144 } 145}) 146```
环境搭建 目录解析