VUE学习：五.UI 框架
前言
如果你想快速开发一款应用，并且不想过多的操心页面 UI 的内容，比如你不想去实现一个下拉 UI 组件或设计一个 icon 图标，那么我们可以使用现有的别人做好的 UI 库和图标库实现快速开发。
UI 库是脱离 JS 框架外的一种 “工具”，相比 JS 框架可以帮助你实现各种业务逻辑，其更关注于页面 UI 层面的实现，比如提供和业务无关的弹窗、导航、表单组件等，为项目 UI 层面的功能提供解决方案。
#1.PC 端
Element UI，适用于 Vue 2.x参考文档
#1.1 主题设置
#1.2 全局配置
Vue.use(Element, { size: "small", zIndex: 3000 });1
#1.3 全局文案
Vue.locale("zh-cn", { ...local, aaa: "国际化字段" });1
#1.4 组件的二次封装
一些功能点：
button 防抖
table+page 封装在一起
form 表单封装
#2.移动端
Vux 是一款是基于 WeUI 和 Vue(2.x) 开发的移动端 UI 组件库，主要服务于微信页面。
#2.1 Vux 的安装和配置
安装WeUI 和vux-loader
yarn add vux # 或者 npm install vux --saveyarn add vux-loader --dev # 或者 npm install vux-loader --save-dev
1
2配置（vue-cli2.x）
/* build/webpack.base.conf.js */const vuxLoader = require("vux-loader");const webpackConfig = originalConfig; // 原来的 module.exports 代码赋值给变量 webpackConfigmodule.exports = vuxLoader.merge(webpackConfig, { plugins: ["vux-ui"],});1
2
3
4
5
6配置（vue-cli3.x）
/* vue.config.js */const vuxLoader = require('vux-loader')module.exports = { ... configureWebpack: config => { vuxLoader.merge(config, { plugins: ['vux-ui'] }) }, ...}1
2
3
4
5
6
7
8
9
10
11
#2.2 Vux 的使用
添加一个底部导航
<!-- App.vue --><template> <div id="app"> <router-view /> <tabbar> <tabbar-item :link="{ name: 'demo' }"> <span slot="label">Demo</span> </tabbar-item> <tabbar-item :link="{ name: 'laboratory' }"> <span slot="label">实验室</span> </tabbar-item> <tabbar-item :link="{ name: 'about' }"> <span slot="label">关于</span> </tabbar-item> </tabbar> </div></template><script>import { Tabbar, TabbarItem } from "vux";export default { components: { Tabbar, TabbarItem, },};</script><style lang="less">@import "~vux/src/styles/reset.less";</style>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
总结
了解 vue 项目创建过程以及其目录结构，在开发中需要注意的地方，能够更好地规范前端开发
