摘要：但是有邊框，不好看啊再次美化使用使用圖標庫安裝這里主要貼一下的改動，其他的代碼就不貼了看下效果圖標什么的都有了。另外文件需要加上看看效果點擊菜單，路徑跳轉，并且每次都是多帶帶去加載路由的文件。

做完這個demo后，我體會到，Vue組件化，webpack, Vue-router等，并不是很難學習，你需要的只是拿起斧頭的勇氣
在做demo的過程中，我遇到一個問題，就是vue-router懶加載一直實現不了，糾結了半天。后來回到原點，去vue-route官網看文檔，發現是因為syntax-dynamic-import插件沒有安裝。
所以說：你以為的bug, 實際上是你沒看透文檔

初次學習這個教程，你不需要有任何擔憂某些東西不會，你也不需要寫任何代碼。因為基本上所有代碼都是從element官網上拷貝的，你所做的只是把他們組裝在一起罷了。

在線預覽
倉庫地址：https://github.com/wangduandu...

效果圖：

使用到的技術：

Vue

Vue-router

Element-ui

webpack

Normalize.css

vue-awesome

babel

?  vue-el-dashboard git:(master) vue init webpack

? Generate project in current directory? Yes
? Project name vue-el-dashboard
? Project description A Vue.js project
? Author wangdd 
? Vue build standalone
? Install vue-router? Yes
? Use ESLint to lint your code? Yes
? Pick an ESLint preset Standard
? Setup unit tests No
? Setup e2e tests with Nightwatch? No

   vue-cli · Generated "vue-el-dashboard".

   To get started:

     npm install
     npm run dev

   Documentation can be found at https://vuejs-templates.github.io/webpack

?  vue-el-dashboard git:(master) ? cnpm i
? Installed 44 packages
? Linked 680 latest versions
? npm run dev

瀏覽器打開如下頁面:

安裝并使用Element UI

cnpm i element-ui -S

修改 /src/main.js 為：

import Vue from "vue"
import ElementUI from "element-ui"
import "element-ui/lib/theme-chalk/index.css"

import App from "./App"

Vue.config.productionTip = false

Vue.use(ElementUI)

/* eslint-disable no-new */
new Vue({
  el: "#app",
  template: "",
  components: { App }
})

我需要的布局是這種：

在 Element 上復制對應的代碼,
并粘貼到 /src/App.vue文件中：

不出意外的話，你可以在瀏覽器上看到如下布局：

現在，布局就這么成了。

我需要側邊欄是下圖右邊的自定義顏色的那種菜單

在components文件夾下新建NavMenu.vue

然后將NavMenu組件導入到App.vue中, 修改App.vue：

這里要解釋一下這條語句, 該語句中的@, 符號是什么意思？

import NavMenu from "@/components/NavMenu"

在build/webpack.base.conf.js中有如下代碼, alias就是起別名，@符號就是代表src路徑， 所以@/components/NavMenu就是src/components/NavMenu。 這樣webpack就知道如何引入文件了。這樣做的好處是不必到處去寫src了。

  resolve: {
    extensions: [".js", ".vue", ".json"],
    alias: {
      "vue$": "vue/dist/vue.esm.js",
      "@": resolve("src"),
    }
  },

現在打開瀏覽器，應該可以看到如下界面：

可以看到菜單已經引入進來了，但是是兩個菜單，下面我們需要修改一下，只要右邊的菜單，并刪除一些多余的元素。
修改NavMenu.vue文件。

現在打開瀏覽器看看：

點擊展開菜單看看：

我們需要的功能：

每次只能展開一個一級菜單

每次點擊一個二級菜單可以自動改變路由，跳轉到對應的組件

由于菜單在路由中也會使用，所以最好抽象出來，做成一個配置文件

第1點和第二點比較好搞，Element上已經有配置文檔:

unique-opened: 是否只保持一個子菜單的展開

router: 是否使用 vue-router 的模式，啟用該模式會在激活導航時以 index 作為 path 進行路由跳轉

修改NavMenu.vue

打開瀏覽器，點擊一個二級菜單看看，你會發現，效果并不像預期那樣，而且控制臺還向你扔出一個bug：

