本教程相关信息
- 系统：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 变量”；
官方提供的示例要求中，$--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”文件，保存运行项目
此时我们看到，修改的样式已经生效，到此自定义主题样式修改成功！
相信通过本教程，你可以轻松实现自定义主题呦(^_−)☆
