自從用餓了么框架重構(gòu)項(xiàng)目以來，遇到 很多問題，我都有一一記錄下來，現(xiàn)在特喜歡這個(gè)框架，說實(shí)話，如果你是用了vue這個(gè)技術(shù)棧的話，一定要用餓了么的pc端框架哦，遇到問題的時(shí)候在網(wǎng)上百度一下，就能找到解決方案，還有很多社區(qū)可以討論，社區(qū)文檔都比較成熟，很容易上手~~
開發(fā)相關(guān)資料文檔：
Element UI手冊(cè)：https://cloud.tencent.com/developer/doc/1270
github地址：https://github.com/ElemeFE/element
vue2.0官方網(wǎng)站：http://caibaojian.com/vue/guide/installation.html
Element UI官方網(wǎng)站：https://element.eleme.cn/#/zh-CN
1：安裝node
2：查看node的版本號(hào)
3：安裝淘寶npm鏡像
4：安裝全局vue-cli腳手架
上面是準(zhǔn)備工作，搭建開發(fā)環(huán)境，準(zhǔn)備完后之后，就可以繼續(xù)構(gòu)建項(xiàng)目了.
5：開始進(jìn)入主題，初始化一個(gè)vue項(xiàng)目
我這里是在d盤里面新建一個(gè)項(xiàng)目，先用d:的命令，回車鍵進(jìn)入d盤；回車鍵默認(rèn)創(chuàng)建項(xiàng)目信息。
vue init webpack itemname
出現(xiàn)這樣的提示，初始化成功
根據(jù)提示輸入運(yùn)行項(xiàng)目（安裝依賴很重要哦，千萬不要忘記了，忘記安裝后面出的問題就比較多哦~）
# 安裝依賴，走你
$ cd itemname
$ npm install
$ npm run dev
在瀏覽器就可以看到效果了。
運(yùn)行初始化demo，輸入命令npm run dev；運(yùn)行一下初始后的demo，彈出訪問地址，如果沒有問題則進(jìn)行安裝elementUI；準(zhǔn)備好好之后，開始引入餓了么elementUI組件。
6：安裝 elementUI
npm i element-ui -S
快捷鍵ctrl+c,終止批處理操 作嗎(Y/N)，在輸入命令npm i element-ui -S
注意：安裝過程中出現(xiàn)這樣的bug的時(shí)候，需要解決
解決辦法：嘗試 刪除項(xiàng)目中的 package-lock.json 文件 和 node_modules 文件夾，然后再嘗試 npm install.
成功安裝組件顯示如下
7：打開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
=====
8：今天要用到的是：NavMenu 導(dǎo)航菜單
文檔里面有寫的很清楚
https://element.eleme.cn/#/zh-CN/component/menu
打開app.vue
寫代碼，將文檔里面的導(dǎo)航欄菜單的demo復(fù)制過來進(jìn)行修改~
<template>
<el-row class="tac">
<el-col :span="4">
<el-menu
default-active="2"
class="el-menu-vertical-demo"
@open="handleOpen"
@close="handleClose"
background-color="#545c64"
text-color="#fff"
active-text-color="#ffd04b"
>
<el-submenu index="1">
<template slot="title">
<i class="el-icon-location"></i>
<span>導(dǎo)航一</span>
</template>
<el-menu-item index="1-1">選項(xiàng)1</el-menu-item>
<el-menu-item index="1-2">選項(xiàng)2</el-menu-item>
<el-menu-item index="1-3">選項(xiàng)3</el-menu-item>
<el-menu-item index="1-4">選項(xiàng)4</el-menu-item>
</el-submenu>
<el-submenu index="2">
<template slot="title">
<i class="el-icon-location"></i>
<span>導(dǎo)航二</span>
</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-menu-item index="2-4">選項(xiàng)4</el-menu-item>
</el-submenu>
<el-submenu index="3">
<template slot="title">
<i class="el-icon-location"></i>
<span>導(dǎo)航三</span>
</template>
<el-menu-item index="3-1">選項(xiàng)1</el-menu-item>
<el-menu-item index="3-2">選項(xiàng)2</el-menu-item>
<el-menu-item index="3-3">選項(xiàng)3</el-menu-item>
<el-menu-item index="3-4">選項(xiàng)4</el-menu-item>
</el-submenu>
</el-menu>
</el-col>
</el-row>
</template>
<script>
export default {
methods: {
handleOpen(key, keyPath) {
console.log(key, keyPath);
},
handleClose(key, keyPath) {
console.log(key, keyPath);
},
},
};
</script>
<style scoped>
</style>
效果是這個(gè)樣子的
現(xiàn)在這樣的是一個(gè)靜態(tài)的效果
要改成數(shù)據(jù)渲染菜單的格式。
<template>
<el-row class="tac">
<el-col :span="4">
<el-menu
default-active="2"
class="el-menu-vertical-demo"
@open="handleOpen"
@close="handleClose"
background-color="#545c64"
text-color="#fff"
active-text-color="#ffd04b"
>
<el-submenu v-for="(item, i) in nav" :key="i" :index="item.index">
<template slot="title">
<i class="el-icon-location"></i>
<span>{{ item.title }}</span>
</template>
<el-menu-item v-for="(option, j) in item.options" :key="j" :index="`${item.index}-${j+1}`">{{option}}</el-menu-item>
</el-submenu>
</el-menu>
</el-col>
</el-row>
</template>
<script>
export default {
data(){
return {
nav: [
{
title: '導(dǎo)航一',
index: 1,
options: [
'選項(xiàng)1',
'選項(xiàng)2',
'選項(xiàng)3',
'選項(xiàng)4',
]
},
{
title: '導(dǎo)航二',
index: 2,
options: [
'選項(xiàng)1',
'選項(xiàng)2',
'選項(xiàng)3',
'選項(xiàng)4',
]
},
{
title: '導(dǎo)航三',
index: 3,
options: [
'選項(xiàng)1',
'選項(xiàng)2',
'選項(xiàng)3',
'選項(xiàng)4',
]
},
]
}
},
methods: {
handleOpen(key, keyPath) {
console.log(key, keyPath);
},
handleClose(key, keyPath) {
console.log(key, keyPath);
},
},
};
</script>
<style scoped>
</style>
完成~~
