| Vue + Element | 您所在的位置：网站首页 › openstack项目经验怎么写 › Vue + Element |
Vue + Element
|
这篇主要讲解 项目搭建 + 后台⾸⻚布局实现 ： 整体效果 
后台首页按布局一共包含3个部分: 1、左侧栏部分 2、头部部分 3、内容部分。 说明 在整个后台管理系统中，左侧栏和头部部分是应该一直在页面中展示的，所以对于每个页面这两个组件都应该存在,而 内容部分 才是通过router的跳转而跳到不同的组件。 下面先把整个项目搭建一下，然后再来讲解上面三个部分 一、项目搭建 1、环境搭建 #1、安装node （node -v查询版本号） node 安装 #2、安装淘宝镜像 npm install -g cnpm --registry=https://registry.npm.taobao.org #3、安装 webpack，以全局的方式安装 npm install webpack -g #4、全局安装vue以及脚手架vue-cli npm install @vue/cli -g --unsafe-perm #5、创建vue项目 mall-manage-system是你起的项目名称 vue create mall-manage-system #6、运行当前项目 这个整个项目就搭建好了 npm run serve在安装中可能会存在的问题 1、node升级后，项目中的node-sass报错的问题 2、npm install 报错，提示 gyp ERR! stack Error: EACCES: permission denied 解决方法 2、项目初期搭建如果上面都安装成功，那么通过 npm run serve 就可用启动该项目了。这里把简单说明下一些公共配置 1、main.js(主文件) import Vue from 'vue' import App from './App.vue' import router from './router' //引入 vue-router import store from './store' //引入 vuex // 全局配置 import '@/assets/scss/reset.scss' //全局样式 import 'element-ui/lib/theme-chalk/index.css' //element-ui样式 import http from '@/api/config' //axios import './mock' // mockjs // 第三方包 import ElementUI from 'element-ui' Vue.use(ElementUI) Vue.prototype.$http = http Vue.config.productionTip = false new Vue({ router, store, render: h => h(App) }).$mount('#app')2、router(路由跳转配置) router作用：简单理解就是帮助组件之间跳转用的。 这里为了性能都采用懒加载，还有这里不管先登陆登陆页面 默认跳转组件为 Main.vue import Vue from 'vue' import VueRouter from 'vue-router' Vue.use(VueRouter) // 完整路由代码 export default new VueRouter({ routes: [ { path: '/', component: () => import('@/views/Main'), children: [ { path: '/', name: 'home', component: () => import('@/views/Home/Home'), }, { path: '/user', name: 'user', component: () => import('@/views/UserManage/UserManage'), }, { path: '/mall', name: 'mall', component: () => import('@/views/MallManage/MallManage'), }, { path: '/page1', name: 'page1', component: () => import('@/views/Other/PageOne'), }, { path: '/page2', name: 'page2', component: () => import('@/views/Other/PageTwo'), }, ] } ] })3、vuex(存储共享数据) vuex作用：vuex解决了组件之间同一状态的共享问题。 export default { //存储数据 state: { isCollapse: false }, //调用方法 mutations: { collapseMenu(state) { state.isCollapse = !state.isCollapse } }, actions: {} }这里先只设定一个全局数据isCollapse，用于侧边栏是否水平展开。 4、axios axios作用：axios主要是用于向后台发起请求的，还有在请求中做更多是可控功能。 import axios from 'axios' // 创建一个axios实例 const service = axios.create({ // 请求超时时间 timeout: 3000 }) export default service其它的这里就不详细讲解了，在文章最下面会附上github地址 二、Main.vue这个是后台系统的主组件，它采用的布局是 element-ui的 Container 布局容器 Container 布局容器 import CommonAside from '../components/CommonAside' import CommonHeader from "../components/CommonHeader"; export default { components: { CommonAside, CommonHeader } }这样整个后台管理系统的整个轮廓就定下来了，接下来通过路由的切换的组件展示在router-view的位置。 三、左侧栏部分(CommonAside.vue)它采用的布局是 element-ui的 NavMenu 导航菜单 偶囧 偶囧后台管理系统 {{ item.label }} {{ item.label }} {{ subItem.label }} export default { //计算属性 computed: { //没有子菜单 noChildren() { return this.menu.filter(item => !item.children) }, //有子菜单 (这样设置会有一个问题 就是有子菜单的 永远会在没有子菜单的下面） hasChildren() { return this.menu.filter(item => item.children) }, isCollapse() { // 这里的数据就是从vuex取得 return this.$store.state.tab.isCollapse } }, data() { return { menu: [ { path: '/user', name: 'user', label: '用户管理', icon: 'user', url: 'UserManage/UserManage' }, { label: '其他', icon: 'location', children: [ { path: '/page1', name: 'page1', label: '页面1', icon: 'setting', url: 'Other/PageOne' }, { path: '/page2', name: 'page2', label: '页面2', icon: 'setting', url: 'Other/PageTwo' } ] } ] } }, methods: { //跳转路由 根据名称跳转 clickMenu(item) { this.$router.push({ name: item.name }) } } } 四、header部分(CommonHeader.vue)这里通过点击那个图标来控制：左侧栏是否水平折叠收起菜单，所以这里来修改vuex中 isCollapse 数据。 它采用的布局是 element-ui的 Dropdown 下拉菜单 首页它采用的布局是 element-ui的 Card 卡片 + Layout 布局 Admin 超级管理员 上次登录时间：2019-10-20 上次登录地点：北京 ￥ {{ item.value }} {{ item.name }} export default { data() { return { userImg: require('../../assets/images/user.png'), countData: [], tableData: [], tableLabel: { name: '课程', todayBuy: '今日购买', monthBuy: '本月购买', totalBuy: '总购买' } } }, methods: { getTableData() { this.$http.get('/home/getData').then(res => { res = res.data this.tableData = res.data.tableData }) } }, //一进组件就会去请求后端接口 获取首页数据 created() { this.getTableData() } }Github地址 mall-manage-system 写在最后这篇贴子到这里就结束了，最后，希望看这篇帖子的朋友能够有所收获。 都到这了记得三连支持一下吧。 ------------------------------------------------- 完整版文档下载方式： 这些资料，对于从事【软件测试】的朋友来说应该是最全面最完整的备战仓库，这个仓库也陪伴我走过了最艰难的路程，希望也能帮助到你！以上均可以分享。
在评论区和我互动交流或者私❤我【软件测试学习】领取即可，拿走不谢。 -------------------------------------------------
|
【本文地址】