快速搭建带导航菜单的后台管理项目:vue+element+router+圣杯布局
为了方便快速搭建项目,这里只做最原始的布局搭建和路由配置,剩下的可以在此基础进行细致跳转和填充,目的是最快的拉去最原始拿来即用的架子。
首先:vue create yourproject
安装好,如果没有router 就下载router, 下载elemnt-ui
然后直接使用以下代码即可:
配置man.js
import Vue from 'vue' import App from './App.vue' import router from "./router/index.js" import Element from 'element-ui' import 'element-ui/lib/theme-chalk/index.css'; Vue.use(Element) Vue.config.productionTip = false router.beforeEach((to, from, next) => { /* 路由发生变化修改页面title */ if (to.meta.title) { document.title = to.meta.title } next() }) new Vue({ router, render: h => h(App), }).$mount('#app')
展示最外层的routerview app.vue,布局信息也在此处
"app">class="home-contianer"> logo
menu菜单-核心菜单路由结合menu.vue
class="menu">menu :default-active="$route.path" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose" @select="handleSelect_2" router> "/page1"> class="el-icon-menu"> "title">搜索简历 "/page2"> class="el-icon-menu"> "title"> 人才库 "/page3"> class="el-icon-document"> "title">代理招聘 "/shareResume"> class="el-icon-setting"> "title">分享简历 "/page4"> class="el-icon-setting"> "title">企业账户
路由的配置:router.js
import Vue from "vue"; import VueRouter from "vue-router"; Vue.use(VueRouter); import home from "../page/home.vue";//组件页面1 import page1 from "../page/page1.vue";//组件页面1 import page2 from "../page/page2.vue";//组件页面1 import page3 from "../page/page3.vue";//组件页面1 import page4 from "../page/page4.vue";//组件页面1 const routes = [ { path:'/', redirect: 'home' }, { path:'/home', component:home, meta:{ title:'首页' } }, { path:'/page1', component:page1, meta:{ title:'page1' } }, { path:'/page2', component:page2, meta:{ title:'page2' } }, { path:'/page3', component:page3, meta:{ title:'page3' } }, { path:'/page4', component:page4, meta:{ title:'page4' } } ] var router = new VueRouter({ routes }) export default router
后面在此基础扩展修改即可