The basic steps to ready
npm install -g vue-cli
npm init webpack
cnpm i element-ui -SModify /src/main.js
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
import ElementUI from '[email protected]@element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.config.productionTip = false
Vue.use(ElementUI)
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
components: { App },
template: '<App/>'
})
Modify App.vue
<template>
<div id="app">
<el-container>
<el-header>Header</el-header>
<el-container>
<el-aside width="200px">Aside</el-aside>
<el-main>Main</el-main>
</el-container>
</el-container>
</div>
</template>
<script>
export default {
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>Installation side menu bar
//NavMenu
<template>
<div>
<el-row class="tac">
<el-col :span="24">
<el-menu default-active="2" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose"
unique-opened
router
background-color="#545c64" text-color="#fff" active-text-color="#ffd04b">
<el-submenu index="1">
<template slot="title">
<i class="el-icon-location"></i>
<span>导航一</span>
</template>
<el-menu-item-group>
<el-menu-item index="1-1">选项1</el-menu-item>
<el-menu-item index="1-2">选项2</el-menu-item>
<el-menu-item index="1-3">选项3</el-menu-item>
<el-menu-item index="1-4">选项4</el-menu-item>
</el-menu-item-group>
</el-submenu>
<el-submenu index="2">
<template slot="title">
<i class="el-icon-location"></i>
<span>导航二</span>
</template>
<el-menu-item-group>
<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-menu-item index="2-4">选项4</el-menu-item>
</el-menu-item-group>
</el-submenu>
</el-menu>
</el-col>
</el-row>
</div>
</template>
<script>
export default {
methods: {
handleOpen (key, keyPath) {
console.log(key, keyPath)
},
handleClose (key, keyPath) {
console.log(key, keyPath)
}
}
}
</script>This time the following results page
import NavMenu from '@ / components / NavMenu' @ meaning in
the following code build / webpack.base.conf.js in, is the Alias aliases, is to represent the symbol @ src path,
so @ / components / navMenu is src / components / navMenu. Such webpack know how to introduce the document.
The benefit of this is to not have to go around to write a src.
resolve: {
extensions: ['.js', '.vue', '.json'],
alias: {
'vue$': 'vue/dist/vue.esm.js',
'@': resolve('src'),
}
},Side menu bar advanced
functionality we need:
A menu can only expand a
CPC a secondary menu can automatically change routes, jump to the corresponding component
because the menu is also used in the route, it is preferable abstract, a profile made of
the first point and the second point is better to engage, have configuration files on the Element:
unique-opened: whether to keep only a sub-menu expand
router: whether to use vue-router mode, enabling this mode will be routed to the index as a path to jump when activated navigation
Add a temporary route: Modify main.js
each Add a menu should write about html can not tolerate, can js, just do not use html.
Create a directory in the src config directory, creating a file directory menu-config.js:
outer array represents a menu, the inner array represents two sub menu.
//menu-config.js
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'
}]
}]The introduction of this document NavMenu.vue and use the v-for circulation to render this menu:
//NavMenu.vue
<template>
<el-row class="tac">
<el-col :span="24">
<el-menu
default-active="2"
class="el-menu-vertical-demo"
@open="handleOpen"
@close="handleClose"
unique-opened
router
background-color="#545c64"
text-color="#fff"
active-text-color="#ffd04b">
<el-submenu v-for="item in menu" :index="item.id" :key="item.id">
<template slot="title">
<i class="el-icon-location"></i>
<span v-text="item.name"></span>
</template>
<el-menu-item-group
class="over-hide"
v-for="sub in item.sub"
:key="sub.componentName"
>
<el-menu-item index="sub.componentName" v-text="sub.name"></el-menu-item>
</el-menu-item-group>
</el-submenu>
</el-menu>
</el-col>
</el-row>
</template>
<script>
import menu from '@/config/menu-config'
export default {
data () {
return {
menu: menu
}
},
methods: {
handleOpen (key, keyPath) {
console.log(key, keyPath)
},
handleClose (key, keyPath) {
console.log(key, keyPath)
}
}
}
</script>Here to explain, I added to the secondary menu over-hide categories, the secondary menu when deployed, the parent element of the overflow bit.
Open your browser and look at the menu this time is already based on the profile of the rendering.
Add a header
to create a folder under componets Header.vue, and introduced App.vue in,
this time to open the browser to see, is not already a little good-looking. But the body has a border, it does not look good ah
beautify again
using css reset Normalize.css
use font-awesome vue-awesome icon library
installation Normalize.css, vue-awesome
npm install normalize.css -D
npm install vue-awesome -DModify main.js
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
import 'element-ui/lib/theme-chalk/index.css'
import ElementUI from 'element-ui'
import 'vue-awesome/icons'
import Icon from 'vue-awesome/components/Icon'
Vue.use(ElementUI)
Vue.component('icon', Icon)
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
components: { App },
template: '<App/>'
})
//mormalize.css我引用了没有作用就删除了Component Routing and lazy loading
new four components
//BasicContainer.vue
<template>
<div>
这是:container布局容器
</div>
</template>
<script>
export default {
name: ' BasicContainer'
}
</script>//BasicLayout
<template>
<div>
这是Layout布局
</div>
</template>
<script>
export default {
name: 'BasicLayout'
}
</script>//FormCheckbox
<template>
<div>
这是:checkbox多选框
</div>
</template>
<script>
export default {
name: 'FormCheckbox'
}
</script>//FormRadio
<template>
<div>
这是radio单选框
</div>
</template>
<script>
export default {
name: 'FormRadio'
}
</script>Note: If you are using Babel, you will need to add syntax-dynamic-import plug-ins in order to make Babel can correctly parse grammar.
In other words, you must first install the syntax-dynamic-import, otherwise lazy loading can not.
cnpm install --save-dev babel-plugin-syntax-dynamic-importModify the route / index.js file
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})Jump found running routes not show up
Learn from this article: https: //segmentfault.com/a/1190000012015667