项目搭建 + ⾸⻚布局实现
上篇对该项目做了个总述 :Vue + Element-ui实现后台管理系统(1) --- 总述
这篇主要讲解 项目搭建 + 后台⾸⻚布局实现 :
整体效果

后台首页按布局一共包含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 布局容器
这样整个后台管理系统的整个轮廓就定下来了,接下来通过路由的切换的组件展示在router-view
的位置。
三、左侧栏部分(CommonAside.vue)
它采用的布局是 element-ui的 NavMenu 导航菜单
偶囧
偶囧后台管理系统
{{ item.label }}
{{ item.label }}
{{ subItem.label }}
四、header部分(CommonHeader.vue)
这里通过点击那个图标来控制:左侧栏是否水平折叠收起菜单,所以这里来修改vuex中 isCollapse 数据。
它采用的布局是 element-ui的 Dropdown 下拉菜单
首页
个人中心
退出
五、Home.vue
它采用的布局是 element-ui的 Card 卡片 + Layout 布局
Admin
超级管理员
上次登录时间:2019-10-20
上次登录地点:北京
¥ {{ item.value }}
{{ item.name }}