vue脚手架中安装element-ui和修改其主题颜色

安装(全局):

1、安装  cnpm i element-ui -S         -S表示  --save

2、引入element UI的css 和 插件

        import ElementUI from 'element-ui';
        import 'element-ui/lib/theme-chalk/index.css';
        Vue.use(ElementUI);

3、*webpack.config.js  配置file_loader

{
            test: /\.(eot|svg|ttf|woff|woff2)(\?\S*)?$/,
            loader: 'file-loader'
              }

4、仔细看文档直接试用即可

更换主题颜色:

https://blog.csdn.net/young_Emily/article/details/78591261这篇博客不错

第一种:(因为刚好项目的就是scss开发,直接使用官网的方法)
1、新建一个文件element-variables.scss
2、/* 改变主题色变量 */
$--color-primary: teal;

/* 改变 icon 字体路径变量,必需 */
$--font-path: '~element-ui/lib/theme-chalk/fonts';

@import "~element-ui/packages/theme-chalk/src/index";
3、import './element-variables.scss'即可使用

第二种:(项目没有使用 SCSS)
1、首先安装主题工具
npm i element-theme -g
2、然后安装chalk主题
npm i element-theme-chalk -D
3、初始化变量
et -i [可以自定义变量文件,默认为element-variables.scss]
4、就会成成一个element-variables.scss文件
5、直接在文件里面设置即可$--color-primary: red(要设置的颜色值);
6、编译主题  et  一下

-----------------------------------------------------

其实说白了是按照官网步骤来即可

你可能感兴趣的:(vue从安装到开发)