目标：了解Vue, 了解常用的Vue的一些工具，用vue cli搭建一个测试用例，在浏览器上面运行起来。
了解Vue
百科定义
Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式JavaScript框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，方便与第三方库或既有项目整合。
同类的技术
AngularJS: 诞生于2009年，由Misko Hevery 等人创建，后为Google所收购。是一款优秀的前端JS框架，已经被用于Google的多款产品当中。AngularJS有着诸多特性，最为核心的是：MVC（Model–view–controller）、模块化、自动化双向数据绑定、语义化标签、依赖注入等等。
React: 起源于 Facebook 的内部项目，因为该公司对市场上所有 JavaScript MVC 框架，都不满意，就决定自己写一套，用来架设 Instagram 的网站。做出来以后，发现这套东西很好用，就在2013年5月开源了。主要用于构建UI，很多人认为 React 是 MVC 中的 V（视图）。
AngularJS、React、Vue.js并称前端3大框架。
同类技术优缺点
[站外图片上传中...(image-455a7b-1591406644886)]
| 优点 | 缺点 | |
|---|---|---|
| Vue.js | 轻量级,学习成本低 | 生态不太成熟 |
| angularJS | 有优秀的组件系统 | 学习曲线是非常陡峭 |
| React | 丰富的生态系统 | 学习曲线陡峭 |
vue对比链接：https://cn.vuejs.org/v2/guide/comparison.html#AngularJS-Angular-1
vue vs React :合严格的 Flux 架构，适合超大规模多人协作的复杂项目。理论上 Vue 配合类似架构也可以胜任这样的用例，但缺少类似 Flux 这样的官方架构。小快灵的项目上，Vue 和 React 的选择更多是开发风格的偏好。对于需要对 DOM 进行很多自定义操作的项目，Vue 的灵活性优于 React。
vue vs Angular：Angular的学习曲线是非常陡峭的——作为一个框架，它的 API 面积比起 Vue 要大得多，你也因此需要理解更多的概念才能开始有效率地工作。当然，Angular 本身的复杂度是因为它的设计目标就是只针对大型的复杂应用；但不可否认的是，这也使得它对于经验不甚丰富的开发者相当的不友好。
渐进式JavaScript框架
vue官网的第一句话就是渐进式JavaScript框架，我的理解就是循序渐进可以自底向上逐层应用开发的框架，可以单独一个页面用来做表单，也可以整个项目用来做框架，可以一步一步引入vue，模块化需要那个就引入那个。
Vue时间轴
[站外图片上传中...(image-4996c9-1591406644886)]
2013: 在Google工作的尤雨溪，受到Angular的启发，从中提取自己所喜欢的部分，开发出了一款轻量框架，最初命名为Seed。
2013.12：这粒种子发芽了，更名为Vue，版本号是0.6.0。
2014.01.24：Vue正式对外发布，版本号是0.8.0。
2014.02.25：vue版本0.9.0发布（代号Animatrix动画版的骇客帝国），此后重要的版本都会有自己的代号。
2015.06.13：vue版本0.12.0发布（代号Dragon Ball龙珠），这一年Vue大爆发，Laravel 社区（一款流行的 PHP 框架的社区）首次使用 Vue，Vue在JS社区也打响了知名度。
2015.08.18：vue里程碑-新世纪福音战士发布。vue-router（2015-08-18）、vuex（2015-11-28）、vue-cli（2015-12-27）相继发布，标志着 Vue从一个视图层库发展为一个渐进式框架。
2016.9.3：尤雨溪正式宣布加盟阿里巴巴Weex团队，尤雨溪称他将以技术顾问的身份加入 Weex 团队来做 Vue 和 Weex 的 JavaScript runtime 整合，目标是让大家能用 Vue 的语法跨三端
2016.9.30: vue版本2.0.0 （Ghost in the Shell 攻壳机动队）发布，这是第二个重要的里程碑，它吸收了React的Virtual Dom方案，还支持服务端渲染。
2018.9.30： 发布了 Vue 3.0 的开发路线，会保持与 2.x 的兼容并表示将从头开始重写 3.0
2019.2.4：vue版本2.6.0 （Macross超时空要塞）发布了。新增了Scoped slots(作用域插槽)的新语法、 动态参数指令、响应对象等新特性。
一点小知识
Vue学习之前需要了解:
Node.js：运行在服务端的 JavaScript，是一个事件驱动I/O服务端JavaScript环境，基于Google的V8引擎，V8引擎执行Javascript的速度非常快，性能非常好。
npm、cnpm : npm是nodejs的包管理器，cnpm是淘宝 NPM 镜像，用来加速。
webpack: 基于node的一个现代 JavaScript 应用程序的静态模块打包器
ECMAScript 6: ECMAScript 6.0（以下简称ES6）是JavaScript语言的下一代标准，已经在2015年6月正式发布了。它的目标，是使得JavaScript语言可以用来编写复杂的大型应用程序，成为企业级开发语言。
html、css、JavaScript的基础
vue官网: 官方文档
看云Vue文档: 二手文档
VSCode：速度较快，对超大文件读写速度飞快(打开10M代码不到1s)，插件数量相对少，有一些增强功能比如调试器， 终端，原生支持语言语法高亮较少(C# JS TypeScript是第一位)，内置JS/TS调试器…可以基于不同项目(文件夹)设置偏好，写C#和JS/TS专用
-
Element-UI: 饿了么提供的UI框架。iView：一个团队
// 在main.js中全局引入element import ElementUI from 'element-ui' import 'element-ui/lib/theme-chalk/index.css' Vue.use(ElementUI) 维护靠个人的vux: 基于webpack+vue-loader+vux可以快速开发移动端页面，配合vux-loader方便你在WeUI的基础上定制需要的样式。滴滴的cube-ui
vuepress: Vue 开发主题的极简静态网站生成器，另一个部分是为书写技术文档而优化的默认主题。它的诞生初衷是为了支持 Vue 及其子项目的文档需求。
Vue组成方式(MVVM模式以及两个核心点)
-
MVVM模式
[站外图片上传中...(image-757b40-1591406644886)]
https://gaoqisen.github.io/GraphBed/201908/20190811121954.png
Model(数据层)-View(视图层)-ViewModel(视图和数据的链接层)，ViewModel层连接Model和View。View层和Model层并没有直接联系，而是通过ViewModel层进行交互。ViewModel层通过双向数据绑定将View层和Model层连接了起来，使得View层和Model层的同步工作完全是自动的。因此开发者只需关注业务逻辑，无需手动操作DOM，复杂的数据状态维护交给MVVM统一来管理
[站外图片上传中...(image-d34171-1591406644886)] -
数据驱动
所谓数据驱动，是指视图是由数据驱动生成的，我们对视图的修改，不会直接操作 DOM，而是通过修改数据。它相比我们传统的前端开发，如使用 jQuery 等前端库直接修改 DOM，大大简化了代码量。特别是当交互复杂的时候，只关心数据的修改会让代码的逻辑变的非常清晰，因为 DOM 变成了数据的映射，我们所有的逻辑都是对数据的修改，而不用碰触 DOM，这样的代码非常利于维护。
组件化
所谓组件化，就是把页面拆分成多个组件 (component)，每个组件依赖的 CSS、JavaScript、模板、图片等资源放在一起开发和维护。组件是资源独立的，组件在系统内部可复用，组件和组件之间可以嵌套。
- 代码结构
[站外图片上传中...(image-b893fc-1591406644886)]
- Vue的生命周期图(当遇到页面初始化的时候需要处理一下逻辑的时候，在什么时候触发函数) 。详细的生命周期解释：https://segmentfault.com/a/1190000011381906
[站外图片上传中...(image-e9bfff-1591406644886)]
- 技术揭秘https://ustbhuangyi.github.io/vue-analysis/data-driven/
实战
安装方式
- 在官网下载Node.js
node -v // 查看node版本
npm -v // 查看npm版本
npm install cnpm -g // 全局安装cnpm
npm install -g cnpm --registry=https://registry.npm.taobao.org // 指定地址安装cnpm
cnpm install vue // 安装最新稳定版本的vue
vue --version // 查看vue版本
cnpm install --global vue-cli // cnpm 全局安装vue脚手架，
npm install -g @vue/cli // npm 全局安装vue脚手架
vue init webpack my-project // 创建一个基于 webpack 模板的新项目
cd my-project // 到达项目根目录
cnpm install // 安装依赖
cnpm run dev // 启动项目，或者npm run dev
-
vue脚手架安装时的选项
❯ vue build 构建方式,两个选择（上下箭头选择，回车即为选定） Runtime + Compiler:recommended for most users (译：运行+编译：被推荐给大多数用户) Runtime-only:about 6KB lighter min+gzip,but templates (or any Vue-specific HTML) are ONLY allowed in .vue files-render functions are required elsewhere(译：只运行大约6KB比较轻量的压缩文件，但只允许模板（或任何VUE特定HTML）。VUE文件需要在其他地方呈现函数。(意思大概是选择该构建方式对文件大小有要求, 这里推荐使用1选项，适合大多数用户的) Standard (https://github.com/standard/standard) js的标准风格 Airbnb (https://github.com/airbnb/javascript) JavaScript最合理的方法，这个github地址说是JavaScript最合理的方法 none (configure it yourself) 自己配置 Setup unit tests? 是否安装单元测试 Setup e2e tests with Nightwatch(Y/n)?是否安装E2E测试框架NightWatch（E2E，也就是End To End，就是所谓的“用户真实场景”。） yes,use npm(使用npm) yes,use yarn(使用yarn) no,I will handle that myself(自己操作) 如果报以下的错误，就安装缺少依赖(cnpm install)，全部安装完成之后就可以通过链接访问了。
[站外图片上传中...(image-695f08-1591406644886)]访问http://localhost:8080出现vue标识表示安装成功
[站外图片上传中...(image-17d9b5-1591406644886)]
- vue路由
routes: [ { // 路由路径，浏览器网址输入栏的路径 path: '/', // 通过name属性，为一个页面中不同的router-view渲染不同的组件,如：将上面代码的Hello渲染在 name为Hello的router-view中，将text渲染在name为text的router-view中。不设置name的将为默认的渲染组件。12345645645 name: 'HelloWorld', // 导入的组件import HelloWorld from '@/components/HelloWorld' component: HelloWorld }, ] // 页面跳转方式测试1
配置文件
- package.json
{
"name": "ffdd-fast-vue", // 项目名称
"version": "1.2.2", // 版本
"description": "...", // 描述
"author": "", // 作者
"private": true, // 是否私有
"scripts": {
"dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js", // npm run dev 执行的语句
"start": "npm run dev", // 项目启动
"unit": "jest --config test/unit/jest.conf.js --coverage", // 单元测试
"e2e": "node test/e2e/runner.js", // 前端到后端整个过程的测试
"test": "npm run unit && npm run e2e", // 测试
"lint": "eslint --ext .js,.vue src test/unit/specs test/e2e/specs", // 修改代码样式, 运行之后就不报ESLint的错误
"build": "gulp" // 构建
},
"dependencies": { // 生产环境所有的第三方依赖
"axios": "0.17.1", // 代替ajax
"babel-plugin-component": "0.10.1", // 按需加载插件
"babel-polyfill": "6.26.0", // 按需加载进行性能优化插件
"element-ui": "2.8.2", // 饿了么提供UI框架
"gulp": "3.9.1", // 自动化构建工具
"gulp-concat": "2.6.1", // 文件合并插件
"gulp-load-plugins": "1.5.0", // 自动加载插件
"gulp-replace": "0.6.1", // 文件替换插件
"gulp-shell": "0.6.5", // 命令行插件
"lodash": "4.17.5", // JavaScript 实用工具库。
"node-sass": "4.9.0", // sass编译成css
"npm": "^6.9.0",
"sass-loader": "6.0.6", // 是webpack的一个loader,
"svg-sprite-loader": "3.7.3", // 实现自己的Icon组件
"vue": "2.5.2",
"vue-cookie": "1.1.4", // cookie插件
"vue-router": "3.0.1", // vue 路由
"vuex": "3.0.1" // vue状态管理
},
"devDependencies": { // 开发环境所有的第三方依赖
"autoprefixer": "7.1.2", // 自动补全css前缀
"babel-core": "6.22.1", // 把 js 代码分析成 ast ,方便各个插件分析语法进行相应的处理
"babel-eslint": "7.1.1", // 语法检查
"babel-jest": "21.0.2", // 单元测试
...
},
"engines": { // 引擎
"node": ">= 8.11.1",
"npm": ">= 5.6.0"
},
"browserslist": [ // 浏览器列表
"> 1%", // 全球超过1%人使用的浏览器
"last 2 versions", // 所有浏览器兼容到最后两个版本根据CanIUse.com追踪的版本
"not ie <= 8" // 方向排除部分版本
]
}
-
config/index.js
'use strict' // 模版版本号: 1.3.1 // see http://vuejs-templates.github.io/webpack for documentation. const path = require('path') module.exports = { dev: { // npm run dev 执行参数 // 路径 assetsSubDirectory: 'static', // 静态文件路径 assetsPublicPath: '/', // 代理列表 proxyTable : { '/proxyApi': { target: 'http://localhost:8887/', // 代理地址 changeOrigin: true, // 变化源 pathRewrite: { // 路径重写 '^/proxyApi': '/' } } }, // 各种开发服务器设置 host: 'localhost', // 可以被process.env.HOST覆盖 port: 8080, // 可以被process.env.PORT覆盖，如果端口正在使用，将换一个端口 autoOpenBrowser: false, // 自动打开浏览器 errorOverlay: true, // 异常覆盖 notifyOnErrors: true, // 异常通知 poll: false, // https://webpack.js.org/configuration/dev-server/#devserver-watchoptions- // 如果为true，则在捆绑期间将对您的代码进行处理，linting错误和警告将显示在控制台中 useEslint: true, // 如果为true, 错误和警告也将显示在错误覆盖中 showEslintErrorsInOverlay: false, /** * Source Maps */ // 开发环境工具 devtool: 'cheap-module-eval-source-map', // 缓存破坏 // https://vue-loader.vuejs.org/en/options.html#cachebusting cacheBusting: true, cssSourceMap: true }, build: { // npm run build 执行参数 // index.html文件路径指定 index: path.resolve(__dirname, '../dist/index.html'), // 构建后路径指定、资源文件夹名、公开路径 assetsRoot: path.resolve(__dirname, '../dist'), assetsSubDirectory: 'static', assetsPublicPath: '/', /** * 生产环境的Source Maps */ productionSourceMap: true, // https://webpack.js.org/configuration/devtool/#production devtool: '#source-map', //默认情况下Gzip关闭许多流行的静态主机，例如Surge或Netlify已经为您准备了所有静态资源。 //在设置为“true”之前，请确保：npm install --save-dev compression-webpack-plugin productionGzip: false, productionGzipExtensions: ['js', 'css'], //运行带有额外参数的build命令 //在构建完成后查看捆绑分析器报告：`npm run build --report` bundleAnalyzerReport: process.env.npm_config_report } }