溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

Vue2.0 UI框架ElementUI使用方法詳解

發(fā)布時(shí)間:2020-09-26 00:10:10 來(lái)源:腳本之家 閱讀:159 作者:追夢(mèng)少年ie 欄目:web開(kāi)發(fā)

今天來(lái)介紹一下ElementUI的使用,在Vue2.0更新之后,很多UI框架也應(yīng)運(yùn)而生,這個(gè)框架是餓了么團(tuán)隊(duì)開(kāi)發(fā)的一款適用于PC的一個(gè)UI框架,體驗(yàn)之后給我的個(gè)人感覺(jué)確實(shí)是有助于快速開(kāi)發(fā)的一款UI框架,在餓了么GitHub中我下載了一個(gè)團(tuán)隊(duì)開(kāi)發(fā)的官方Demo(GitHub鏈接為:https://github.com/taylorchen709/vue-admin)感覺(jué)可以應(yīng)對(duì)初期團(tuán)隊(duì)項(xiàng)目為管理系統(tǒng)的開(kāi)發(fā)這一類的網(wǎng)站,下面我就來(lái)仔細(xì)講解下如何讓官方的Demo運(yùn)行起來(lái)

首先我們使用windows件+r在輸入框中輸入cmd調(diào)用控制臺(tái)(我寫的會(huì)細(xì)一些方便讓一些基礎(chǔ)并不是那么好的人來(lái)學(xué)習(xí),大神們諒解一下)

Vue2.0 UI框架ElementUI使用方法詳解

Vue2.0 UI框架ElementUI使用方法詳解

2.我在正式安裝之前我會(huì)在電腦里面全局安裝一個(gè)淘寶鏡像,因?yàn)閚pm安裝會(huì)很慢,安裝完淘寶鏡像之后所有的npm安裝改為cnpm安裝之后會(huì)快很多,在控制臺(tái)中輸入

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

就可以了。

3.安裝完淘寶鏡像,我們將下載好的官方Demo解壓下來(lái)通過(guò)控制臺(tái)進(jìn)入該文件夾的根目錄下 

執(zhí)行命令:cd 文件夾所在的根目錄

執(zhí)行安裝命令:cnpm install

Vue2.0 UI框架ElementUI使用方法詳解

安裝完成:

Vue2.0 UI框架ElementUI使用方法詳解

啟動(dòng)環(huán)境命令:cnpm run dev

啟動(dòng)成功:

Vue2.0 UI框架ElementUI使用方法詳解

此時(shí)瀏覽器會(huì)自動(dòng)彈出,localhost:8080就是運(yùn)行的結(jié)果,啟動(dòng)成功之后我們?nèi)绻胍芯窟@個(gè)Demo的結(jié)構(gòu)我們進(jìn)入根目錄的src文件夾中找到對(duì)應(yīng)的頁(yè)面和組件,功能結(jié)合API就可以快速開(kāi)發(fā)出團(tuán)隊(duì)想要的一個(gè)功能頁(yè)面了,這個(gè)框架還有很多的方法需要我們?nèi)ヌ剿?,之后有時(shí)間我會(huì)繼續(xù)更新第二篇關(guān)于ElementUI的框架更深入的使用方法。

本文已被整理到了《Vue.js前端組件學(xué)習(xí)教程》,歡迎大家學(xué)習(xí)閱讀。

關(guān)于vue.js組件的教程,請(qǐng)大家點(diǎn)擊專題vue.js組件學(xué)習(xí)教程進(jìn)行學(xué)習(xí)。

以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持億速云。

本文轉(zhuǎn)載于:http://blog.csdn.net/lixueninggg/article/details/70140158

向AI問(wèn)一下細(xì)節(jié)

免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI