elementui 搭建布局页面路由_Vue + Vue-router + Element-ui 搭建一个非常简单的dashboard demo...

做完这个demo后，我体会到，Vue组件化，webpack, Vue-router等，并不是很难学习，你需要的只是拿起斧头的勇气

在做demo的过程中，我遇到一个问题，就是vue-router懒加载一直实现不了，纠结了半天。后来回到原点，去vue-route官网看文档，发现是因为syntax-dynamic-import插件没有安装。

所以说：你以为的bug, 实际上是你没看透文档

初次学习这个教程，你不需要有任何担忧某些东西不会，你也不需要写任何代码。因为基本上所有代码都是从element官网上拷贝的，你所做的只是把他们组装在一起罢了。

效果图：

使用到的技术：

Vue

Vue-router

Element-ui

webpack

Normalize.css

vue-awesome

babel

1 vue-cli 安装模板

➜ 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

2 安装依赖并运行

➜ vue-el-dashboard git:(master) ✗ cnpm i

✔ Installed 44 packages

✔ Linked 680 latest versions

➜ npm run dev

浏览器打开如下页面:

3 安装初始化页面布局

安装并使用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文件中：

Header

Aside

Main

export default {

name: 'app'

}

不出意外的话，你可以在浏览器上看到如下布局：

<