vue第一步

vue配置

---

检查npm和node版本

1. npm -v 3.0 + => npm install npm -g
2. 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项目工程目录

---

1. bulid 文件夹，项目构建配置文件、服务器文件
2. config 文件夹，项目基本配置参数
3. index.html 主文件，所以开发都在这里进行
4. src 文件夹，我们写代码的地方
   
   • main.js 程序入口，包含组件引入
   • app.vue
   • assets 资源文件夹
   • components 文件夹，自定义组件
   • router 路由文件夹
   • store vuex文件夹
5. static 文件夹

vue生命周期

---

• beforeCreate（创建前）
• created（创建后）
• beforeMount(载入前)
• mounted（载入后）
• beforeUpdate（更新前）
• updated（更新后）
• beforeDestroy（销毁前）
• destroyed（销毁后）

vue的计算属性 computed

---

• 表达式是非常便利的，但是它们实际上只用于简单的运算。在模板中放入太多的逻辑会让模板过重且难以维护,所以引入了计算属性computed,将复杂的逻辑放入计算中进行处理，同时computed有缓存功能，防止复杂计算逻辑多次调用引起的性能问题。
• 计算属性类似于双向绑定，无论是view和store谁改变了数据，都会引起另一边更新
• 计算属性会监控数据变化，一旦发生改变就会响应
• 计算属性可作为处理更复杂运算的地方，这点相似过滤器
• 计算属性还具有缓存功能