vue配置
检查npm和node版本
- npm -v 3.0 + => npm install npm -g
- node -v 4.0 +
全局安装 vue-cli
npm install vue-cli -g 全局安装
现在支持的模板 vue list
- browserify - browserify-simple - simple - webpack // 热更新,文件发生变化,浏览器自动更新 - webpack-simple
ESlint 代码规范、单元测试
初始化项目
// cd 项目目录
// vue init 模板名 项目名
// cd 项目名
// npm install 构建项目,安装依赖库
// npm run dev 运行启动项目
// npm run build 模块化,打包**
vue项目工程目录
- bulid 文件夹,项目构建配置文件、服务器文件
- config 文件夹,项目基本配置参数
- index.html 主文件,所以开发都在这里进行
- src 文件夹,我们写代码的地方
- main.js 程序入口,包含组件引入
- app.vue
- assets 资源文件夹
- components 文件夹,自定义组件
- router 路由文件夹
- store vuex文件夹
- static 文件夹
vue生命周期
- beforeCreate(创建前)
- created(创建后)
- beforeMount(载入前)
- mounted(载入后)
- beforeUpdate(更新前)
- updated(更新后)
- beforeDestroy(销毁前)
- destroyed(销毁后)
vue的计算属性 computed
- 表达式是非常便利的,但是它们实际上只用于简单的运算。在模板中放入太多的逻辑会让模板过重且难以维护,所以引入了计算属性computed,将复杂的逻辑放入计算中进行处理,同时computed有缓存功能,防止复杂计算逻辑多次调用引起的性能问题。
- 计算属性类似于双向绑定,无论是view和store谁改变了数据,都会引起另一边更新
- 计算属性会监控数据变化,一旦发生改变就会响应
- 计算属性可作为处理更复杂运算的地方,这点相似过滤器
- 计算属性还具有缓存功能