【入门篇】前端框架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
以上是 【入门篇】前端框架Vue.js知识介绍 的全部内容， 来源链接： utcz.com/z/377686.html
