1. 程式人生 > >Vue專案引進ElementUI元件

Vue專案引進ElementUI元件

環境要求 

Nodejs

Nodejs     

開啟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即成功