Nuxt使用element-ui


廢話不多說,在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

 

 

嗯,就醬~

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM