VUE学习：五.UI 框架

sadwind2024-02-29笔记79

前言

如果你想快速开发一款应用，并且不想过多的操心页面 UI 的内容，比如你不想去实现一个下拉 UI 组件或设计一个 icon 图标，那么我们可以使用现有的别人做好的 UI 库和图标库实现快速开发。

UI 库是脱离 JS 框架外的一种 “工具”，相比 JS 框架可以帮助你实现各种业务逻辑，其更关注于页面 UI 层面的实现，比如提供和业务无关的弹窗、导航、表单组件等，为项目 UI 层面的功能提供解决方案。

#1.PC 端

Element UI，适用于 Vue 2.x参考文档(opens new window)

#1.1 主题设置

#1.2 全局配置

Vue.use(Element, { size: "small", zIndex: 3000 });

#1.3 全局文案

Vue.locale("zh-cn", { ...local, aaa: "国际化字段" });

#1.4 组件的二次封装(opens new window)

一些功能点：

button 防抖
table+page 封装在一起
form 表单封装

npm地址(opens new window)

#2.移动端

Vux 是一款是基于 WeUI (opens new window)和 Vue(2.x) 开发的移动端 UI 组件库，主要服务于微信页面。

#2.1 Vux 的安装和配置

安装WeUI (opens new window)和vux-loader(opens new window)

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>