vue-cli3 配置及iview定制主题

vue-cli3 配置及iview定制主题

官网

• vue.config.js配置

module.exports = {
    
    
  css: {
    
    
    loaderOptions: {
    
    
      less: {
    
    
        javascriptEnabled: true
      }
    }
  },
}

1. 变量覆盖方式

• 首先在项目根目录中创建my-theme目录，然后在my-theme下创建index.less，并写入下面内容：

@import '~view-design/src/styles/index.less';

@primary-color: #8c0776;

完整变量列表

• 然后在main.js引入

import Vue from 'vue';
import ViewUI from 'view-design';
import '../my-theme/index.less';

Vue.use(ViewUI);

此时需要安装less 和 lee-loader

less版本不能高于2.7.3

less-loader版本不能高于5.0.0

2. 通过安装工具修改

• 首先需要安装主题生成工具，从 npm 全局或在项目中局部安装，以全局安装为例：

npm install iview-theme -g

• 然后在业务工程里新建一个目录，用来存放主题文件，使用下面的命令初始化主题，这时会从 iView 仓库拉取最新的样式文件：

iview-theme init my-theme

• 如需拉取指定版本号的 iView，使用下面的命令。（实际运行下面命令时，需将 xxx 替换成项目所使用的 iView 版本，如 “ v2.14.3 ”）

iview-theme init my-theme xxx

• 最后编辑 my-theme/custom.less 文件，用命令编译即可：

编译命令需要nodejs 11.15.0版本及一下，高版本会报错

cd my-theme
iview-theme build -o dist/

• 最终会在指定的目录下编译为 iview.css 的文件，只需在main.js引用它就可以了

import Vue from 'vue';
import ViewUI from 'view-design';
import '../my-theme/dist/iview.css';

Vue.use(ViewUI);