廢話不多說,在Nuxt中引入Nuxt其實很簡單,分下面幾步
一、安裝element-ui依賴
打開nuxt項目以后,在Terminal中通過 npm i element-ui -S 即可安裝element-ui依賴
二、添加element-ui.js文件
在nuxt項目的plugins目錄下新建element-ui目錄,然后在element-ui目錄下新建一個element-ui.js文件,內容如下所示
import Vue from 'vue'
import ElementUI from 'element-ui'
Vue.use(ElementUI)
三、在nuxt.config.js中進行配置,如下圖所示
四、輸入npm install 進行安裝依賴文件
五、在頁面中引入element-ui的組件,進行測試
六、npm run dev運行項目,觀察是否有效果
這樣引入的主題是element-ui默認的樣式,我們可以根據自己的實際需求進行修改
Element 的 theme-chalk 使用 SCSS 編寫,如果你的項目也使用了 SCSS,那么可以直接在項目中改變 Element 的樣式變量。
一、在element-ui目錄下新建一個樣式文件 element-variables.scss
,寫入以下內容:
需要注意的是,覆蓋字體路徑變量是必需的,將其賦值為 Element 中 icon 圖標所在的相對路徑即可。
二、在項目的入口文件element-ui.js中,直接引入以上樣式文件即可
還有一種方式是通過命令行主題工具,這里不做說明,請自行到element-ui官網進行學習 http://element-cn.eleme.io/#/zh-CN/component/custom-theme
嗯,就醬~