本教程相關(guān)信息
- 系統(tǒng)：win10
- IDE: VScode
- node：v8.11.1
- vue-cli：v3.5.1
- element-ui: v2.6.3
注：此教程是小白教程，大神可回避阶冈，有寫的不對(duì)的地方可留言蘑斧，我會(huì)馬上研究改正汛蝙，如果對(duì)你有幫助故俐，也可留言點(diǎn)贊噢~胁澳！
已安裝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版本安裝命令行有區(qū)別于2.0）
npm install -g @vue/cli
安裝好后檢查版本
vue --version
3砾莱、創(chuàng)建項(xiàng)目
vue create hello-world
進(jìn)入項(xiàng)目運(yùn)行
npm run serve
安裝Element-UI
npm i element-ui -S
進(jìn)入package.json查看版本腊瑟，"element-ui": "^2.6.3"
官方目前提供了三種方式自定義主題聚假，本教程采用第二種“在項(xiàng)目中改變 SCSS 變量”；
官方提供的示例要求中膘格，$--font-path是必須的，最好別刪财松，@import的原有index這行最好也不要?jiǎng)h瘪贱；我們這里可以通過參考“element-ui/packages/theme-chalk/src/common/var.scss”文件中的變量逛尚，對(duì)element-ui原有主題進(jìn)行修改掸犬；下面我們來測試下：
-
引入element-ui和原有樣式表
-
例子：添加select組件，并運(yùn)行項(xiàng)目查看此時(shí)我們能看出element-ui的“.el-input__inner”類名原有樣式高度為40px咱枉，我們現(xiàn)在來自定義改變它舶掖，回到“element-variables.scss”文件喷户，如圖修改（變量名可通過var.scss查找）
-
回到main.js，刪掉原引入的樣式文件访锻，再引入“element-variables.scss”文件褪尝，保存運(yùn)行項(xiàng)目
此時(shí)我們看到，修改的樣式已經(jīng)生效期犬，到此自定義主題樣式修改成功河哑！
相信通過本教程，你可以輕松實(shí)現(xiàn)自定義主題呦(^_?)☆
