像百度重新提交网站,ui设计较好的网站,oa办公系统软件多少钱,通信网络维护是做什么的这一期目标是把系统的布局给搭建起来#xff0c;采用一个非常简单的后端管理风格#xff0c;可以参考官方的页面 https://element.eleme.cn/#/zh-CN/component/container
下面我们开始搭建#xff0c;首先#xff0c;安装一下vue-router#xff0c;element-ui
npm insta…这一期目标是把系统的布局给搭建起来采用一个非常简单的后端管理风格可以参考官方的页面 https://element.eleme.cn/#/zh-CN/component/container
下面我们开始搭建首先安装一下vue-routerelement-ui
npm install vue-router3
npm install element-ui然后在src目录下创建layouts文件夹和router文件夹
在layouts文件夹下建立Layout.vue文件
templateel-container classcontainerel-aside width200px stylebackground-color: rgb(229,227,238)el-menu :default-activeactiveIndex active-text-color#BAA7FFFF classel-menu-verticalel-menu-item index/dashboard clicknavigateTo(/dashboard)Dashboard/el-menu-itemel-menu-item index/users clicknavigateTo(/users)Users/el-menu-item!-- 其他菜单项 --/el-menu/el-asideel-containerel-header classheaderdiv classlogoMy Admin/div/el-headerel-main classmainrouter-view/router-view/el-main/el-container/el-container
/templatescript
export default {data() {return {activeIndex: /dashboard};},methods: {navigateTo(path) {console.log(this.activeIndex);if (this.$route.path ! path) {this.activeIndex path;this.$router.push(path);}}}
};
/scriptstyle scoped
.container{height: 100vh;border: 1px solid #eee;
}.header {background-color: #ffffff;text-align: center;line-height: 60px;border-bottom: 1px solid #ebeef5;
}.logo {font-size: 20px;font-weight: bold;
}.main {padding: 20px;
}
/style
在router下建立index.js文件
import Vue from vue;
import Router from vue-router;
import Layout from /layouts/Layout;// 引入页面组件
import Dashboard from /views/Dashboard;
import Users from /views/Users;Vue.use(Router);const routes [{path: /,component: Layout,redirect: /dashboard,children: [{path: dashboard,component: Dashboard,name: Dashboard},{path: users,component: Users,name: Users}// 其他子路由]},// 其他路由
];const router new Router({mode: history,routes
});export default router;
因为想访问 / 直接转到 /dashboard ,所以有这行设置 redirect: /dashboard,
还需要新建views文件夹新增两个vue文件Dashboard.vue和Users.vue
!-- Dashboard.vue --
templatediv classNamedashboardh1Dashboard/h1!-- Dashboard 内容 --/div
/templatescript
export default {name: Dashboard
};
/scriptstyle scoped
.dashboard {/* 样式 */
}
/style!-- Users.vue --
templatediv classusersh1Users/h1!-- Users 内容 --/div
/templatescript
export default {name: Users
};
/scriptstyle scoped
.users {/* 样式 */
}
/style
修改main.js 引入上面我们新增的内容
import Vue from vue
import App from ./App.vue
import ElementUI from element-ui
import element-ui/lib/theme-chalk/index.css
import router from ./routerVue.use(ElementUI)Vue.config.productionTip falsenew Vue({router,render: h h(App),
}).$mount(#app)运行程序:
npm run serve效果
