配置（UI 框架）

前言

如果你想快速开发一款应用，并且不想过多的操心页面 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 --save
  yarn add vux-loader --dev # 或者 npm install vux-loader --save-dev
  

• 配置（vue-cli2.x）

  /* build/webpack.base.conf.js */
  const vuxLoader = require("vux-loader");
  const webpackConfig = originalConfig; // 原来的 module.exports 代码赋值给变量 webpackConfig
  module.exports = vuxLoader.merge(webpackConfig, {
    plugins: ["vux-ui"],
  });
  

• 配置（vue-cli3.x）

  /* vue.config.js */
  const vuxLoader = require('vux-loader')
  module.exports = {
      ...
      configureWebpack: config => {
          vuxLoader.merge(config, {
              plugins: ['vux-ui']
          })
      },
      ...
  }
  

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>
  

总结

了解 vue 项目创建过程以及其目录结构，在开发中需要注意的地方，能够更好地规范前端开发