Vue專案引進ElementUI元件的方法

摘要： 環境要求 Nodejs Nodejs 官網下載地址：http://nodejs.cn/download/ 具體安裝參考其他資料 開啟cmd命令列，輸入npm -v，如果出現如下圖的顯示，說明已經安裝正確。 如果安裝版本比較老，想升級新版本 np...

環境要求

Nodejs

Nodejs

官網下載地址：http://nodejs.cn/download/ 具體安裝參考其他資料

開啟cmd命令列，輸入npm -v，如果出現如下圖的顯示，說明已經安裝正確。

如果安裝版本比較老，想升級新版本

npm install npm -g

安裝 webpack

安裝webpack

npm install webpack -g

-g 表示安裝為全域性

安裝 vue-cli

安裝 vue 腳手架專案初始化工具 vue-cli

npm install vue-cli -g

淘寶映象

npm使用的國外中央倉庫，下載速度較慢，有的時候還會有部分檔案被牆掉。

npm install -g cnpm --registry=https://registry.npm.taobao.org

建議使用淘寶映象，安裝完淘寶映象以後可以使用 cnpm 代替 npm。例如webpack可使用如下命令：

cnpm install webpack -g .

建立Vue專案

vue init webpack +專案名稱

執行vue

npm run dev

訪問localhost:8080

引入ElementUI

開啟專案 src\main.js 新增

import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI)

package.json檔案中新增

"element-ui": "^2.4.9"

重新npm install

測試是否安裝完成

在App.vue中隨意新增elementUI標籤 如：

<el-input v-model="input" placeholder="請輸入內容"></el-input>
data() {
return {
input: ''
}
}

儲存後，開啟網頁顯示出input即成功

最後

為了幫助大家讓學習變得輕鬆、高效，給大家免費分享一大批資料，幫助大家在成為全棧工程師，乃至架構師的路上披荊斬棘。在這裡給大家推薦一個前端全棧學習交流圈： 866109386 .歡迎大家進群交流討論，學習交流，共同進步。

當真正開始學習的時候難免不知道從哪入手，導致效率低下影響繼續學習的信心。

但最重要的是不知道哪些技術需要重點掌握，學習時頻繁踩坑，最終浪費大量時間，所以有有效資源還是很有必要的。

最後祝福所有遇到瓶疾且不知道怎麼辦的前端程式設計師們，祝福大家在往後的工作與面試中一切順利。