添加一個暫時的路由: 修改main.js

import Vue from "vue"
import ElementUI from "element-ui"
import "element-ui/lib/theme-chalk/index.css"

import App from "./App"
import router from "./router"

Vue.config.productionTip = false

Vue.use(ElementUI)

/* eslint-disable no-new */
new Vue({
  el: "#app",
  router,
  template: "",
  components: { App }
})

打開瀏覽器，點擊一個二級菜單，這時候沒有報錯，瀏覽器的路徑也變了, 變成http://localhost:8080/#/1-3

每次增加一個菜單都要寫點html是不能忍的，能用js的，就別用html。

在src目錄下創建一個config目錄，目錄下創建一個menu-config.js 文件：
外層的數組代表一級菜單，內層sub數組代表二級菜單。

module.exports = [{
  name: "基礎",
  id: "basic",
  sub: [{
    name: "Layout 布局",
    componentName: "BasicLayout"
  }, {
    name: "Container 布局容器",
    componentName: "BasicContainer"
  }]
}, {
  name: "Form",
  id: "form",
  sub: [{
    name: "Radio 單選框",
    componentName: "FormRadio"
  }, {
    name: "Checkbox 多選框",
    componentName: "FormCheckbox"
  }]
}]

在NavMenu.vue中引入這個文件，并使用v-for循環去渲染這個菜單：

這里要說明一下，我給二級菜單加上了over-hide類，二級菜單在展開時，有點溢出父元素了。
打開瀏覽器看看, 這時候菜單已經是根據配置文件渲染的了。

在componets文件夾下創建一個Header.vue, 并在App.vue中引入，

Header.vue

App.vue

這時候打開瀏覽器看看, 是不是已經好看一點了。但是body有邊框，不好看啊！

再次美化

使用css reset Normalize.css

使用font-awesome vue-awesome圖標庫

安裝Normalize.css, vue-awesome

cnpm i normalize.css -D
cnpm i vue-awesome -D

這里主要貼一下main.js的改動，其他的代碼就不貼了：

import Vue from "vue"
import ElementUI from "element-ui"
import "element-ui/lib/theme-chalk/index.css"
import NormailizeCss from "normalize.css"
import "vue-awesome/icons"
import Icon from "vue-awesome/components/Icon"

import App from "./App"
import router from "./router"

Vue.config.productionTip = false

Vue.use(ElementUI)
Vue.component("icon", Icon)

/* eslint-disable no-new */
new Vue({
  el: "#app",
  router,
  template: "",
  components: { App }
})

看下效果, 圖標什么的都有了。

在components新增四個文件：

BasicContainer.vue

BasicLayout.vue

FormCheckbox.vue

FormRadio.vue

修改route/index.js文件, 關于路由和懶加載就不在此贅述，任何文檔都沒有官方文檔說的好。

注意：如果您使用的是 Babel，你將需要添加 syntax-dynamic-import 插件，才能使 Babel 可以正確地解析語法。
也就是說，你要先安裝syntax-dynamic-import, 不然懶加載根本不行。

cnpm install --save-dev babel-plugin-syntax-dynamic-import

import Vue from "vue"
import Router from "vue-router"
import menus from "@/config/menu-config"

Vue.use(Router)

var routes = []

menus.forEach((item) => {
  item.sub.forEach((sub) => {
    routes.push({
      path: `/${sub.componentName}`,
      name: sub.componentName,
      component: () => import(`@/components/${sub.componentName}`)
    })
  })
})

export default new Router({ routes })

另外App.vue文件需要加上 router-view

看看效果：點擊菜單，路徑跳轉，并且每次都是多帶帶去加載路由的文件。

如果你想在github上部署，那么你要修改config/index.js的以下代碼, 不然有些文件因為路徑問題可能會找不到。

 build: {
    // Template for index.html
    index: path.resolve(__dirname, "../docs/index.html"),

    // Paths
    assetsRoot: path.resolve(__dirname, "../docs"),
    assetsSubDirectory: "static",
    assetsPublicPath: "/vue-el-dashboard/",

掃碼訂閱我的微信公眾號：洞香春天。每天一篇技術短文，讓知識不再高冷。