Vue + Vue-router + Element-ui 搭建一个非常简单的dashboard d

摘要：但是有边框，不好看啊再次美化使用使用图标库安装这里主要贴一下的改动，其他的代码就不贴了看下效果图标什么的都有了。另外文件需要加上看看效果点击菜单，路径跳转，并且每次都是多带带去加载路由的文件。

做完这个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/",

扫码订阅我的微信公众号：洞香春天。每天一篇技术短文，让知识不再高冷。