【入门篇】前端框架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的出现促进了前端开发和后端开发逻辑的分离,大大提高了开发效率。

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

2、什么是Vue?

Vue.js(读音 /vjuː/, 类似于 view)是一个MVVM架构的库,是一套构建用户界面的渐进式轻量级JavaScript框架。它以数据驱动和组件化的思想构建。

Vue.js与其他重量级框架不同的是,它采用自底向上增量开发的设计。它简洁、易于理解且能快速上手。

Vue.js的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。

Vue.js是通过操作数据来实现页面的更新,JQuery是通过操作DOM来改变页面的显示。

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

相关网站:https://cn.vuejs.orghttp://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的版本:

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

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等加载器实现语法转化与加载。

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

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

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

说明:

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

编译成功:

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

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

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

项目文件结构:

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

部分项目文件说明:

|-- 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/

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

2)iview-admin

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

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

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

上一篇:腾讯开放平台web第三方登录获取信息类(包含签名)


下一篇:性能达到原生 MySQL 七倍,华为云 Taurus 技术解读【华为云技术分享】