溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務條款》

Vue項目引進ElementUI組件的方法

發(fā)布時間：2020-08-27 16:20:45 來源：腳本之家 閱讀：196 作者：夜有期 欄目：web開發(fā)

環(huán)境要求

Nodejs

Nodejs

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

打開cmd命令行，輸入npm -v，如果出現(xiàn)如下圖的顯示，說明已經安裝正確。

Vue項目引進ElementUI組件的方法

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

npm install npm -g

安裝 webpack

安裝webpack

npm install webpack -g

-g 表示安裝為全局

Vue項目引進ElementUI組件的方法

安裝 vue-cli

安裝 vue 腳手架項目初始化工具 vue-cli

npm install vue-cli -g

Vue項目引進ElementUI組件的方法

淘寶鏡像

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

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

Vue項目引進ElementUI組件的方法

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

cnpm install webpack -g .

創(chuàng)建Vue項目

vue init webpack +項目名稱

Vue項目引進ElementUI組件的方法

運行vue

npm run dev

Vue項目引進ElementUI組件的方法

訪問localhost:8080

Vue項目引進ElementUI組件的方法

引入ElementUI

打開項目 src\main.js 添加

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

Vue項目引進ElementUI組件的方法

package.json文件中添加

"element-ui": "^2.4.9"

Vue項目引進ElementUI組件的方法

重新npm install

Vue項目引進ElementUI組件的方法

測試是否安裝完成

在App.vue中隨意添加elementUI標簽 如：

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

Vue項目引進ElementUI組件的方法

保存后，打開網頁顯示出input即成功

Vue項目引進ElementUI組件的方法

總結

以上所述是小編給大家介紹的Vue項目引進ElementUI組件的方法，希望對大家有所幫助，如果大家有任何疑問歡迎給我留言，小編會及時回復大家的！

向AI問一下細節(jié)

免責聲明：本站發(fā)布的內容（圖片、視頻和文字）以原創(chuàng)、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關證據(jù)，一經查實，將立刻刪除涉嫌侵權內容。

AI
助
手