Vue学习分享

Vue学习资料分享
一、 概述
Vue官方网址
https://cn.vuejs.org/
https://cn.vuejs.org/v2/api/
需要学习
Vue语法
ES6语法 https://www.jianshu.com/p/342ae4b2ef99
需要了解
NodeJs
ESlint(语法检查) https://www.cnblogs.com/le0zh/p/5619350.html
Babel（ES6解译） https://blog.csdn.net/jinyan1111/article/details/82423294
Webpack（前端打包工具）
TypeScript（一个超集） https://www.jianshu.com/p/0dfbcd4a0757
NPM以及Vue-Cli的基本用法 https://www.cnblogs.com/goldlong/p/8027997.html
Vue是什么
Vue是基于javascript的一套MVVM前端框架,是一套构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用，Vue的核心库只关注视图层，并且非常容易学习，非常容易与第三方库或已有项目整合。另一方面，Vue 完全有能力驱动采用单文件组件和 Vue 生态系统支持的库开发的复杂单页应用（SPA）。
MVVM
　Model：很简单，就是业务逻辑相关的数据对象，通常从数据库映射而来，我们可以说是与数据库对应的model。
View：也很简单，就是展现出来的用户界面。
ViewModel：就是与界面(view)对应的Model。因为，数据库结构往往是不能直接跟界面控件一一对应上的，所以，需要再定义一个数据对象专门对应view上的控件。而ViewModel的职责就是把model对象封装成可以显示和接受输入的界面数据对象
一套渐进式框架 （没有主张，怎么用都行）
没有多做职责之外的事即没有主张，你可以在原有大系统的上面，把一两个组件改用它实现，当jQuery用；也可以整个用它全家桶开发，当Angular用；还可以用它的视图，搭配你自己设计的整个下层用。你可以在底层数据逻辑的地方用OO和设计模式的那套理念，也可以函数式，都可以，它只是个轻量视图而已，只做了自己该做的事，没有做不该做的事，仅此而已
自底向上增量开发的设计（扩展，由简单到复杂,从静态到动态）
可以先编写出基础程序段（templet模板），然后再逐步扩大规模、补充和升级某些功能，从具体的器件、逻辑部件或者相似系统开始，凭借设计者熟练的技巧和丰富的经验，通过对其进行相互连接、修改和扩大，构成所要求的系统。
易学习
在学习中，我们没必要一上来就搞懂Vue的每一个部件和功能，先从核心功能开始学习，逐渐扩展（项目运行流程）。 同时，在使用中，我们也没有必要把全部件能都拿出来，需要什么用什么就是了，而且也可以把Vue很方便的与其它已有项目或框架相结合。

易整合
非常容易与第三方库或已有项目整合，比如我们的数据统筹管理系统，比如我们现在做的统一认证桌面端，可以单独当作js框架来使用，也可以作为一个单页面应用来使用，可以很好的整合到现有系统，也可以很好的集成各种组件工具
Vue用来干什么
用响应数据绑定的思想（就是view的变化能反映到ViewModel上，ViewModel的变化能同步到view上），可以简单写单个页面，也可以写一个大的前端系统，也可以做手机app的界面。
为什么使用Vue
我们用html+css+js或者js框架就能实现界面所有的效果功能，为什么还要用Vue呢？
vue不论针对web项目开发，网站制作，还是app，小程序开发，都越来越流行，其便捷性及易用程度都让你不得不考虑去学习。如果仅仅还是传统的各种cms开源代码建站仿站，显然你的技术已经跟不上了，如果你开发的项目数据交互较多，并且前后端分离明显，那么vue将会使你未来技术长足成长的不二选择。
简单来说，在传统web开发中，我们搭建项目都以html结构为基础，然后通过jquery或者js来添加各种特效功能，需要去选中每一个元素进行命令，这些内容在简单的项目中或者不变的项目中还能应付得来，一旦项目改动或者项目工程较大，代码的修改将是复杂繁琐的，而这时候用了vue，这些问题都不复存在。在比如一些单网页制作成的应用程序，一般涉及到数据交互的内容都很多，而应用了vue之后将大大缩减工作量。
vue优势
1.数据绑定：vue会根据对应的元素，进行设置元素数据，通过输入框，以及get获取数据等多种方式进行数据的实时绑定，进行网页及应用的数据渲染 。
2.组件式开发：通过vue的模块封装，它可以将一个web开发中设计的各种模块进行拆分，变成单独的组件，然后通过数据绑定，调用对应模版组件，同时传入参数，即可完成对整个项目的开发。
二、Vue环境搭建
1、安装Node.js（https://nodejs.org/en/）

