二、Vue简介
Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。
（1）首先要下载node.js开始，安装时默认加入环境变量。
node.js官网下载地址：https://nodejs.org/en/
2.1 安装
2.1.1 通过< script>标签引入
直接下载并用 <script> 标签引入，Vue 会被注册为一个全局变量。
开发版本：https://cn.vuejs.org/js/vue.js
生产版本：https://cn.vuejs.org/js/vue.min.js
2.1.2 通过CDN安装
- 制作原型或学习：
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
- 用于生产环境：
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14"></script>
- 使用原生 ES Modules：
<script type="module"> import Vue from 'https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.esm.browser.js' </script>
2.1.3 通过NPM安装
使用之前，我们先来了解3个东西的作用。
（1）npm: Nodejs下的包管理器。
推荐使用：taobao NPM镜像源下载比较快 命令：npm install -g cnpm --registry=https://registry.npm.taobao.org
（2）webpack: 它主要的用途是通过CommonJS的语法把所有浏览器端需要发布的静态资源做相应的准备，比如资源的合并和打包。
（3）vue-cli: 用户生成Vue工程模板。（帮你快速开始一个vue的项目，也就是给你一套vue的结构，包含基础的依赖库，只需要 npm install就可以安装）
不过这个版本有点老，我就卸载然后装新的（新版本换名字了）：
npm uninstall vue-cli -g npm install -g @vue/cli
在用 Vue 构建大型应用时推荐使用 NPM 安装。NPM 能很好地和诸如 webpack或 Browserify模块打包器配合使用。同时 Vue 也提供配套工具来开发单文件组件。由于 npm 安装速度慢，也可使用 cnpm安装，安装使用介绍参照：使用淘宝 NPM 镜像。
1.npm 版本需要大于 3.0，如果低于此版本需要升级它：
# 查看版本 $ npm -v 2.3.0 #升级 npm cnpm install npm -g # 升级或安装 cnpm npm install cnpm -g
2.安装vue
# 使用npm安装 $ cnpm install vue # 使用cnpm安装 $ cnpm install vue
2.2 创建一个Vue实例
每个 Vue 应用都需要通过实例化 Vue 来实现。
2.2.1 语法格式
var vm = new Vue({ // 选项 })
例如
<div id="example"> <h1>title : {{title}}</h1> <h1>url : {{url}}</h1> </div> <script> var vm = new Vue({ el: '#example', data: { title: "一个Vue实例", url: "https://cn.vuejs.org/", }, methods: { details: function() { return this.title + " ------"; } } }) </script>
在 Vue 构造器中有一个el 参数，它是 DOM 元素中的 id。在上面实例中 id 为 example，这表示接下来的改动全部在以上指定的 div 内，div 外部不受影响。
DOM是文档对象模型（Document Object Model）的缩写。 是 W3C（万维网联盟）的标准。是一种用于HTML和XML文档的编程接口。它给文档提供了一种结构化的表示方法，可以改变文档的内容和呈现方式。是中立于平台和语言的接口，它允许程序和脚本动态地访问和更新文档的内容、结构和样式。DOM属于浏览器，而不是JavaScript语言规范里的规定的核心内容。
2.2.2定义数据对象
在上述Vue实例中：
data ：定义属性，实例中有2个属性分别为：title、url。
methods ：定义的函数，可以通过 return 来返回函数值。
{{ }} ：输出对象属性和函数返回值。
当一个 Vue 实例被创建时，它向 Vue 的响应式系统中加入了其 data 对象中能找到的所有的属性。当这些属性的值发生改变时，html 视图将也会产生相应的变化。
例如：
<div id="example"> <h1>data : {{num}}</h1> </div> <script> // 数据对象 var data = { num:1, } // 将对象加入到一个 Vue 实例中 var vm = new Vue({ el: '#examplet', data: data }) // 获得这个实例上的 property // 返回源数据中对应的字段 vm.a == data.a // => true // 设置 property 也会影响到原始数据 vm.a = 2 data.a // => 2 </script>
除了数据 property，Vue 实例还暴露了一些有用的实例property 与方法。它们都有前缀 $，以便与用户定义的 property 区分开来。
例如：
<div id="example"> <h1>title : {{title}}</h1> <h1>url : {{url}}</h1> </div> <script> // 数据对象 var data = { title: "一个Vue实例", url: "https://cn.vuejs.org/" } var vm = new Vue({ el: '#examplet', data: data }) document.write(vm.$data === data) // true document.write(vm.$el === document.getElementById('example')) // true </script>
2.3 Vue的生命周期
每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如，需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数，这给了用户在不同阶段添加自己的代码的机会。
下图是一个Vue实例的生命周期：
2.3.1 beforeCreate
在实例初始化之后,进行数据侦听和事件/侦听器的配置之前同步调用。
此时组件的选项对象还未创建，el 和 data 并未初始化，因此无法访问methods， data， computed等上的方法和数据。
2.3.2 created
在实例创建完成后被立即同步调用。
实例已完成对选项的处理，以下内容已被配置完毕：数据侦听、计算属性、方法、事件/侦听器的回调函数。然而，挂载阶段还没开始，且 $el property 目前尚不可用。
在这一步中可以调用methods中的方法，改变data中的数据，并且修改可以通过vue的响应式绑定体现在页面上，获取computed中的计算属性等等，通常我们可以在这里对实例进行预处理。但需要注意的是，这个周期中是没有什么方法来对实例化过程进行拦截的，因此假如有某些数据必须获取才允许进入页面的话，并不适合在这个方法发请求，建议在组件路由钩子beforeRouteEnter中完成
2.3.3 beforeMount
在挂载开始之前被调用：相关的 render 函数首次被调用（虚拟DOM）。
实例已完成以下的配置： 编译模板，把data里面的数据和模板生成html，完成了el和data 初始化，但此时还没有挂在html到页面上。
2.3.4 mounted
实例被挂载后调用，这时 el 被新创建的 vm.$el 替换了。
模板中的HTML渲染到HTML页面中，此时一般可以做一些ajax操作，mounted只会执行一次。
但mounted 不会保证所有的子组件也都被挂载完成。如果希望等到整个视图都渲染完毕再执行某些操作，可以在 mounted 内部使用 vm.$nextTick：
mounted: function () { this.$nextTick(function () { // 仅在整个视图都被渲染之后才会运行的代码 }) } //生命周期钩子的 this 上下文指向调用它的 Vue 实例。
2.3.5 beforeUpdate
在数据发生改变后，DOM 被更新之前被调用。
适合在现有 DOM 将要被更新之前访问它，比如移除手动添加的事件监听器。可以在该钩子中进一步地更改状态，不会触发附加地重渲染过程.
2.3.6 updated
在数据更改导致的虚拟 DOM 重新渲染和更新完毕之后被调用。
当这个钩子被调用时，组件 DOM 已经更新。，所以可以执行依赖于DOM的操作，然后在大多是情况下，应该避免在此期间更改状态，因为这可能会导致更新无限循环。
但updated 不会保证所有的子组件也都被重新渲染完毕。如果希望等到整个视图都渲染完毕，可以在 updated 里使用 vm.$nextTick：
updated: function () { this.$nextTick(function () { // 仅在整个视图都被重新渲染之后才会运行的代码 }) }
2.3.7 beforeDestroy
实例销毁之前调用。在这一步，实例仍然完全可用。
这一步还可以用this来获取实例，一般用来做一些重置的操作，比如清除掉组件中的定时器和监听的dom事件。
2.3.8 destroyed
实例销毁后调用。该钩子被调用后，对应 Vue 实例的所有指令都被解绑，所有的事件监听器被移除，所有的子实例也都被销毁。
参考链接：
https://vuejs.org/v2/guide/instance.html#Instance-Lifecycle-Hooks
https://vuejs.org/v2/guide/instance.html#Lifecycle-Diagram
https://vuejs.org/v2/api/index.html#Options-Lifecycle-Hooks
https://www.jianshu.com/p/672e967e201c
https://blog.csdn.net/haochangdi123/article/details/78358895
2.4 创建一个Vue项目
Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统，提供：
通过 @vue/cli 实现的交互式的项目脚手架。
通过 @vue/cli + @vue/cli-service-global 实现的零配置原型开发。
一个运行时依赖 (@vue/cli-service)，该依赖：
可升级；
基于 webpack 构建，并带有合理的默认配置；
可以通过项目内的配置文件进行配置；
可以通过插件进行扩展。
一个丰富的官方插件集合，集成了前端生态中最好的工具。
一套完全图形化的创建和管理 Vue.js 项目的用户界面。
Vue CLI 致力于将 Vue 生态中的工具基础标准化。它确保了各种构建工具能够基于智能的默认配置即可平稳衔接。与此同时，它也为每个工具提供了调整配置的灵活性，无需 eject
2.4.1 安装vue CLI
Vue CLI 的包名称由 vue-cli 改成了 @vue/cli。 如果已经全局安装了旧版本的 vue-cli (1.x 或 2.x)，需要先通过 npm uninstall vue-cli -g 或 yarn global remove vue-cli 卸载它。
1.安装新的包
npm install -g @vue/cli # 或者 yarn global add @vue/cli
2.检查其版本是否正确
vue --version
3.升级包
npm update -g @vue/cli # 或者 yarn global upgrade --latest @vue/cli
2.4.2 创建Vue项目
（1）通过 vue create创建
vue create hello-world
- 默认配置：包含了基本的 Babel + ESLint 设置。适合快速创建一个新项目的原型。
- 手动选择特性：选取需要的特性。适合面向生产的项目。
# 进入项目具体路径 cd hello-world # 下载依赖 npm install # 启动运行项目 npm run serve # 项目打包 npm run build
（2）使用图形化界面创建
vue ui
打开一个浏览器窗口，并以图形化界面将你引导至项目创建的流程。
（3）使用2.x 模板 (旧版本)创建
# 全局安装一个桥接工具 npm install -g @vue/cli-init # `vue init` 的运行效果将会跟 `vue-cli@2.x` 相同 vue init webpack vue_map_test
# 进入项目具体路径 cd vue_map_test # 下载依赖 npm install # 启动运行项目，默认为8080端口 npm run dev # 项目打包 npm run build
2.4.3 Vue项目目录
├── v-proj | ├── node_modules // 当前项目所有依赖，一般不可以移植给其他电脑环境 | ├── public | | ├── favicon.ico // 标签图标 | | └── index.html // 当前项目唯一的页面 | ├── src | | ├── assets // 静态资源img、css、js | | ├── components // 小组件 | | ├── App.vue // 根组件 | | ├── main.js // 全局脚本文件（项目的入口） | | └── router.js // 路由脚本文件 | ├── README.md └ └── package.json //配置文件,使用npm install安装
2.4.3.1 public
可以理解为入口目录。
（1）favicon.ico
用于作为缩略的网站标志，它显示位于浏览器的地址栏或者在标签上，用于显示网站的logo。
ico图标制作网址：https://www.bitbug.net/
（2）index.html
首页入口文件，可以添加一些 meta 信息或统计代码。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Title</title> </head> <body style="background-color: #fff;"> <div id="app" > </div> </body> </html>
2.4.3.2 src
是整个项目的主文件夹 ，代码大部分都在这里完成。
（1）assets
放置一些资源文件。比如js 、css、image等。
（2）components
放置组件文件。一个vue项目就是由一个个的组件拼装起来的。
例如：
<template> <div class="test"> </div> </template> <script> export default { name: "Test" } </script> <style scoped> </style>
- 有且只有一个根标签
（3）App.vue
是整个项目的入口文件，相当于包裹整个页面的最外层的div。
<template> <div id="app"> <router-view/> </div> </template> <script> export default { name: 'App' components:{ }, } </script> <style> #app { font-family: 'Avenir', Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; color: #2c3e50; } </style>
（4）main.js
是项目的主JS，全局的使用的各种变量、js、插件 都在这里引入 、定义。
import Vue from 'vue' import App from './App.vue' import router from './router' Vue.config.productionTip = false new Vue({ router, render: h => h(App) }).$mount('#app')
（5）router.js
路由脚本文件（配置路由 url链接 与 页面组件的映射关系）
// 导入VueRoute路由组件 import VueRouter from 'vue-router' // 导入各个组件 import homePage from "./components/homePage.vue"; import test from "./components/test.vue"; // 创建路由对象 let routerObj = new VueRouter({ routes: [ {path: '/', component: homePage}, {path: '/test', component: test}, ], }); // 把routerObj对象暴漏出去。main.js导入这个数据 export default routerObj
2.4.3.3 README.md
项目的说明文档，markdown 格式
## Project setup ``` npm install ``` ### Compiles and hot-reloads for development ``` npm run serve ``` ### Compiles and minifies for production ``` npm run build ``` ### Lints and fixes files ``` npm run lint ``` ### Customize configuration See [Configuration Reference](https://cli.vuejs.org/config/).
2.4.3.4 package.json
是整个项目用的到的所有的插件的json的格式，比如插件的名称、版本号。 当在项目里使用npm install 时 node 会自动安装文件里的所有插件。
{ "name": "test", "version": "0.1.0", "private": true, "scripts": { "serve": "vue-cli-service serve", "build": "vue-cli-service build", "lint": "vue-cli-service lint" }, "dependencies": { "core-js": "^3.6.5", "vue": "^3.0.0" }, "devDependencies": { "@vue/cli-plugin-babel": "~4.5.0", "@vue/cli-plugin-eslint": "~4.5.0", "@vue/cli-service": "~4.5.0", "@vue/compiler-sfc": "^3.0.0", "babel-eslint": "^10.1.0", "eslint": "^6.7.2", "eslint-plugin-vue": "^7.0.0" }, "eslintConfig": { "root": true, "env": { "node": true }, "extends": [ "plugin:vue/vue3-essential", "eslint:recommended" ], "parserOptions": { "parser": "babel-eslint" }, "rules": {} }, "browserslist": [ "> 1%", "last 2 versions", "not dead" ] }
参考链接：
https://www.runoob.com/vue3/vue3-directory-structure.html
https://blog.csdn.net/weixin_41887155/article/details/107648969
https://www.cnblogs.com/jhpy/p/11873270.html
https://blog.csdn.net/chao2458/article/details/81284522
三、基于Vue的移动端H5项目
3.1 H5的介绍
第五代HTML标准HTML5，当前前端开发的主流语言H5就是基于HTML5实现，H5的优势有：
具有移动端自适应能力，H5页面会根据不同的手机屏幕尺寸进行适配，以达到不同屏幕的最佳显示效果。H5和普通web页面相比，最大区别是可以与不同大小的移动设备相匹配，兼容不同的浏览器
支持多媒体功能，支持背景音乐，视频播放等多种多媒体功能。
页面素材预加载，为了保证整个页面的播放流畅，H5页面都搭配预加载功能，即用户点击之前就完成了页面的加载，保证阅读流畅性。
支持滑动翻页，每个页面内容单独成页。
**使用滚动侦测特效，**即滑动页面的同时，大量文字或图片会自动加载出来，造成一种动态美感。
随着移动互联网的发展，智能手机、平板等移动终端设备的普及，用户在移动端浏览的时间越来越长，H5页面传播渠道广，流量大，传播效率高，传播成本低的优势，同时H5页面制作搭配页面滑动、简单的文字、动态的图片动画以及妙趣横生的音乐及视频，给浏览者带来深刻的浏览体验。
参考链接：
https://www.zhihu.com/question/438871843
https://www.sohu.com/a/298484000_100273234
https://www.zhihu.com/question/49397123/answer/1537150222
3.2 使用Vue开发H5页面
3.2.1 创建Vue项目
# vue create创建项目 vue create test # 进入项目具体路径 cd test # 下载依赖 npm install # 启动运行项目 npm run serve
3.2.2 自适应布局
移动端的布局相对PC较为简单，关键在于对不同设备的适配。
网易云的方案总结为：根据屏幕大小 / 750 = 所求字体 / 基准字体大小比值相等，动态调节html的font-size大小。
淘宝的方案总结为：根据设备设备像素比设置scale的值，保持视口device-width始终等于设备物理像素，接着根据屏幕大小动态计算根字体大小，具体是将屏幕划分为10等分，每份为a，1rem就等于10a。
这里主要用到两种单位:
vw: viewport width，相对于视口的宽度，1vw为视口宽度的1%，100vw为设备的宽度
rem: 相对于根元素html的字体大小的单位，比如2rem=2倍的根字体大小
rem的基本原理是根据屏幕不同的分辨率,动态修改根字体的大小,让所有的用rem单位的元素跟着屏幕尺寸一起缩放,从而达到自适应的效果。
为了提高开发效率，可以使用px转化为rem的插件。如果使用sublimeText，推荐 rem-unit，如果使用vscode编辑器，推荐 cssrem。
在使用rem单位时需要注意以下几点：
在所有的单位中，font-size推荐使用px，然后结合媒体查询进行重要节点的控制，这样可以满足突出或者弱化某些字体的需求，而非整体调整。
众向的单位可以全部使用px，横向的使用rem，因为移动设备宽度有限，而高度可以无限向下滑动。但这也有特例，比如对于一些活动注册页面，需要在一屏幕内完全显示，没有下拉，这时候所有众向或者横向都应该使用rem作为单位。
参考链接：
https://juejin.cn/post/6844904013322944525
https://segmentfault.com/a/1190000010030848
3.2.3 路由配置
（1）下载vue-router
npm install vue-router
（2）配置router.js
//新建router.js文件 import Vue from 'vue' import Router from 'vue-router' import HelloWorld from "@/components/HelloWorld" Vue.use(Router) export default new Router({ routes: [ { path: "/", component: HelloWorld }, ] })
//main.js中引入router import Vue from 'vue' import App from './App.vue' import router from '../router' Vue.config.productionTip = false new Vue({ router, render: h => h(App), }).$mount('#app')
参考链接：
3.2.4 数据请求
（1）安装axios
npm install axios
（2）封装axios实例
在项目src目录下新建utils文件夹，然后在其中新建 request.js文件，这个文件是主要书写axios的封装过程。
/**** request.js ****/ // 导入axios import axios from 'axios' // 使用element-ui Message做消息提醒 import { Message} from 'element-ui'; //1. 创建新的axios实例， const service = axios.create({ // 公共接口--这里注意后面会讲 baseURL: process.env.BASE_API, // 超时时间 单位是ms，这里设置了3s的超时时间 timeout: 3 * 1000 }) // 2.请求拦截器 service.interceptors.request.use(config => { //发请求前做的一些处理，数据转化，配置请求头，设置token,设置loading等，根据需求去添加 config.data = JSON.stringify(config.data); //数据转化,也可以使用qs转换 config.headers = { 'Content-Type':'application/x-www-form-urlencoded' //配置请求头 } //注意使用token的时候需要引入cookie方法或者用本地localStorage等方法，推荐js-cookie const token = getCookie('名称');//这里取token之前，你肯定需要先拿到token,存一下 if(token){ config.params = {'token':token} //如果要求携带在参数中 config.headers.token= token; //如果要求携带在请求头中 } return config }, error => { Promise.reject(error) }) // 3.响应拦截器 service.interceptors.response.use(response => { //接收到响应数据并成功后的一些共有的处理，关闭loading等 return response }, error => { /***** 接收到异常响应的处理开始 *****/ if (error && error.response) { // 1.公共错误处理 // 2.根据响应码具体处理 switch (error.response.status) { case 400: error.message = '错误请求' break; case 401: error.message = '未授权，请重新登录' break; case 403: error.message = '拒绝访问' break; case 404: error.message = '请求错误,未找到该资源' window.location.href = "/NotFound" break; case 405: error.message = '请求方法未允许' break; case 408: error.message = '请求超时' break; case 500: error.message = '服务器端出错' break; case 501: error.message = '网络未实现' break; case 502: error.message = '网络错误' break; case 503: error.message = '服务不可用' break; case 504: error.message = '网络超时' break; case 505: error.message = 'http版本不支持该请求' break; default: error.message = `连接错误${error.response.status}` } } else { // 超时处理 if (JSON.stringify(error).includes('timeout')) { Message.error('服务器响应超时，请刷新当前页') } error.message = '连接服务器失败' } Message.error(error.message) /***** 处理结束 *****/ //如果不需要错误处理，以上的处理过程都可省略 return Promise.resolve(error.response) }) //4.导入文件 export default service
（3）封装请求
在项目src目录下的utils文件夹中新建 http.js文件，这个文件是主要书写几种请求的封装过程。
/**** http.js ****/ // 导入封装好的axios实例 import request from './request' const http ={ /** * methods: 请求 * @param url 请求地址 * @param params 请求参数 */ get(url,params){ const config = { method: 'get', url:url } if(params) config.params = params return request(config) }, post(url,params){ const config = { method: 'post', url:url } if(params) config.data = params return request(config) }, put(url,params){ const config = { method: 'put', url:url } if(params) config.params = params return request(config) }, delete(url,params){ const config = { method: 'delete', url:url } if(params) config.params = params return request(config) } } //导出 export default http
（4）封装API
在项目src目录下新建api文件夹，然后在其中新建 api.js文件，这个文件是主要书写API的封装过程。
import http from '../utils/http' // /** * @parms resquest 请求地址 例如：http://127.0.0.1:8088/request/... * @param '/testIp'代表vue-cil中config，index.js中配置的代理 */ let resquest = "/testIp/request/" // get请求 export default{ getListAPI(params){ return http.get(`${resquest}/getList.json`,params) }, postFormAPI(params){ return http.post(`${resquest}/postForm.json`,params) } }
（5）使用Axios工具
修改HelloWorld.vue文件
<template> <div>index page</div> </template> <script> import api from '@/api/api' export default { methods: { getList() { api.getListAPI(data).then(res => { //数据处理 }).catch(err => console.log(err)) } } } </script>
3.2.5 UI组件库
UI 设计组件（UI KIT），直译过来就是用户界面成套元件，是界面设计常用控件或元件，「组」是设计元素的组合方式，「件」由不同的元件组成。
组件有如下优势：
保证一致性 Consistency
与现实生活一致：与现实生活的流程、逻辑保持一致，遵循用户习惯的语言和概念；在界面中一致：所有的元素和结构需保持一致，比如：设计样式、图标和文本、元素的位置等。
反馈用户 Feedback
控制反馈：通过界面样式和交互动效让用户可以清晰的感知自己的操作；页面反馈：操作后，通过页面元素的变化清晰地展现当前状态。
提高效率，减少成本 Efficiency
简化流程：设计简洁直观的操作流程；清晰明确：语言表达清晰且表意明确，让用户快速理解进而作出决策；帮助用户识别：界面简单直白，让用户快速识别而非回忆，减少用户记忆负担。
（1）Mint UI
下载地址：http://mint-ui.github.io/ / https://github.com/ElemeFE/mint-ui
是饿了么开源的移动端UI组件库，基于vue.js的移动端UI框架，包含丰富的 CSS 和 JS 组件，能够满足日常的移动端开发需求。
Mint UI 包含丰富的 CSS 和 JS 组件，能够满足日常的移动端开发需要。
可按需加载组件。可以只加载声明过的组件及其样式文件，无需再纠结文件体积过大。
采用 CSS3 处理各种动效，避免浏览器进行不必要重绘和重排，使用户获得流畅顺滑的体验。
Mint UI 做到了轻量化。即使全部引入，压缩后的文件体积也仅有30kb。
（2）Vant
下载地址：https://youzan.github.io/vant/ / https://github.com/youzan/vant
是有赞前端团队基于有赞统一的规范实现的 Vue 组件库，提供了一整套 UI 基础组件和业务组件。
60+ 高质量组件
90% 单元测试覆盖率
完善的中英文文档和示例
支持按需引入
支持主题定制
支持国际化
支持 TS
支持 SSR
)
（3）Cube UI
下载地址：https://didi.github.io/cube-ui/ / https://github.com/didi/cube-ui
滴滴团队开发的基于 Vue.js 实现的精致移动端组件库。支持按需引入和后编译，轻量灵活；扩展性强，可以方便地基于现有组件实现二次开发。
质量可靠：由滴滴内部组件库精简提炼而来，为集成提供保障。
体验极致：以迅速响应、动画流畅、接近原生为目标，在交互体验方面追求极致。
标准规范：遵循统一的设计交互标准，高度还原设计效果。
扩展性强：支持按需引入，轻量灵活；扩展性强，可以方便地实现二次开发。
（4）Muse UI
下载地址：https://muse-ui.org/ / https://github.com/museui/muse-ui
基于 Vue 2.0 优雅的 Material Design UI 组件库，基本实现 Material Design 设计规范类的所有组件，另外还开发许多新的功能特性。
组件丰富：拥有40多个UI 组件，用于适应不同业务环境。
可定制化：自定义主题方式极为优雅，仅需少量代码即可完成主题样式替换。
基于vue2.x：Muse UI 基于 Vue2.0 开发，小巧，api友好，可用于开发的复杂单页应用。
（5）NutUI
下载地址：http://nutui.jd.com/ / https://github.com/jdf2e/nutui
京东自研的轻量级移动端Vue组件库，有近50多个组件。开发和服务于移动Web界面的企业级前中后台产品。
50+ 高质量组件
40+ 京东移动端项目正在使用
基于京东APP 7.0 视觉规范
支持按需加载详尽的文档和示例
支持定制主题支持多语言（国际化）
支持 TypeScript
支持服务端渲染（Vue SSR）
单元测试加持
配套有基于Webpack的构建工具，可快速创建已内置本组件库的Vue工程
贴一个创建vue项目的过程：
D:\vue>cd VueDemo D:\vue\VueDemo>cnpm install √ Installed 37 packages √ Linked 801 latest versions [1/3] scripts.postinstall webpack-bundle-analyzer@2.13.1 › ejs@^2.5.7 run "node ./postinstall.js", root: "D:\\vue\\VueDemo\\node_modules\\_ejs@2.7.4@ejs" Thank you for installing EJS: built with the Jake JavaScript build tool (https://jakejs.com/) [1/3] scripts.postinstall webpack-bundle-analyzer@2.13.1 › ejs@^2.5.7 finished in 99ms [2/3] scripts.postinstall webpack@3.12.0 › uglifyjs-webpack-plugin@^0.4.6 run "node lib/post_install.js", root: "D:\\vue\\VueDemo\\node_modules\\_uglifyjs-webpack-plugin@0.4.6@uglifyjs-webpack-plugin" [2/3] scripts.postinstall webpack@3.12.0 › uglifyjs-webpack-plugin@^0.4.6 finished in 90ms [3/3] scripts.postinstall babel-core@6.26.3 › babel-register@6.26.0 › core-js@^2.5.0 run "node -e \"try{require('./postinstall')}catch(e){}\"", root: "D:\\vue\\VueDemo\\node_modules\\_core-js@2.6.12@core-js" Thank you for using core-js ( https://github.com/zloirock/core-js ) for polyfilling JavaScript standard library! The project needs your help! Please consider supporting of core-js on Open Collective or Patreon: > https://opencollective.com/core-js > https://www.patreon.com/zloirock Also, the author of core-js ( https://github.com/zloirock ) is looking for a good job -) [3/3] scripts.postinstall babel-core@6.26.3 › babel-register@6.26.0 › core-js@^2.5.0 finished in 95ms √ Run 3 scripts deprecate extract-text-webpack-plugin@^3.0.0 Deprecated. Please use https://github.com/webpack-contrib/mini-css-extract-plugin deprecate html-webpack-plugin@^2.30.1 out of support deprecate autoprefixer@7.2.6 › browserslist@^2.11.3 Browserslist 2 could fail on reading Browserslist >3.0 config used in other tools. deprecate uglifyjs-webpack-plugin@1.3.0 › uglify-es@^3.3.4 support for ECMAScript is superseded by `uglify-js` as of v3.13.0 deprecate webpack-dev-server@2.11.5 › chokidar@^2.1.2 Chokidar 2 will break on node v14+. Upgrade to chokidar 3 with 15x less dependencies. deprecate vue-loader@13.7.3 › postcss-selector-parser@2.2.3 › flatten@^1.0.2 flatten is deprecated in favor of utility frameworks such as lodash. deprecate css-loader@0.28.11 › cssnano@3.10.0 › postcss-merge-rules@2.1.2 › browserslist@^1.5.2 Browserslist 2 could fail on reading Browserslist >3.0 config used in other tools. deprecate webpack-bundle-analyzer@2.13.1 › bfj-node4@^5.2.0 Switch to the `bfj` package for fixes and new features! deprecate webpack-dev-server@2.11.5 › sockjs@0.3.19 › uuid@^3.0.1 Please upgrade to version 7 or higher. Older versions may use Math.random() in certain circumstances, which is known to be problematic. See https://v8.dev/blog/math-random for details. deprecate webpack-dev-server@2.11.5 › chokidar@2.1.8 › braces@2.3.2 › snapdragon@0.8.2 › source-map-resolve@0.5.3 › urix@^0.1.0 Please see https://github.com/lydell/urix#deprecated deprecate css-loader@0.28.11 › cssnano@3.10.0 › postcss-svgo@2.1.6 › svgo@^0.7.0 This SVGO version is no longer supported. Upgrade to v2.x.x. deprecate webpack-dev-server@2.11.5 › chokidar@2.1.8 › braces@2.3.2 › snapdragon@0.8.2 › source-map-resolve@0.5.3 › resolve-url@^0.2.1 https://github.com/lydell/resolve-url#deprecated deprecate optimize-css-assets-webpack-plugin@3.2.1 › cssnano@4.1.11 › cssnano-preset-default@4.0.8 › postcss-svgo@4.0.3 › svgo@^1.0.0 This SVGO version is no longer supported. Upgrade to v2.x.x. deprecate webpack@3.12.0 › node-libs-browser@2.2.1 › url@0.11.0 › querystring@0.2.0 The querystring API is considered Legacy. new code should use the URLSearchParams API instead. deprecate babel-core@6.26.3 › babel-register@6.26.0 › core-js@^2.5.0 core-js@<3.3 is no longer maintained and not recommended for usage due to the number of issues. Because of the V8 engine whims, feature detection in old core-js versions could cause a slowdown up to 100x even if nothing is polyfilled. Please, upgrade your dependencies to the actual version of core-js. Recently updated (since 2021-12-16): 6 packages (detail see file D:\vue\VueDemo\node_modules\.recently_updates.txt) Today: → babel-preset-env@1.7.0 › browserslist@3.2.8 › electron-to-chromium@^1.3.47(1.4.27) (03:02:33) √ All packages installed (950 packages installed from npm registry, used 43s(network 43s), speed 511.23KB/s, json 802(2.58MB), tarball 18.75MB) D:\vue\VueDemo>cnpm run dev > my_vue_demo@1.0.0 dev D:\vue\VueDemo > webpack-dev-server --inline --progress --config build/webpack.dev.conf.js (node:13900) [DEP0111] DeprecationWarning: Access to process.binding('http_parser') is deprecated. (Use `node --trace-deprecation ...` to show where the warning was created) 13% building modules 33/37 modules 4 active ...VueDemo\src\components\HelloWorld.vue{ parser: "babylon" } is deprecated; we now treat it as { parser: "babel" }. 95% emitting DONE Compiled successfully in 2547ms 下午5:02:58 I Your application is running here: http://localhost:8080
