第一步：按照官方文檔使用npm安裝element-ui，并完整引入Element-ui
npm i element-ui -S
?main.js中所有的內(nèi)容刪去，改為
import Vue from 'vue';
import ElementUI from 'element-ui';
import App from './App.vue';
import 'element-ui/lib/theme-chalk/index.css'; //這是默認的主題index.css文件
Vue.use(ElementUI);
new Vue({
el: '#app',
render: h => h(App)
});隨便寫點東西，run一下
<template>
<div class="hello">
<el-row>
<el-col :offset="8" :span="8">
<el-tabs v-model="activeName">
<el-tab-pane label="不喜歡藍色" name="first"></el-tab-pane>
<el-tab-pane label="不喜歡默認" name="second"></el-tab-pane>
<el-tab-pane label="我喜歡粉色" name="third"></el-tab-pane>
<el-tab-pane label="我要換粉色" name="fourth"></el-tab-pane>
</el-tabs>
<el-button>咋辦</el-button>
</el-col>
</el-row>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
data () {
return {
activeName: 'first'
}
}
}
</script>
成功引入element-ui，但是不喜歡默認的藍色，看起來很爛大街，想換掉。
第二步：由于不喜歡默認的藍色主題，可以使用在線主題生成工具生成一套新的主題顏色（element-ui官方的在線主題生成工具），然后“下載主題”，可以得到一個壓縮包，然后將其解壓，得到
?然后把這個文件夾，拖入src/assets/下
?
?再把main.js改成
import Vue from 'vue';
import ElementUI from 'element-ui';
import App from './App.vue';
//刪去import 'element-ui/lib/theme-chalk/index.css'; 然后加入下面這句
import './assets/element-#EE4866/index.css'; //引入你拖進來的新文件夾內(nèi)的index.css文件
Vue.use(ElementUI);
new Vue({
el: '#app',
render: h => h(App)
});然后再跑一次
結(jié)果：文章來源：http://www.zghlxwxcb.cn/news/detail-623892.html
文章來源地址http://www.zghlxwxcb.cn/news/detail-623892.html
到了這里，關(guān)于Vue2使用element-ui引入自定義主題的方法（使用在線主題生成工具）的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
