xug-v2-ui

xug-v2-ui

基于vue2.x的移动端UI框架，支持按需加载和自定义主题色。

1 安装依赖

cnpm install

推荐使用淘宝 npm 镜像源

2 初始化组件库

本方案可以定制化组件库前缀, 只需执行完脚本后，输入库名前缀即可，如 xu

npm run init

组件库初始化后，会在 src/config/prefix.js 生成组件库前缀，并引入至组件vue和对应less文件。

3 新建组件

npm run add

4 更新组件库名称

npm run fix

执行完脚本即可全面修改库名前缀，需注意组件库引用iconfont的icon名称也可能被全局替换，需还原成对应iconfont正确名称

5 使用组件库

npm install xug-v2-ui --save

• 全量导入

# main.js内

import UI from 'xug-v2-ui'
import 'xug-v2-ui/dist/xu-ui.css // 如要自定义主题色，则删除此行
import 'xug-v2-ui/dist/xu-ui-flexible.js'
Vue.use(UI)

• 按需导入

1. 安装依赖:

npm install babel-plugin-import -save-dev

2. 修改babel配置:

# babel.config.js

function insertStr(str, index, newStr){
  return str.slice(0, index) + newStr + str.slice(index)
}

module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset'
  ],
  "plugins": [
    [
      "import",
      {
        "libraryName": "xug-v2-ui",
        "libraryDirectory": "dist/lib",
        "style": (name) => {
          return insertStr(name, name.indexOf('/lib/') + 5, 'theme-chalk/') + '.less'
        }
      }
    ]
  ]
}

3. 引入基础样式和布局js

# main.js

import 'xug-v2-ui/dist/lib/style/index.css';
import 'xug-v2-ui/dist/xu-ui-flexible.js';

6 自定义主题色

xug-v2-ui采用柔和的浅蓝色为主题色，项目中可以根据实际应用场景合理配色，按照以下方法可以轻松覆盖组件库less变量：

6.1 vue-cli3.0

1. 安装依赖

cnpm i style-resources-loader -D

# 若运行报错，可能需要安装此依赖
cnpm i vue-cli-plugin-style-resources-loader -D

2. 新建项目全局less变量文件

# 如：/src/assets/css/variables.less

@btn-primary-bg: red;

3. 修改 vue.config.js 配置less全局变量

• 按需导入方式

# vue.config.js
pluginOptions: {
  "style-resources-loader": {
    preProcessor: "less",
    patterns: [
      path.resolve(__dirname, "./node_modules/xug-v2-ui/dist/lib/theme-chalk/variables.less"), // 固定
      path.resolve(__dirname, "./src/assets/css/variables.less"), // 变量文件位置
    ],
  },
}

• 全量导入方式

1. 去除main.js内引入的css文件

# main.js内 删除 import 'xug-v2-ui/dist/xu-ui.css

# vue.config.js
pluginOptions: {
  "style-resources-loader": {
    preProcessor: "less",
    patterns: [
      path.resolve(__dirname, "./node_modules/xug-v2-ui/dist/lib/theme-chalk/index.less"), // 固定
      path.resolve(__dirname, "./src/assets/css/variables.less"), // 变量文件位置
    ],
  },
}