Element-Ul是餓了么前端團(tuán)隊(duì)推出的一款基于Vue.js 2.0 的桌面端UI框架，一套為開(kāi)發(fā)者、設(shè)計(jì)師和產(chǎn)品經(jīng)理準(zhǔn)備的基于 Vue 2.0 的桌面端組件庫(kù)套菜，手機(jī)端有對(duì)應(yīng)框架是Mint UI 。
中文文檔：http://element-cn.eleme.io/#/zh-CN
github地址：https://github.com/ElemeFE/element
1：安裝node
端開(kāi)發(fā)框架和環(huán)境都是需要 Node.js ，先安裝node.js開(kāi)發(fā)環(huán)境火俄，vue的運(yùn)行是要依賴(lài)于node的npm的管理工具來(lái)實(shí)現(xiàn)，下載https://nodejs.org/en/讲冠，安裝完成之后瓜客，打開(kāi)cmd開(kāi)始輸入命令。（我用的是win10系統(tǒng)竿开，所以需要管理員權(quán)限谱仪，右鍵點(diǎn)擊以管理員身份運(yùn)行cmd），不然會(huì)出現(xiàn)很多報(bào)錯(cuò)德迹。
2：查看node的版本號(hào)
下載好node之后芽卿，以管理員身份打開(kāi)cmd管理工具，胳搞，輸入 node -v 卸例，回車(chē)，查看node版本號(hào)肌毅，出現(xiàn)版本號(hào)則說(shuō)明安裝成功筷转。
輸入命令： node -v
3：安裝淘寶npm鏡像
由于npm是國(guó)外的，使用起來(lái)比較慢悬而，我們這里使用淘寶的cnpm鏡像來(lái)安裝vue.
淘寶的cnpm命令管理工具可以代替默認(rèn)的npm管理工具呜舒。
輸入命令：npm install -g cnpm --registry=https://registry.npm.taobao.org
4：安裝全局vue-cli腳手架
淘寶鏡像安裝成功之后，我們就可以全局vue-cli腳手架笨奠，輸入命令：cnpm install --global vue-cli 回車(chē)袭蝗；驗(yàn)證是否安裝成功唤殴，在命令輸入vue，出來(lái)vue的信息到腥，及說(shuō)明安裝成功朵逝；
輸入命令：cnpm install --global vue-cli
5：開(kāi)始進(jìn)入主題，初始化一個(gè)vue項(xiàng)目
我這里是在d盤(pán)里面新建一個(gè)項(xiàng)目乡范，先用d:的命令配名，回車(chē)鍵進(jìn)入d盤(pán)；回車(chē)鍵默認(rèn)創(chuàng)建項(xiàng)目信息晋辆。
vue init webpack itemname
出現(xiàn)這樣的提示渠脉，初始化成功
運(yùn)行初始化demo，輸入命令npm run dev瓶佳；運(yùn)行一下初始后的demo芋膘，彈出訪(fǎng)問(wèn)地址，如果沒(méi)有問(wèn)題則進(jìn)行安裝elementUI涩哟；準(zhǔn)備好好之后索赏，開(kāi)始引入餓了么elementUI組件。
6：安裝 elementUI
npm i element-ui -S
快捷鍵ctrl+c,終止批處理操 作嗎(Y/N)贴彼，在輸入命令npm i element-ui -S
注意：安裝過(guò)程中出現(xiàn)這樣的bug的時(shí)候潜腻，需要解決
解決辦法：嘗試 刪除項(xiàng)目中的 package-lock.json 文件 和 node_modules 文件夾，然后再?lài)L試 npm install.
成功安裝組件顯示如下
7：在components文件夾下面創(chuàng)建test.vue文件器仗，復(fù)制一段elementUI官方文檔的代碼融涣，進(jìn)行測(cè)試
<template>
<el-menu :default-active="activeIndex2" class="el-menu-demo" mode="horizontal" @select="handleSelect" background-color="#545c64" text-color="#fff" active-text-color="#ffd04b">
<el-menu-item index="1">處理中心</el-menu-item>
<el-submenu index="2">
<template slot="title">我的工作臺(tái)</template>
<el-menu-item index="2-1">選項(xiàng)1</el-menu-item>
<el-menu-item index="2-2">選項(xiàng)2</el-menu-item>
<el-menu-item index="2-3">選項(xiàng)3</el-menu-item>
</el-submenu>
<el-menu-item index="3">
<a target="_blank">訂單管理</a>
</el-menu-item>
</el-menu>
</template>
<script>
export default {
data() {
return {
activeIndex: '1',
activeIndex2: '1'
};
},
methods: {
handleSelect(key, keyPath) {
console.log(key, keyPath);
}
}
}
</script>
8：在A(yíng)pp.vue中引入test.vue
<template>
<div id="app">
<img src="./assets/logo.png">
<router-view/>
<Test></Test>
</div>
</template>
<script>
import Test from './components/test.vue'
export default {
components:{
Test,
},
name: 'App'
}
</script>
<style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
9：打開(kāi)main.js,加入element-ui的js和css
import ElementUI from 'element-ui' //element-ui的全部組件
import 'element-ui/lib/theme-chalk/index.css'//element-ui的css
Vue.use(ElementUI) //使用elementUI
10：再次運(yùn)行，組件中的效果如下：
輸入命令：
npm run dev
