nuxt中全局引入element-ui

介紹

對於一個前端小白來講，使用一套已有的框架做爲基礎，能夠達到事半功倍的效果，在這裏咱們選擇Element。Element，一套爲開發者、設計師和產品經理準備的基於 Vue 2.0 的桌面端組件庫（官方文檔中的敘述），下面咱們將開始在以前搭建好的nuxt項目中引入element-ui。

準備

1.首先用webstorm工具打開以前建好的nuxt項目，按住Alt+F12快捷鍵，打開Terminal終端，輸入npm run dev啓動項目，記住必須在當前項目的路徑下。

2.打開Element的中文官方網站，點擊右上角組件按鈕，正式進入組件庫 ，Element中文官方文檔網址：http://element.eleme.io/#/zh-CN

3.在組件庫裏任意選擇一段代碼複製到項目中pages文件夾下index.vue的頁面中

<!-- element-ui中按鈕樣式 -->

<el-button type="danger">危險按鈕</el-button> element-ui中按鈕樣式

4.按住ctrl+s保存修改，即頁面自動顯示剛修改內容，無需從新啓動項目，能夠看到此時的頁面只顯示「危險按鈕「這幾個字，並無顯示任何樣式，這是由於咱們尚未在項目中引入element-ui這個組件庫

引入

1.首先在package.json添加element-ui依賴

"element-ui": "^2.0.11"

2.添加依賴完成以後，光標定位在terminal處，按住ctrl+c快捷鍵，輸入y，中止當前啓動項目，從新進行npm install，下載依賴包，下載完成以後，查看文件夾node_modules，發現下面多了element_ui的依賴包

3.在plugins文件夾下，添加ElementUI.js文件，內容以下所示

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

4.在nuxt.config.js中添加配置

plugins: [{
  src: '~plugins/ElementUI',
  ssr: true,
}],
css: [
  'element-ui/lib/theme-chalk/index.css'
],

vendor:['element-ui']   //防止element-ui被打包屢次

5.使用npm run dev從新啓動項目，此時訪問http://localhost:3000，發現頁面上已經顯示了element的組件樣式。

 

---

 說明：本文爲原創做品，如有參考會在文中說起，若有遺漏，涉及侵權，請聯繫本人，將當即修正。