一、Vue.js介绍 1、什么是MVVM？ MVVM（Model-View-ViewModel）是一种软件架构设计模式，它源于MVC（Model-View-Controller）模式，它是一种思想，一种组织和管理代码的艺术。它利用数据绑定、属性依赖、路由事件、命令等特性实现高效灵活的架构。 MVVM ......
一、vue.js介绍
1、什么是mvvm？
mvvm（model-view-viewmodel）是一种软件架构设计模式，它源于mvc（model-view-controller）模式，它是一种思想，一种组织和管理代码的艺术。它利用数据绑定、属性依赖、路由事件、命令等特性实现高效灵活的架构。
mvvm的核心是数据驱动即viewmodel，viewmodel是view和model的关系映射。在mvvm中view和model是不可以直接进行通信的，它们之间是通过viewmodel这个中介充当着观察者的角色来进行中转的。viewmodel向上与视图层view进行双向数据绑定，向下与model通过接口请求进行数据交互，起到承上启下的作用。
mvvm的出现促进了前端开发和后端开发逻辑的分离，大大提高了开发效率。
2、什么是vue？
vue.js（读音 /vjuː/, 类似于 view）是一个mvvm架构的库，是一套构建用户界面的渐进式轻量级javascript框架。它以数据驱动和组件化的思想构建。
vue.js与其他重量级框架不同的是，它采用自底向上增量开发的设计。它简洁、易于理解且能快速上手。
vue.js的目标是通过尽可能简单的 api 实现响应的数据绑定和组合的视图组件。
vue.js是通过操作数据来实现页面的更新，jquery是通过操作dom来改变页面的显示。
相关网站：、
二、vue技术栈
基于vue的技术栈是可以构建强大的前端项目的。
1、node.js
官网：
node.js 是一个基于chrome v8 引擎的 javascript 运行环境。 它是一个让 javascript 运行在服务端的开发平台，它让 javascript 成为与php、python、perl、ruby 等服务端语言平起平坐的脚本语言。发布于2009年5月，由ryan dahl开发，实质是对chrome v8引擎进行了封装的开源web服务器项目。
node.js 是javascript人运行环境，类比java中的jvm。
node.js教程：
2、npm
npm：包管理器（nodepackagemanager)。
npm是一个管理包的工具。可以这样来理解：有一个代码仓库，所有人都把代码（如：jquery）提交（npm publish）到这个代码库中来，其他人要使用这些代码就去下载（npm install），下载完的代码会在 node_modules 目录中，然后就可以使用了。
node.js都已经集成了npm，只要安装node.js就可以了。
查看node.js和npm的版本：
npm常用命令：
安装：
npm install [<name><version>][-g]/[--save][-dev]
更新：
npm update [<name><version>][-g]/[--save][-dev]
卸载：
npm uninstall [<name><version>][-g]/[--save][-dev]
搜索：
npm search [<name><version>][-g]/[--save][-dev]
发布：
npm adduser // npm账号注册，以邮箱方式
npm publish <name> // npm模块发布
参数说明：
--save // 将模块依赖关系写入到package.json文件的dependencies参数中
-dev // 将模块依赖关系写入到package.json文件的devdependencies参数中
-g // 全局安装
@+version // 安装指定版本
更多查看npm官网：https://docs.npmjs.com/cli/npm
安装淘宝 npm 镜像：
大家都知道国内直接使用 npm 的官方镜像是非常慢的，推荐使用淘宝 npm 镜像。这样就可以使用淘宝定制的 cnpm命令行工具代替默认的 npm:
npm install -g cnpm --registry=https://registry.npm.taobao.org
cnpm install [name]
3、webpack
一款强大的文件打包工具，可以将我们的前端项目文件（javascript、css、fonts、images）统一打包压缩至js中，并且可以通过vue-loader等加载器实现语法转化与加载。
1、通过 npm 全局安装 webapck
npm install -g webpack
2、在项目中安装 webpack
npm install webpack --save-dev
4、vue-cli
vue的脚手架工具，它是一个专门为单页面应用快速搭建繁杂的脚手架，它可以轻松的创建新的应用程序而且可用于自动生成vue和webpack的项目模板。
1、通过 npm 全局安装vue-cli
npm install -g vue-cli
2、使用vue-cli创建vue项目
vue init <template-name> <project-name>
template-name:
. webpack //常用
. webpack-simple // 一个简单webpack+vue-loader的模板，不包含其他功能。
. browserify // 一个全面的browserify+vueify 的模板，功能包括热加载，linting,单元检测。
. browserify-simple // 一个简单browserify+vueify的模板，不包含其他功能。
. pwa // 基于webpack模板的vue-cli的pwa模板
. simple // 一个最简单的单页应用模板
通过webpack创建vue项目：
vue init webpack my-project
说明：
project name :项目名称 ，如果不需要更改直接回车就可以了。注意：这里不能使用大写。
project description:项目描述，默认为a vue.js project，如果不修改就直接回车。
author：作者，如果你有配置git，他会读取.ssh文件中的user。
vue build： standalone 如何构建项目，直接回车。
install vue-router? 是否安装vue的路由插件，y代表安装，n无需安装，下面的命令也是一样的。
use eslint to lint your code? 是否用eslint来限制你的代码错误和风格。
pick an eslint preset standard 选择一个eslint代码规范，上面选y时出现，直接回车。
set up unit tests ? 是否需要安装单元测试工具。
setup e2e tests with nightwatch? 是否安装e2e来进行用户行为模拟测试。
should we run npm install for you after the project has been created?(recommended)npm 在后续安装依赖包时是否使用npm install安装。
根据提示，待项目加载完成之后，执行下面两条命令启动项目：
cd my-project
npm run dev
编译成功：
通过进行访问。
项目文件结构：
部分项目文件说明：
|-- build // 项目构建(webpack)相关代码
| |-- build.js // 生产环境构建代码
| |-- check-version.js // 检查node、npm等版本
| |-- utils.js // 构建工具相关
| |-- vue-loader.conf.js // webpack loader配置
| |-- webpack.base.conf.js // webpack基础配置
| |-- webpack.dev.conf.js // webpack开发环境配置,构建开发本地服务器
| |-- webpack.prod.conf.js // webpack生产环境配置
|-- config // 项目开发环境配置
| |-- dev.env.js // 开发环境变量
| |-- index.js // 项目一些配置变量
| |-- prod.env.js // 生产环境变量
| |-- test.env.js // 测试脚本的配置
|--node_modules： //项目依赖包
|-- src // 源码目录
| |-- assets // 资源目录
| |-- components // 组件目录
| |-- router // 路由管理
| |-- app.vue // 页面入口文件
| |-- main.js // 项目入口文件，加载各种公共组件
|-- static // 静态文件，比如一些图片，json数据等
|-- test // 测试文件
| |-- e2e // e2e 测试
| |-- unit // 单元测试
|-- .babelrc // es6语法编译配置
|-- .editorconfig // 定义代码格式
|-- .eslintignore // eslint检测代码忽略的文件（夹）
|-- .eslintrc.js // 定义eslint的plugins,extends,rules
|-- .gitignore // git上传需要忽略的文件格式
|-- .postcsssrc // postcss配置文件
|-- index.html // 访问的入口页面
|-- package-lock.json // 锁定安装时的包版本号，上传到代码库后可以保证同一个项目组的人依赖的包版本相同
|-- package.json // 项目的各种模块、配置信息等
|-- readme.md // 项目说明，markdown文档
5、vue-router
vue官方提供的前端路由工具，利用其可以实现页面的路由控制，局部刷新及按需加载，构建单页应用，实现前后端分离。
相关网站：
vue-router有两种模式：hash模式和history模式。
hash模式：
1）url中有#号，如：
2）不需要路由全覆盖
3）兼容ie8
history模式：
1）url中没有#号，如
2）需要服务端配置和路由全覆盖
3）兼容ie10
4）api能很方便地切换和修改历史状态
history.go(-2);//后退两次
history.go(2);//前进两次
history.back(); //后退
hsitory.forward(); //前进
history.pushstate(state, title, url); //创建新的历史记录
history.replacestate(state, title, url); //修改当前历史记录
如：当前url是 ，执行history.pushstate(null, null, '/b/')和history.replacestate(null, null, '/b/')时，都变成了 。但是pushstate时a b同时存在，可以后退到a。replacestate时，只有b，a被b替换掉了，a没有了。
6、vuex
vue提供的状态管理工具，用于统一管理我们项目中各种数据的交互和重用，存储我们需要用到数据对象。
相关网站：
vuex 有四个核心概念：
1）the state tree：vuex 使用单一状态树，用一个对象就包含了全部的应用层级状态。这也意味着，每个应用将仅仅包含一个 store 实例。单状态树让我们能够直接地定位任一特定的状态片段，在调试的过程中也能轻易地取得整个当前应用状态的快照。
2）getters：用来从 store 获取 vue 组件数据。
3）mutators：事件处理器用来驱动状态的变化。
4）actions：可以给组件使用的函数，以此用来驱动事件处理器 mutations。
vuex和简单的全局对象是不同的，当vuex从store中读取状态值的时候，若状态发生了变化，那么相应的组件也会高效的更新。并且，改变store中状态的唯一途径就是提交commit mutations。这样便于我们跟踪每一次状态的变化。只要发生了状态的变化，一定伴随着mutation的提交。
三、推荐vue多端ui框架
1、移动端ui框架
1）vant ui
有赞公司开发的移动端 vue 组件库。
官网地址：https://youzan.github.io/vant/#/zh-cn/intro
2）mint ui
饿了么公司开发的移动端 vue 组件库。
官网地址：
2、pc端ui框架
1）element
一套为开发者、设计师和产品经理准备的基于 vue 2.0 的桌面端组件库。
官网地址：https://element.eleme.cn/#/zh-cn
2）iview组件库
iview，是一套基于 vue.js 的开源 ui 组件库，主要服务于 pc 界面的中后台产品。
官网地址：
3、后台管理端ui框架
1）vue-element-admin
vue-element-admin 是一个后台前端解决方案，它基于 vue 和 element-ui实现。它使用了最新的前端技术栈，内置了 i18 国际化解决方案，动态路由，权限验证，提炼了典型的业务模型，提供了丰富的功能组件，它可以帮助你快速搭建企业级中后台产品原型。
官网地址：
2）iview-admin
基于vue.js，搭配使用iview ui组件库形成的一套后台集成解决方案，由talkingdata前端可视化团队部分成员开发维护。iview admin遵守iview设计和开发约定，风格统一，设计考究。
地址：
