#前端体系

• 框架：Vue2.0
  1. MVVM轻量级渐进式框架
  2. 自底向上增量开发的设计，只关注视图层
  3. 易于上手，文档全中文
• 构建工具：Vue-cli
  1. 成熟的vue项目结构设计
  2. 本地测试服务器
     1. webpack集成打包上线方案
• PC组件库：ElementUI
  1. 饿了么团队开发维护的pc端组件库
  2. 完善的组件库 + UI设计库
  3. 相比bootstrap, elementUI的24栅格布局更具灵活性
• 移动端组件库：VUX
  1. 易用，实用，美观的移动端UI组件库
• html代码风格：h5最新标签
  1. header footer article section aside
• css代码风格：less预处理语言
  1. 增加了诸如变量、混合（mixin）、函数等功能
  2. 可以嵌套式写法，可以更好维护css代码
• js代码风格：es6
  1. 使用最新的es6语法开发新一代web前端应用
  2. 例如let、const、箭头函数、template string
• 包管理工具：Npm
  1. 世界上最大的包管理器
• 自动流打包工具：webpack（Vue框架） / gulp（不使用框架）
  1. webpack已集成在Vue-cli中
  2. gulp通过Npm安装使用
• 代码格式统一工具：eslint（待定，要求太过严格，经常会报错）
  1. 代码规范和错误检查工具

###AngluarJS1 的劣势：

1. 致命劣势：官方已经不在维护该框架，未来组件将不会得到更新，时间就了就会被淘汰
2. 与最新的angular 2相比，完全不一样，与以后的版本脱离，很难升级
3. 太重

###Vue2.0 的优势：

1. 简单：官方文档很清晰，比 Angular 简单易学。
2. 快速：异步批处理方式更新 DOM。组合：用解耦的、可复用的组件组合你的应用程序。
3. 紧凑：20kb min+gzip，且无依赖。
4. 强大：表达式 & 无需声明依赖的可推导属性 (computed properties)。
5. 对模块友好：可以通过 NPM、Bower 或 Duo 安装，不强迫你所有的代码都遵循 Angular 的各种规定，使用场景更加灵活。

#前端思想

1. 用框架就不用JQuery
2. 数据驱动页面
3. 组件化编程

1. 全局安装vue-cli
   sudo npm install -g vue-cli

2. 生成项目
   vue init webpack gu-test

3. 到达新建目录下
   cd gu-test

4. 安装依赖
   sudo npm install

5. 安装路由 网络请求 less
   sudo npm install vue-resource less less-loader json-server --save-dev
npm install npm install vuex --save

6. 开始运行
   npm run dev

7. 生成服务器build
   npm run build

生成项目时的一些内容

• Project name gu_vue （名称）
  Project description A Vue.js project （简介）
  Author gupan gupan@ieou.com （作者）
  Vue build standalone
  Install vue-router? Yes （是否安装路由）
  Use ESLint to lint your code? No （ESLint代码检查）
  Set up unit tests No （测试）
  Setup e2e tests with Nightwatch? No （测试）