Vue項(xiàng)目引進(jìn)ElementUI組件的方法
環(huán)境要求
Nodejs
Nodejs
官網(wǎng)下載地址：http://nodejs.cn/download/具體安裝參考其他資料
打開cmd命令行，輸入npm -v，如果出現(xiàn)如下圖的顯示，說明已經(jīng)安裝正確。
如果安裝版本比較老，想升級新版本
npm install npm -g
安裝 webpack
安裝webpack
npm install webpack -g
-g 表示安裝為全局
安裝 vue-cli
安裝 vue 腳手架項(xiàng)目初始化工具 vue-cli
npm install vue-cli -g
淘寶鏡像
npm使用的國外中央倉庫，下載速度較慢，有的時(shí)候還會(huì)有部分文件被墻掉。
npm install -g cnpm --registry=https://registry.npm.taobao.org
建議使用淘寶鏡像，安裝完淘寶鏡像以后可以使用 cnpm 代替 npm。例如webpack可使用如下命令：
cnpm install webpack -g .
創(chuàng)建Vue項(xiàng)目
vue init webpack +項(xiàng)目名稱
運(yùn)行vue
npm run dev
訪問localhost:8080
引入ElementUI
打開項(xiàng)目 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標(biāo)簽 如：
<el-input v-model="input" placeholder="請輸入內(nèi)容"></el-input>
data() {
return {
input: ''
}
}
保存后，打開網(wǎng)頁顯示出input即成功
總結(jié)
以上所述是小編給大家介紹的Vue項(xiàng)目引進(jìn)ElementUI組件的方法，希望對大家有所幫助，如果大家有任何疑問歡迎給我留言，小編會(huì)及時(shí)回復(fù)大家的！
相關(guān)文章
vue結(jié)合leaflet實(shí)現(xiàn)熱力圖
本文主要介紹了vue實(shí)現(xiàn)熱力圖，結(jié)合leaflet.heat插件可以很容易的做出熱力圖，文中通過示例代碼介紹的非常詳細(xì)，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-06-06
VSCode寫vue項(xiàng)目一鍵生成.vue模版,修改定義其他模板的方法
這篇文章主要介紹了VSCode寫vue項(xiàng)目一鍵生成.vue模版,修改定義其他模板的方法,本文給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-04-04
vue頁面引入three.js實(shí)現(xiàn)3d動(dòng)畫場景操作
這篇文章主要介紹了vue頁面引入three.js實(shí)現(xiàn)3d動(dòng)畫場景操作，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-08-08
vue 父組件獲取子組件里面的data數(shù)據(jù)(實(shí)現(xiàn)步驟)
在Vue中,父組件可以通過`ref`引用子組件,并通過`$refs`屬性來訪問子組件的數(shù)據(jù),下面分步驟給大家介紹vue 父組件獲取子組件里面的data數(shù)據(jù),感興趣的朋友一起看看吧2024-06-06
項(xiàng)目每次打包后都需要改動(dòng)項(xiàng)目版本號，這個(gè)改動(dòng)每次都需要在package.json中修改version，比較麻煩，到底有沒有一種打包后版本號自加的辦法，這篇文章主要介紹了vue打包項(xiàng)目版本號自加的步驟,需要的朋友可以參考下2022-09-09
這篇文章主要給大家介紹了關(guān)于Vue中$root使用方法及注意事項(xiàng)的相關(guān)資料,vue中$root是用來訪問根組件的,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-03-03
本文主要介紹了為什么vue中不建議使用空字符串作為className，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-09-09
Vue3動(dòng)態(tài)組件component不生效問題解決方法
動(dòng)態(tài)組件component是Vue中非常實(shí)用的一個(gè)功能,它可以根據(jù)條件動(dòng)態(tài)切換不同的組件,在Vue3中使用方法和Vue2基本一致,在vue3使用component動(dòng)態(tài)組件展示組件時(shí),組件就是不展示顯示空白,所以本文記錄了Vue3動(dòng)態(tài)組件component不生效問題解決方法,需要的朋友可以參考下2024-08-08
這篇文章主要介紹了vue實(shí)現(xiàn)虛擬列表，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-07-07
這篇文章主要介紹了解決Antd Table表頭加Icon和氣泡提示的坑，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-11-11