下载完毕后，可以安装node

2、设置nodejs prefix（全局）和cache（缓存）路径（说明下为啥这个设置）
2.1、在nodejs安装路径下，新建node_global和node_cache两个文件夹

2.2、设置缓存文件夹
npm config set cache " W:\Program Files (x86)\nodeJs\node_cache"
2.3设置全局模块存放路径
npm config set prefix " W:\Program Files (x86)\nodeJs\node_global"

设置成功后，之后用命令npm install XXX -g安装以后模块就在
W:\Program Files (x86)\nodeJs\node_global里
3、设置环境变量（非常重要）
说明：设置环境变量可以使得住任意目录下都可以使用cnpm、vue等命令，而不需要输入全路径
1、鼠标右键"此电脑"，选择“属性”菜单，在弹出的“系统”对话框中左侧选择“高级系统设置”，弹出“系统属性”对话框。
2、修改用户变量PATH

3、新增系统变量NODE_PATH

4、安装Vue
npm install vue –g

因为npm安装插件是从国外服务器下载，受网络影响大，可能出现异常，如果npm的服务器在中国就好了，所以我们乐于分享的淘宝团队干了这事。来自官网：“这是一个完整 npmjs.org 镜像，你可以用此代替官方版本(只读)，同步频率目前为 10分钟 一次以保证尽量与官方服务同步。

为解决该问题，我们需要安装淘宝镜像:
命令提示符执行npm install cnpm -g --registry=https://registry.npm.taobao.org

cnpm install vue –g

5、安装vue命令行工具，即vue-cli 脚手架（说明下什么是脚手架）
cnpm install vue-cli –g

6、初始化项目
先建立一个文件夹，作为项目的地址，如：W:\Workspace\workspace_vscode
cd W:\Workspace\workspace_vscode
当前目录下输入“vue init webpack 项目名称（使用英文）”。（演示每一步的含义要讲清楚）
vue init webpack mytest

初始化完成后的项目目录结构如下：

3、安装工程依赖模块
安装完以后,由于个文件是需要相互依赖的,一般需要安装依赖文件
定位到mytest的工程目录下，安装该工程依赖的模块，这些模块将被安装在：mytest\node_module目录下，node_module文件夹会被新建，而且根据package.json的配置下载该项目的modules
cd mytest
npm install
三、工程结构（对照初始化的系统介绍）

四、项目运行流程

五、 流行Vue前端框架
1、ElementUI(http://element-ui.cn)
element ui框架的按钮组件，这款由饿了么前端开源的UI框架

2、Iview(https://www.iviewui.com/)
iView 是一套基于 Vue.js 的开源 UI 组件库，主要服务于 PC 界面的中后台产品。使用单文件的 Vue 组件化开发模式 基于 npm + webpack + babel 开发，支持 ES2015 高质量、功能丰富 友好的 API ，自由灵活地使用空间，由TalkingData开发维护，有很多知名互联网企业都在使用
3、Vuetify（https://vuetifyjs.com/zh-Hans/）
4、vue-strap（http://yuche.github.io/vue-strap/）
5、cube-ui（https://didi.github.io/cube-ui/#/zh-CN/example）
6、buefy（https://buefy.github.io/#/）
7、vue-beauty (https://fe-driver.github.io/vue-beauty/#/components/button)
8、at-ui（ https://at-ui.github.io/at-ui/#/zh）
9、Vue-Blu（ https://chenz24.github.io/vue-blu/#/）