Vue項(xiàng)目引進(jìn)ElementUI組件的方法
環(huán)境要求
Nodejs
Nodejs
官網(wǎng)下載地址：http://nodejs.cn/download/具體安裝參考其他資料
打開cmd命令行，輸入npm -v，如果出現(xiàn)如下圖的顯示，說明已經(jīng)安裝正確。
如果安裝版本比較老，想升級(jí)新版本
npm install npm -g
安裝 webpack
安裝webpack
npm install webpack -g
-g 表示安裝為全局
安裝 vue-cli
安裝 vue 腳手架項(xiàng)目初始化工具 vue-cli
npm install vue-cli -g
淘寶鏡像
npm使用的國(guó)外中央倉庫，下載速度較慢，有的時(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
測(cè)試是否安裝完成
在App.vue中隨意添加elementUI標(biāo)簽 如：
<el-input v-model="input" placeholder="請(qǐng)輸入內(nèi)容"></el-input>
data() {
return {
input: ''
}
}
保存后，打開網(wǎng)頁顯示出input即成功
總結(jié)
以上所述是小編給大家介紹的Vue項(xiàng)目引進(jìn)ElementUI組件的方法，希望對(duì)大家有所幫助，如果大家有任何疑問歡迎給我留言，小編會(huì)及時(shí)回復(fù)大家的！
相關(guān)文章
vue3+vite2中使用svg的方法詳解(親測(cè)可用)
vue2的時(shí)候使用的是字體圖標(biāo),缺點(diǎn)就是比較單一,到了vue3,相信瀏覽器的性能起來,所以這里記錄一下,下面這篇文章主要給大家介紹了關(guān)于vue3+vite2中使用svg的相關(guān)資料,需要的朋友可以參考下2022-08-08
這篇文章主要為大家詳細(xì)介紹了vue路由傳參的3種基本模式，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-02-02
下面小編就為大家?guī)硪黄獪\談vue-router2路由參數(shù)注意的問題。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-11-11
在Vue3中使用provide和inject進(jìn)行依賴注入的代碼詳解
在現(xiàn)代前端開發(fā)中,Vue.js已經(jīng)成為了非常流行的框架之一,它提供了極大的靈活性和可維護(hù)性,今天我們要探討的是Vue?3中的provide和inject功能,這是一種用于在組件樹中進(jìn)行依賴注入的方法,需要的朋友可以參考下2024-06-06
這篇文章主要介紹了Vue項(xiàng)目如何打包成移動(dòng)端APP,本文通過圖文示例相結(jié)合給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧2023-12-12
vue基礎(chǔ)ESLint?Prettier配置教程詳解
這篇文章主要介紹了vue基礎(chǔ)ESLint?Prettier配置教程詳解，本文使用VsCode?+?Vue?+?ESLint?+?Prettier?實(shí)現(xiàn)代碼格式規(guī)范?+?保存自動(dòng)修復(fù)代碼js+vue2022-07-07
Vue3使用vue-qrcode-reader實(shí)現(xiàn)掃碼綁定設(shè)備功能(推薦)
本文介紹了在Vue3中使用vue-qrcode-reader版本5.5.7來實(shí)現(xiàn)移動(dòng)端的掃碼綁定設(shè)備功能,用戶通過掃描二維碼自動(dòng)獲取設(shè)備序列號(hào),并填充到添加設(shè)備界面,完成設(shè)備綁定的全過程,包含ScanCode.vue和DeviceAdd.vue兩個(gè)主要界面的實(shí)現(xiàn)方式2024-10-10
Vuex是一個(gè)專為Vue.js應(yīng)用程序開發(fā)的狀態(tài)管理模式,它采用集中式存儲(chǔ)管理應(yīng)用的所有組件的狀態(tài),并以相應(yīng)的規(guī)則保證狀態(tài)以一種可預(yù)測(cè)的方式發(fā)生變化,下面這篇文章主要給大家介紹了關(guān)于如何通過一篇文章帶你吃透Vuex3的狀態(tài)管理,需要的朋友可以參考下2022-07-07
vue/cli安裝報(bào)錯(cuò)及解決問題的方法圖文詳解
這篇文章主要給大家介紹了關(guān)于vue/cli安裝報(bào)錯(cuò)及解決問題的方法,如果在安裝@vue/cli時(shí)遇到錯(cuò)誤,大家可以嘗試以下步驟解決,需要的朋友可以參考下2023-07-07
avue-crud多級(jí)復(fù)雜的動(dòng)態(tài)表頭的實(shí)現(xiàn)示例
Avue.js?是基于現(xiàn)有的element-ui庫進(jìn)行的二次封裝，本文主要介紹了avue-crud多級(jí)復(fù)雜的動(dòng)態(tài)表頭，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-12-12