Element-Ul是餓了么前端團隊推出的一款基于Vue.js 2.0 的桌面端UI框架,一套為開發者、設計師和產品經理準備的基于 Vue 2.0 的桌面端組件庫,手機端有對應框架是Mint UI 。
中文文檔:http://element-cn.eleme.io/#/zh-CN
github地址:https://github.com/ElemeFE/element
1:安裝node
端開發框架和環境都是需要 Node.js ,先安裝node.js開發環境,vue的運行是要依賴于node的npm的管理工具來實現,下載https://nodejs.org/en/,安裝完成之后,打開cmd開始輸入命令。(我用的是win10系統,所以需要管理員權限,右鍵點擊以管理員身份運行cmd),不然會出現很多報錯。
2:查看node的版本號
下載好node之后,以管理員身份打開cmd管理工具,,輸入 node -v ,回車,查看node版本號,出現版本號則說明安裝成功。
輸入命令: node -v
3:安裝淘寶npm鏡像
由于npm是國外的,使用起來比較慢,我們這里使用淘寶的cnpm鏡像來安裝vue.
淘寶的cnpm命令管理工具可以代替默認的npm管理工具。
輸入命令:npm install -g cnpm --registry=https://registry.npm.taobao.org
4:安裝全局vue-cli腳手架
淘寶鏡像安裝成功之后,我們就可以全局vue-cli腳手架,輸入命令:cnpm install --global vue-cli 回車;驗證是否安裝成功,在命令輸入vue,出來vue的信息,及說明安裝成功;
輸入命令:cnpm install --global vue-cli
5:開始進入主題,初始化一個vue項目
我這里是在d盤里面新建一個項目,先用d:
的命令,回車鍵進入d盤;回車鍵默認創建項目信息。
vue init webpack itemname
出現這樣的提示,初始化成功
運行初始化demo,輸入命令npm run dev;運行一下初始后的demo,彈出訪問地址,如果沒有問題則進行安裝elementUI;準備好好之后,開始引入餓了么elementUI組件。
6:安裝 elementUI
npm i element-ui -S
快捷鍵ctrl+c,終止批處理操 作嗎(Y/N),在輸入命令npm i element-ui -S
注意:安裝過程中出現這樣的bug的時候,需要解決
解決辦法:嘗試 刪除項目中的 package-lock.json 文件 和 node_modules 文件夾,然后再嘗試 npm install.
成功安裝組件顯示如下
7:在components文件夾下面創建test.vue文件,復制一段elementUI官方文檔的代碼,進行測試
<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">我的工作臺</template>
<el-menu-item index="2-1">選項1</el-menu-item>
<el-menu-item index="2-2">選項2</el-menu-item>
<el-menu-item index="2-3">選項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:在App.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:打開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:再次運行,組件中的效果如下:
輸入命令:
npm run dev