前言
1、Vue.js 是一个库，是一套构建用户界面的渐进式框架
2、是以数据驱动和组件化的思想构建的，采用自底向上增量开发的设计
3、vue + vuex+ vue- + vue- + + es6 + less的项目架构成为了越来越多大公司的第一选择
一、创建vue项目
1、通过命令创建一个vue项目
vue hello-world
npm -g @vue/cli
创建好的目录结构
2、通过ui页面方式创建一个项目
vue ui
二、调试插件
启动vue项目的一个报错
npm run dev
报错说明是node版本问题
当前环境
brew node
npm -g n
sudo n 10.19.0
npm run dev
将node版本升级了之后 需要重新编译下sass
npm node-sass
三、VUE组件库
1、vue组件库
若vue2.0作为前端框架 可以选择饿了么推出的组件
vue、React、对比
a、性能 对比
中，在scope作用域中每一次数据变化，会触发的重新计算，对常用的dom事件，xhr事件等做了封装， 在里面触发进入的流程。在流程里面，会从开始遍历， 检查所有的。并且，如果一些 触发另一个更新，脏检查循环（ cycle）可能要运行多次
Vue则没有这个问题，因为它使用基于依赖追踪的观察系统并且异步队列更新，数据的变化都是的，除非数据之间有明确的依赖关系
vue开发团队建立了一个简单的对比性能的项目
负责渲染10000个列表项100次。Vue官方将每一个参照项目都分别运行 20 次并取最好的结果结果如下图：
由此可见，Vue的性能是远好于，并且稍微优于React的。
b、社区拓展对比
的背后是，所以社区基础是不需要担心的，从到的问题数量都可以反映出生态系统很完整。之后的2.0版本几乎是一个推翻重做的框架，对于使用了1.X版本的项目，想要平滑的升级过渡到2.0版本应该是非常困难的。现在的线上应用数量还不算太多，主流编码还是以1.X版本居多。这个版本化巨大的差异也间接影响到了开发者对于的信心。
Vue和React都有强大的社区支持。React有状态管理库Flux、，相应的，Vue有vuex。Vue 和 React 都提供了强大的路由库来应对大型应用。然而Vue的路由库和状态管理库都是由官方维护支持的。React 则是选择把这些问题交给社区维护，因此创建了一个更分散的生态系统。但相对的，React 的生态系统相比 Vue 更加繁荣。此外，Vue 提供了Vue-cli 脚手架，包括了，，甚至路由库，能让你非常容易地构建项目
c、学习陡峭度对比
在指令与组件方面，Vue中将指令和组件分得更清晰。指令只封装 DOM 操作，而组件代表一个自给自足的独立单元，有自己的视图和数据逻辑。在 中两者有不少相混的地方。在API与框架设计方面，都比vue要复杂的多。就个人感觉而言，和React的学习曲线会相对陡峭一些，而vue的编码方式会更趋近于前端开发者的编程习惯。
d、渲染能力对比
能使你用相同的组件模型编写有本地渲染能力的 APP（iOS 和 ）。能同时跨多平台开发，对开发者是非常棒的。为了弥补这方面的不足，在2016年9月举办的期间，vue.js的作者尤雨溪宣布加盟Weex团队担任技术顾问，双方将进行更紧密的合作，共建开发生态圈。Weex 是阿里的跨平台用户界面开发框架，Weex 的 框架运行时用的就是 Vue。在此之后，在 Weex 的帮助下，使用 Vue 语法开发的组件不仅仅可以运行在浏览器端，还能被用于开发 iOS 和 上的原生应用。
e、vue的缺点
vue的影响力相比于和react还差的很远
2、vue全家桶及项目架构
Vue有著名的全家桶系列，包含了
vue-（），
vuex（），
vue-（
）。
再加上构建工具vue-cli，就是一个完整的vue项目的核心构成。
a、vue-路由
推荐使用npm工具来安装vue-
npm vue-
导入模块
Vue from’vue’
from’vue-’
Vue.use(); // 需要 Vue和，不然会报错
导入自定义模块（组件）
Goods from ‘@//goods/goods’;
通过const = new （）来定义一个路由，并传入对应的配置，包括路径path和组件。
在使用new Vue来创建和挂载vue根实例的时候，
记得要通过 配置参数注入路由，即在中出来的路由对象，从而让整个应用都有路由功能。
b、vuex状态管理
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。
它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化
Vuex 的四个核心概念分别是
Vuex和简单的全局对象是不同的，当Vuex从store中读取状态值的时候，若状态发生了变化，那么相应的组件也会高效的更新。并且，改变store中状态的唯一途径就是提交 。这样便于我们跟踪每一次状态的变化。只要发生了状态的变化，一定伴随着的提交
vuex例子:
通过 store.state 来获取状态对象，以及通过 store. 方法触发状态变更
c、Vue-
Vue-有体积小，支持IE9以上的浏览器，支持特性的特点
npm vue-
vue-的请求API是按照REST风格设计的，它提供了7种请求API：
· get(url,[])
· head(url,[])
· (url,[])
· jsonp(url,[])
· post(url,[body], [])
· put(url, [body],[])
· patch(url,[body], [])
3、vue项目的大概结构
4、vue中less的应用
在vue项目中一样可以使用less预编译，只是需要使用npm安装less-插件。安装完成后，在vue中的css模块进行简单的配置，这样就可以直接使用less来编写样式表了。在打包编译的时候，会自动生成对应的css样式。
a、计算属性
购物车结算场景，用户选中商品的总金额是根据商品数量、选中商品种类数
和商品单价来变化的
只需要使用{{}}这个计算属性就可以来表示最终的商品总额
不需要关注这个变量的数值变化，这个变量的逻辑写在对应的计算属性中
计算属性是基于它的依赖进行缓存的
计算属性只有在它的相关依赖发生变化时才会重新计算求值
在本例中，只有当选择商品的价格price和数量count发生变化时，这个计算属性才会重新计算新的值。这就意味着，只要这个值没有发生变化，多次访问该计算属性会立即返回之前的计算结果，而不必再次执行计算
b、模版语法
允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据
所有 Vue.js 的模板都是合法的 HTML ，所以能被遵循规范的浏览器和 HTML 解析器解析
Vue的模版语法包括了使用双大括号插入文本、使用v-html插入纯HTML内容、使用v-bind插入对象、类似的v-if、v-show、v-for指令、以及过滤器等等
c、组件化
组件（）是 Vue.js 最强大的功能。组件可以封装可重用的代码，通过传入对象的不同，实现组件的复用。
组件实例的作用域是孤立的。
这意味着不能在子组件的模板内直接引用父组件的数据。
要让子组件使用父组件的数据，我们需要通过子组件的props选项。
如本例所示，子组件star要显式的使用props选项声明它期待获得的数据。
在这里就是指的“size”和“score”两个变量。
我们可以通过父级给子组件star传入大小和数值这两个对象，来实现对子组件的定制化。
d、过渡效果
Vue 在插入、更新或者移除 DOM 时，提供多种不同方式的应用过渡效果，可以用简单的几行代码实现酷炫的过渡效果。
Vue 提供了 的封装组件，在使用v-if、v-show等方法使得内部dom元素发生变化时，可以给任何元素和组件添加过渡。
当v-show中内容发生变化时，组件中的元素会发生状态的改变，在应用了封装后，Vue会自动识别目标元素是否应用了CSS过渡效果动画，如果有，会在合适的时机添加的class来实现该过渡效果。
需要将想实现过渡效果的元素放在标签中包裹，通过name=“slide-fade”来声明过渡效果名称，并在对应的vue文件中添加过渡效果的css样式，这样就可以简单的完成该元素的过渡效果