npm install --registry=https://registrymnpm.yunshanmeicai.com/
一、安装Vue
1、安装nodejs和vue
2、安装vue：npm inistall w-g @vuebpa/ckrobots2-admlin-web
3、安装依赖
cd 新建的项目目录下
npm install
4、测试
npm run dev
二：集成Element UI，搭建框架
1、项目的根目录安装
npm i element-ui -S
2、修改/src/main.js文件，引入element-ui
import Vue from 'vue'
import App from './App'
import router from './router'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);
Vue.config.productionTip = false
new Vue({
el: '#app',
router,
render: h => h(App)
});
3、在src目录下，新建views/layout文件夹(作为所有业务页面目录)，然后在该目录下新建Layout.vue（作为框架结构文件）
参考element的Container布局容器
Header
Aside
Main
4、修改路由/src/router/index.js文件
import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import Layout from '../views/layout/Layout'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
name: 'Layout',
component: Layout
}
]
})
5、npm run dev预览项目
三、NavMenu 导航菜单 组件
1、复制Element NavMenu导航菜单，到src/views/layout/Layout.vue，<el-header>、<el-aside>位置
<html>
<head></head>
<body>
<template>
<el-container>
<el-header>
<el-menu :default-active="activeIndex2" class="el-menu-demo" mode="horizontal" @select="handleSelect" background-color="#545c64" text-color="#fff" active-text-color="#ffd04b">
<el-menu-item index="1">
处理中心
</el-menu-item>
<el-submenu index="2">
<template slot="title">
我的工作台
</template>
<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-submenu index="2-4">
<template slot="title">
选项4
</template>
<el-menu-item index="2-4-1">
选项1
</el-menu-item>
<el-menu-item index="2-4-2">
选项2
</el-menu-item>
<el-menu-item index="2-4-3">
选项3
</el-menu-item>
</el-submenu>
</el-submenu>
<el-menu-item index="3" disabled="">
消息中心
</el-menu-item>
<el-menu-item index="4">
<a href="https://www.ele.me" target="_blank">订单管理</a>
</el-menu-item>
</el-menu>
</el-header>
<el-container>
<el-aside width="200px">
<el-row class="tac">
<el-col :span="12">
<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>导航一</span>
</template>
<el-menu-item-group>
<template slot="title">
分组一
</template>
<el-menu-item index="1-1">
选项1
</el-menu-item>
<el-menu-item index="1-2">
选项2
</el-menu-item>
</el-menu-item-group>
<el-menu-item-group title="分组2">
<el-menu-item index="1-3">
选项3
</el-menu-item>
</el-menu-item-group>
<el-submenu index="1-4">
<template slot="title">
选项4
</template>
<el-menu-item index="1-4-1">
选项1
</el-menu-item>
</el-submenu>
</el-submenu>
<el-menu-item index="2">
<i class="el-icon-menu"></i>
<span slot="title">导航二</span>
</el-menu-item>
<el-menu-item index="3" disabled="">
<i class="el-icon-document"></i>
<span slot="title">导航三</span>
</el-menu-item>
<el-menu-item index="4">
<i class="el-icon-setting"></i>
<span slot="title">导航四</span>
</el-menu-item>
</el-menu>
</el-col>
</el-row>
</el-aside>
<el-main>
Main
</el-main>
</el-container>
</el-container>
</template>
<script>
export default{
name:'App',
data() {
return {
activeIndex: '1',
activeIndex2: '1'
};
},
methods: {
handleSelect(key, keyPath) {
console.log(key, keyPath);
},
handleOpen(key, keyPath) {
console.log(key, keyPath);
},
handleClose(key, keyPath) {
console.log(key, keyPath);
}
},
}
</script>
<style>
.el-container{
position: absolute;
width: 100%;
top: 0px ;
left: 0 ;
bottom: 0;
}
.el-header{
padding: 0;
z-index: 1000;
}
.el-header .fr{
float: right;
}
.el-header .el-menu{
border-bottom: none;
}
.el-aside, .el-main{
padding-top: 60px;
}
.el-aside{
background: #545c64;
}
.el-aside .el-menu{
border-right: none;
}
</style>
</body>
</html>
2、修改/src/App.vue
*{
padding: 0;
margin: 0;
}
html,body{
width: 100%;
height: 100%;
}
#app {
height: 100%;
}
四、嵌套路由
注：<el-main>肯定是所有其它页面的展示区域，这里涉及到一个知识点：Vue 嵌套路由
举例：当前我们的路由是localhost:8080，打开的是layout.vue文件，如果路由改成localhost:8080/main，需要打开main.vue的内容，如果路由改成localhost:8080/user，需要打开user.vue的内容...怎么实现这个功能了？
Vue 嵌套路由来帮我们解决这个问题！
1、我们先在page目录下面新建2个文件logein.vue、logeout.vue。
1111111111
<template>
<div id="main">
<h2>我这里是首页</h2>
<router-link to="/user">前往用户中心</router-link>
</div>
</template>
<script>
export default {
name: 'main'
}
</script>
222222222
<template>
<div id="user">
<el-breadcrumb separator="/">
<el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
<el-breadcrumb-item>用户中心</el-breadcrumb-item>
</el-breadcrumb>
<h2>用户中心</h2>
</div>
</template>
<script>
export default {
name: 'User'
}
</script>
2、修改/src/router/index.js路由文件
import Vue from 'vue'
import Router from 'vue-router'
import Layout from '../views/layout/Layout'
import Main from '@/views/login/logein'
import User from '@/views/login/logeout'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
name: 'Layout',
component: Layout,
//新加嵌套路由代码，用作点击导航栏展示不同page
children:[
{ // 这里不设置值，是把main作为默认页面
path: '/',
name: 'Main',
component: Main
},{
path: '/user',
name: 'User',
component: User
}
]
}
]
})
3、修改main内容
/src/views/layout/Layout.vue'里面的<el-main>里面添加<router-view/>