vue-cli3.0+elementui之自定义主题

本教程相关信息

• 系统：win10
• IDE: VScode
• node：v8.11.1
• vue-cli：v3.5.1
• element-ui: v2.6.3

注：此教程是小白教程，大神可回避，有写的不对的地方可留言，我会马上研究改正，如果对你有帮助，也可留言点赞噢~！
已安装vu-cli3.0可跳过此步骤；

安装vue-cli3.0

1、检查node版本

官方要求：Vue CLI 需要 Node.js 8.9 或更高版本 (推荐 8.11.0+)

2、安装Vue CLI3.0

此处我们先全局安装vue-cli3.0，输入命令行（注：3.0版本安装命令行有区别于2.0）

npm install -g @vue/cli

安装好后检查版本

vue --version

3、创建项目

vue create hello-world

这里需要注意的是项目名称不能包含大写，否则会出现提示

安装好后，目录结果如图：

进入项目运行

npm run serve

出现此图代表已成功运行

安装Element-UI

npm i element-ui -S

进入package.json查看版本，"element-ui": "^2.6.3"
官方目前提供了三种方式自定义主题，本教程采用第二种“在项目中改变 SCSS 变量”；

在任意地方新建文件“element-variables.scss”，本教程按我个人习惯放在如图所示的地方

官方提供的示例要求中，$--font-path是必须的，最好别删，@import的原有index这行最好也不要删；我们这里可以通过参考“element-ui/packages/theme-chalk/src/common/var.scss”文件中的变量，对element-ui原有主题进行修改；下面我们来测试下：

• 引入element-ui和原有样式表

• 例子：添加select组件，并运行项目查看
  此时我们能看出element-ui的“.el-input__inner”类名原有样式高度为40px，我们现在来自定义改变它，回到“element-variables.scss”文件，如图修改（变量名可通过var.scss查找）

• 回到main.js，删掉原引入的样式文件，再引入“element-variables.scss”文件，保存运行项目
  
  

  此时我们看到，修改的样式已经生效，到此自定义主题样式修改成功！
  相信通过本教程，你可以轻松实现自定义主题呦(^_−)☆