Vue + Element-ui实现后台管理系统---项目搭建 + ⾸⻚布局实现

目录：导读

项目搭建 + ⾸⻚布局实现

一、项目搭建

1、环境搭建

2、项目初期搭建

二、Main.vue

三、左侧栏部分(CommonAside.vue)

四、header部分(CommonHeader.vue)

五、Home.vue

写在最后

---

项目搭建 + ⾸⻚布局实现

这篇主要讲解 项目搭建 + 后台⾸⻚布局实现 ：

整体效果

后台首页按布局一共包含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'),
        },