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的組件樣式。

 

---

 說明：本文為原創作品，若有參考會在文中提及，如有遺漏，涉及侵權，請聯系本人，將立即修正。