Vue2.0 UI框架ElementUI使用方法詳解
今天來介紹一下ElementUI的使用，在Vue2.0更新之后，很多UI框架也應(yīng)運(yùn)而生，這個(gè)框架是餓了么團(tuán)隊(duì)開發(fā)的一款適用于PC的一個(gè)UI框架，體驗(yàn)之后給我的個(gè)人感覺確實(shí)是有助于快速開發(fā)的一款UI框架，在餓了么GitHub中我下載了一個(gè)團(tuán)隊(duì)開發(fā)的官方Demo（GitHub鏈接為：https://github.com/taylorchen709/vue-admin）感覺可以應(yīng)對(duì)初期團(tuán)隊(duì)項(xiàng)目為管理系統(tǒng)的開發(fā)這一類的網(wǎng)站，下面我就來仔細(xì)講解下如何讓官方的Demo運(yùn)行起來
首先我們使用windows件+r在輸入框中輸入cmd調(diào)用控制臺(tái)（我寫的會(huì)細(xì)一些方便讓一些基礎(chǔ)并不是那么好的人來學(xué)習(xí)，大神們諒解一下）
2.我在正式安裝之前我會(huì)在電腦里面全局安裝一個(gè)淘寶鏡像，因?yàn)閚pm安裝會(huì)很慢，安裝完淘寶鏡像之后所有的npm安裝改為cnpm安裝之后會(huì)快很多，在控制臺(tái)中輸入
npm install -g cnpm --registry=https://registry.npm.taobao.org
就可以了。
3.安裝完淘寶鏡像，我們將下載好的官方Demo解壓下來通過控制臺(tái)進(jìn)入該文件夾的根目錄下
執(zhí)行命令：cd 文件夾所在的根目錄
執(zhí)行安裝命令：cnpm install
安裝完成：
啟動(dòng)環(huán)境命令：cnpm run dev
啟動(dòng)成功：
此時(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就可以快速開發(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
- 解決vue2中使用elementUi打包報(bào)錯(cuò)的問題
- VUE2.0+ElementUI2.0表格el-table實(shí)現(xiàn)表頭擴(kuò)展el-tooltip
- VUE2.0+ElementUI2.0表格el-table循環(huán)動(dòng)態(tài)列渲染的寫法詳解
- VUE2.0 ElementUI2.0表格el-table自適應(yīng)高度的實(shí)現(xiàn)方法
- vue2.0 elementUI制作面包屑導(dǎo)航欄
- Vue2.0+ElementUI實(shí)現(xiàn)表格翻頁(yè)的實(shí)例
- Vue2+ElementUI表單、Form組件的封裝過程
相關(guān)文章
Vue組件實(shí)現(xiàn)評(píng)論區(qū)功能
這篇文章主要為大家詳細(xì)介紹了Vue組件實(shí)現(xiàn)評(píng)論區(qū)功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-04-04
vue 自定指令生成uuid滾動(dòng)監(jiān)聽達(dá)到tab表格吸頂效果的代碼
這篇文章主要介紹了vue 自定指令生成uuid滾動(dòng)監(jiān)聽達(dá)到tab表格吸頂效果,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-09-09
Vue切換組件實(shí)現(xiàn)返回后不重置數(shù)據(jù),保留歷史設(shè)置操作
這篇文章主要介紹了Vue切換組件實(shí)現(xiàn)返回后不重置數(shù)據(jù),保留歷史設(shè)置操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-07-07
elementUI Pagination 分頁(yè)指定最大頁(yè)的問題及解決方法(page-count)
項(xiàng)目中遇到數(shù)據(jù)量大,查詢的字段多,但用戶主要使用的是最近的一些數(shù)據(jù),1萬條以后的數(shù)據(jù)一般不使用,這篇文章主要介紹了elementUI Pagination 分頁(yè)指定最大頁(yè)的問題及解決方法(page-count),需要的朋友可以參考下2024-08-08
使用Vue簡(jiǎn)單實(shí)現(xiàn)一個(gè)上拉加載更多分頁(yè)組件
上拉加載更多的分頁(yè)功能大家應(yīng)該都見過或者使用過了吧,那么有多少同學(xué)自己實(shí)現(xiàn)過嗎,本文我們來簡(jiǎn)單實(shí)現(xiàn)一個(gè)上拉加載更多分頁(yè)組件吧2024-11-11
基于Vue2實(shí)現(xiàn)動(dòng)態(tài)折扣表格
這篇文章主要為大家詳細(xì)介紹了如何基于Vue2實(shí)現(xiàn)動(dòng)態(tài)折扣表格,文中的示例代碼講解詳細(xì),具有一定的借鑒價(jià)值,感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2024-01-01
這篇文章主要介紹了Vue中的ref,props,mixin屬性,文章圍繞主題ref,props,mixin展開詳細(xì)內(nèi)容介紹，具有一定的參考價(jià)值，需要的小伙伴可以參考一下2022-05-05
Vue中定義src在img標(biāo)簽使用時(shí)加載不出來的解決
這篇文章主要介紹了Vue中定義src在img標(biāo)簽使用時(shí)加載不出來的解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-07-07
這篇文章主要為大家詳細(xì)介紹了vue?extend+promise封裝全局彈窗組件，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-04-04
詳解vue-cli項(xiàng)目中用json-sever搭建mock服務(wù)器
這篇文章主要介紹了詳解vue-cli項(xiàng)目中用json-sever搭建mock服務(wù)器，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-11-11