vue配置

Vue

前端

逻辑

• 判断
• 遍历

事件

• 浏览器事件，window， document
• Dom事件：增，删，改，查
• JQuery

视图

• html
• css

通信

• xhr

• ajax

判断-循环

• if
• for

事件

• on

网络通信

• JQuery.ajax()
• Axios 与nodejs

计算属性： 计算出来的结果，保存在属性中，内存中运行，是属性不是方法，即不是methods是computed，虚拟Dom，缓存

slot：插槽

组件及页面布局

component

Vue小结

核心：数据驱动，组件

优点：MVC，虚拟Dom

常用属性：

• v-if else-if else
• v-for
• v-on 绑定事件 简写@
• v-bind 数据双向绑定
• v-model 给组件绑定参数 简写 :

组件化：

• 组合组件slot插槽
• 组件内部绑定需要用到this.$emit(“事件名”,参数)；
• 计算属性特色，缓存计算数据

遵循SoC关注度分离原则，Vue是纯粹的视图框架，不包含通信功能如Ajax，因此需要用Axios框架解决异步通信的问题

Vue-cli项目

vue-cli是官方提供的一个脚手架，用于快速生成一个vue的项目模板

创建vue项目工程步骤

适配ES5

1. 创建一个名为hello-vue的工程，命令行管理员运行 vue init webpack hello-vue
2. 安装依赖，进入工程目录cd hello-vue
3. 安装vue-router npm install vue-router --save-dev
4. 安装element-ui npm i element-ui -S
5. 安装依赖npm install
6. 安装SASS cnpm install sass-loader node-sass --save-dev
7. 启动测试 npm run dev

ES6

1. 先安装好npm和node
2. npm insatll -g @vue/cli
3. 在当前目录下创建项目，vue create vue
   1. 选择最后一个[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-CVDgrKIf-1649386452863)(C:\Users\Chen\AppData\Roaming\Typora\typora-user-images\image-20220116114426830.png)]
   2. 选择Router和Vuex，取消选择Linter[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-jE5GJoTY-1649386452864)(C:\Users\Chen\AppData\Roaming\Typora\typora-user-images\image-20220116114541085.png)]
   3. 选择Vue版本[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-QYgJIRyO-1649386452865)(C:\Users\Chen\AppData\Roaming\Typora\typora-user-images\image-20220116114618080.png)]
   4. 一些配置，router是history还是hash，配置放在哪里，是否保存这次的配置选项以待后面开发，主要是看自己选择[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-jlVCQ9Kn-1649386452865)(C:\Users\Chen\AppData\Roaming\Typora\typora-user-images\image-20220116114730246.png)]
   5. 进入项目文件，启动serve[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-doA59Uhp-1649386452866)(C:\Users\Chen\AppData\Roaming\Typora\typora-user-images\image-20220116115306539.png)]
   6. 启动成功[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-kAWm3f76-1649386452867)(C:\Users\Chen\AppData\Roaming\Typora\typora-user-images\image-20220116115407730.png)]在浏览器中打开[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-BbzIry5W-1649386452867)(C:\Users\Chen\AppData\Roaming\Typora\typora-user-images\image-20220116115457926.png)]
   7. ctrl+c退出

在IDEA中的设置

这样可以点击运行就可以启动，不需要每次都从命令行启动[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-0ZfSCLmv-1649386452868)(C:\Users\Chen\AppData\Roaming\Typora\typora-user-images\image-20220116115813010.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-6khzii1D-1649386452869)(C:\Users\Chen\AppData\Roaming\Typora\typora-user-images\image-20220116115927180.png)]

点击运行即可[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-rhu9K9KN-1649386452869)(C:\Users\Chen\AppData\Roaming\Typora\typora-user-images\image-20220116115951622.png)]

要每次都从命令行启动[外链图片转存中…(img-0ZfSCLmv-1649386452868)]

[外链图片转存中…(img-6khzii1D-1649386452869)]

点击运行即可[外链图片转存中…(img-rhu9K9KN-1649386452869)]

帮助文档： docsify.js.org