Nuxt使用element-ui

廢話很少說，在Nuxt中引入Nuxt其實很簡單，分下面幾步

 

1、安裝element-ui依賴

　　打開nuxt項目之後，在Terminal中經過 npm i element-ui -S 便可安裝element-ui依賴

 

 

2、添加element-ui.js文件

　　在nuxt項目的plugins目錄下新建element-ui目錄，而後在element-ui目錄下新建一個element-ui.js文件，內容以下所示

import Vue from 'vue'
import ElementUI from 'element-ui'
Vue.use(ElementUI)

 

 

 

 

3、在nuxt.config.js中進行配置，以下圖所示

 

4、輸入npm install 進行安裝依賴文件

 

5、在頁面中引入element-ui的組件，進行測試

 

6、npm run dev運行項目，觀察是否有效果

 

 

這樣引入的主題是element-ui默認的樣式，咱們能夠根據本身的實際需求進行修改

 

Element 的 theme-chalk 使用 SCSS 編寫，若是你的項目也使用了 SCSS，那麼能夠直接在項目中改變 Element 的樣式變量。

 

1、在element-ui目錄下新建一個樣式文件 element-variables.scss，寫入如下內容：

 

 須要注意的是，覆蓋字體路徑變量是必需的，將其賦值爲 Element 中 icon 圖標所在的相對路徑便可。

 

2、在項目的入口文件element-ui.js中，直接引入以上樣式文件便可

 

 

 還有一種方式是經過命令行主題工具，這裏不作說明，請自行到element-ui官網進行學習 http://element-cn.eleme.io/#/zh-CN/component/custom-theme

 

 

嗯，就醬~