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

一、Vue.js介绍

1、什么是MVVM/h2>

MVVM（Model-View-ViewModel）是一种软件架构设计模式，它源于MVC（Model-View-Controller）模式，它是一种思想，一种组织和管理代码的艺术。它利用数据绑定、属性依赖、路由事件、命令等特性实现高效灵活的架构。

MVVM的核心是数据驱动即ViewModel，ViewModel是View和Model的关系映射。在MVVM中View和Model是不可以直接进行通信的，它们之间是通过ViewModel这个中介充当着观察者的角色来进行中转的。ViewModel向上与视图层View进行双向数据绑定，向下与Model通过接口请求进行数据交互，起到承上启下的作用。

MVVM的出现促进了前端开发和后端开发逻辑的分离，大大提高了开发效率。

 

 

2、什么是Vue/h2>

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 [][-g]/[–save][-dev]

更新：

npm update [][-g]/[–save][-dev]

卸载：

npm uninstall [][-g]/[–save][-dev]

搜索：

npm search [][-g]/[–save][-dev]

发布：

npm adduser  // npm账 注册，以邮箱方式

npm publish   // 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:

    . 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，如果不修改就直接回车。

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 createdrecommended)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

 

文章知识点与官方知识档案匹配，可进一步学习相关知识Vue入门技能树首页概览22984 人正在系统学习中