准备工作
初始化一个vue项目
vue init webpack element-theme
npm install
npm run dev
安装并引入element
npm install element-ui --save
main.js
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);
主题生成工具安装
全局安装
npm install element-theme -g
安装chalk主题
npm
npm install element-theme-chalk -D
GitHub
npm install https://github.com/ElementUI/theme-chalk -D
初始化变量文件
执行-i初始化变量文件,默认输出到element-variables.scss
et -i [自定义变量文件]
> ✔ Generator variables file
执行后会有一个scss配置文件element-variables.scss,内部包含了主题所用到的所有变量
修改变量
直接编辑 element-variables.scss 文件,例如修改主题为想要的颜色。
$--color-primary: #34a853 !default;
编译主题
et
> ✔ build theme font
> ✔ build element theme
引入主题文件
import '../theme/index.css'
网友评论