【入门篇】前端框架Vue.js知识介绍

一、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来改变页面的显示。

相关网站：https://cn.vuejs.org、http://doc.vue-js.com

二、Vue技术栈

基于Vue的技术栈是可以构建强大的前端项目的。

1、Node.js

官网：https://nodejs.org/en/

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教程：https://www.runoob.com/nodejs/nodejs-tutorial.html

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

编译成功：

通过http://localhost:8080进行访问。

项目文件结构：

部分项目文件说明：

|-- 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官方提供的前端路由工具，利用其可以实现页面的路由控制，局部刷新及按需加载，构建单页应用，实现前后端分离。

相关网站：https://router.vuejs.org/zh/installation.html

vue-router有两种模式：hash模式和history模式。

hash模式：

1）URL中有#号，如：http://www.abc.com/#/hello

2）不需要路由全覆盖

3）兼容IE8

history模式：

1）URL中没有#号，如 http://www.abc.com/book/id

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是 https://www.baidu.com/a/，执行history.pushState(null, null, '/b/')和history.replaceState(null, null, '/b/')时，都变成了 https://www.baidu.com/b/。但是pushState时a b同时存在，可以后退到a。replaceState时，只有b，a被b替换掉了，a没有了。

6、vuex

Vue提供的状态管理工具，用于统一管理我们项目中各种数据的交互和重用，存储我们需要用到数据对象。

相关网站：https://vuex.vuejs.org/zh/

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 组件库。

官网地址：mint-ui.github.io/#!/zh-cn

2、PC端UI框架

1）Element

一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库。

官网地址：https://element.eleme.cn/#/zh-CN

2）iView组件库

iView，是一套基于 Vue.js 的开源 UI 组件库，主要服务于 PC 界面的中后台产品。

官网地址：https://www.iviewui.com/docs/introduce

3、后台管理端UI框架

1）vue-element-admin

vue-element-admin 是一个后台前端解决方案，它基于 vue 和 element-ui实现。它使用了最新的前端技术栈，内置了 i18 国际化解决方案，动态路由，权限验证，提炼了典型的业务模型，提供了丰富的功能组件，它可以帮助你快速搭建企业级中后台产品原型。

官网地址：https://panjiachen.github.io/vue-element-admin-site/zh/guide/

2）iview-admin

基于Vue.js，搭配使用iView UI组件库形成的一套后台集成解决方案，由TalkingData前端可视化团队部分成员开发维护。iView admin遵守iView设计和开发约定，风格统一，设计考究。

地址：https://github.com/iview/iview-admin