【VUE】demo01-VUE做后台管理系统页面实例-创建基本环境+页面布局

清晨敲代码

已于 2022-02-07 21:17:58 修改

阅读量3.5k

点赞数 2

分类专栏： vue 文章标签： vue.js 前端 javascript elementui

于 2022-02-07 21:15:10 首次发布

本文链接：https://blog.csdn.net/vaevaevae233/article/details/122772304

版权

vue 专栏收录该内容

3 篇文章 1 订阅

订阅专栏

工具：Visual Studio Code + Vue + Vue cil2 + Vuex + Vue Router + ElementUI + axios +

前提：记录一下使用vue cil2脚手架做后台管理页面（仅学习用户管理的几个页面和整个框架，为了做后续的项目），是仿照学习macrozheng 的 mall 项目的后台管理前端系统学习的，因为对vue只了解一点点，熟练都谈不上，但是要做项目就需要把前端也实现一下，所以学习一下大概的前端内容框架，具体只记录仿照过程的步骤，以及遇到不会的 css 样式或vue方法时记录的问题。

全程只记录学习步骤，想要专精学习的小可爱可以再看看别的学习文章，或者给我提供一下建议与指点，三克油~~~

1.1vue cil2创建初始化项目

执行下面的语句，会在当前文件路径中新建对应项目名称的文件夹，并在里面添加对应的配置文档结构。所以要注意执行语句的文件路径。

vue init webpack <项目名称>

问题：

执行这个语句的时候有可能会因为网络不好（或者是下载某个包时连不上需要翻墙）无法通过线上的工具程序创建vue项目，就像下面：

我一次后没成功过，于是就是用离线的方式创建，可以看这个文章，

ue-cli Failed to download repo vuejs-templates/webpack连接超时解决办法

里面描述得非常清楚，这里就不多描述了，放好需要的包之后，执行下面的语句，代表离线使用本地工具：

vue init webpack <项目名称> --offline

1.2引入项目使用的模块并运行

我们是仿照 mall 项目学习的，所以先将他需要的包及版本加入并install，需要的包都在 package.json 文件里面：

之后，我们使用命令进行安装这些包，注意需要进入我们的项目路径中再执行，例如我们这里就需要先 cd demo02 ，之后再执行下面语句：

npm install

然后我们运行程序，看是否能够启动成功，执行下面的语句启动，这个是运行开发的配置文件（待深入学习相关配置）

npm run dev

1.3修改静态路由router

项目暂时没有什么问题，环境也准备好了，那么就开始往里面添加内容，首先先将路由router加进去，我们已经加入包了，现在就是进行使用。

首先创建vue-router需要的文件，在 src 文件夹中创建文件夹router，在 router 文件夹中创建文件 index.js，在index.js中添加路由的使用：

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)


export const constantRouterMap = [
  {
    path: '',
    component: () => import('@/components/HelloWorld'),
    name: 'home',
  }
]

export default new Router({
  // mode: 'history', //后端支持可开
  scrollBehavior: () => ({ y: 0 }),
  routes: constantRouterMap
})

之后需要修改我们vue项目的main.js App.vue 内容，在里面加入 router对象和router-view：

//main.js 文件-----------------------------------

import Vue from 'vue'
import App from './App'
import router from './router'  //添加的


Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,//添加的
  components: { App },
  template: '<App/>'
})


//App.vue 文件----------------------------------------------------
<template>
  <div id="app">
    <!-- <img src="./assets/logo.png"> -->//去掉的
    <!-- <HelloWorld/> -->//去掉的
    <router-view/>//添加的
  </div>
</template>

<script>
// import HelloWorld from './components/HelloWorld'//去掉的

export default {
  name: 'App',
  components: {
    // HelloWorld//去掉的
  }
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

修改完啦，如果还是运行时的状态，那么每次修改文件后保存都会重新编译一下代码，就可直接查看浏览器，如果没有就重新执行 npm run dev 语句，因为我们在 App.js 文件中注释了 img ，所以访问时会没有图片，就像下面，就代表成功啦：

1.4自定义的layout布局

我们做后台大部分都是：左侧导航栏+顶部导航面包屑+中间容器，因为mall项目米有使用elementUI的Container 布局容器，是自己写的css布局，所以我也是仿照他的进行实现的。

首先先了解到layout模块的文件结构：

这样了解到后，我们就从小结构往大结构慢慢添加，从SidebarItem.vue文件开始，先将文件夹和文件都创建完成，然后添加进去代码：

// SidebarItem.vue -----------------------
<template>
  <div class="menu-wrapper">
      <el-submenu index="1">
        <template slot="title">
          <i class="el-icon-location"></i>
          <span>导航一</span>
        </template>
        <el-menu-item-group>
          <template slot="title">分组一</template>
          <el-menu-item index="1-1">选项1</el-menu-item>
          <el-menu-item index="1-2">选项2</el-menu-item>
        </el-menu-item-group>
        <el-menu-item-group title="分组2">
          <el-menu-item index="1-3">选项3</el-menu-item>
        </el-menu-item-group>
        <el-submenu index="1-4">
          <template slot="title">选项4</template>
          <el-menu-item index="1-4-1">选项1</el-menu-item>
        </el-submenu>
      </el-submenu>
      <el-menu-item index="2">
        <i class="el-icon-menu"></i>
        <span slot="title">导航二</span>
      </el-menu-item>
      <el-menu-item index="3" disabled>
        <i class="el-icon-document"></i>
        <span slot="title">导航三</span>
      </el-menu-item>
      <el-menu-item index="4">
        <i class="el-icon-setting"></i>
        <span slot="title">导航四</span>
      </el-menu-item>
  </div>
</template>

<script>
export default {
  name: "SidebarItem",
};
</script>

// Sidebar文件夹 index.vue -----------------------
<template>
    <el-menu
      mode="vertical"
      background-color="#304156"
      text-color="#bfcbd9"
      active-text-color="#409EFF"
    >
      <sidebar-item></sidebar-item>
    </el-menu>
</template>

<script>
import SidebarItem from './SidebarItem'

export default {
  components: { SidebarItem },
}
</script>


// AppMain.vue -----------------------
<template>
  <section class="app-main">
    <transition name="fade" mode="out-in">
      <!-- 这里是子路径view，也就是会将子页面的内容展示在这里 -->
      <router-view></router-view>
    </transition>
  </section>
</template>

<script>
export default {
  name: 'AppMain',
  computed: {
  }
}
</script>

// components 文件夹下的 index.js -----------------------
export { default as Navbar } from './Navbar'
export { default as Sidebar } from './Sidebar'
export { default as AppMain } from './AppMain'

// Navbar.vue---------------------------
<template>
  <el-menu class="navbar" mode="horizontal">
    顶部
  </el-menu>
</template>
<script>
export default {
  components: {
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.navbar {
  height: 50px;
  line-height: 50px;
  border-radius: 0px !important;
}
</style>

// Layout.vue -----------------------
<template>
  <div class="app-wrapper" :class="classObj">
    <!-- 左侧导航栏 -->
    <sidebar class="sidebar-container"></sidebar>
    <div class="main-container">
      <!-- 上部导航栏 -->
      <navbar></navbar>
      <!-- 中间内容 -->
      <app-main></app-main>
    </div>
  </div>
</template>

<script>
import { Navbar, Sidebar, AppMain } from "./components";

export default {
  name: "layout",
  components: {
    Navbar,
    Sidebar,
    AppMain,
  },
  computed: {
    classObj() {
      return {
        hideSidebar: true,
        withoutAnimation: false,
        mobile: false,
      };
    },
  },
};
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
 @import "src/styles/mixin.scss";
  .app-wrapper {
    @include clearfix;
    position: relative;
    height: 100%;
    width: 100%;
  }
</style>

全部修改完毕后，逐个保存，发现终端里面报错了：

我们将 mall 项目中的 css 相关文件复制到同样的位置，什么算 css 相关文件？我们看

添加之后，需要暴露到主文件中，这样才能够使用，那么就在main.js文件中添加如下代码，因为我们用到了 elementUI 的导航栏等组件，所以也要引入 element UI：

import Vue from 'vue'
import App from './App'
import router from './router'


import ElementUI from 'element-ui'             //添加的
import 'element-ui/lib/theme-chalk/index.css'             //添加的
import locale from 'element-ui/lib/locale/lang/zh-CN' // lang i18n             //添加的

import '@/styles/index.scss' // global css             //添加的

Vue.config.productionTip = false
Vue.use(ElementUI, { locale })              //添加的

/* eslint-disable no-new */
new Vue({
  el: '#app',router,
  components: { App },
  template: '<App/>'
})

进行编译后还是报错，发现 Layout.vue 文件中使用了 mixin.scss ，我们将这个文件拷贝进入，并import 到 index.scss 中，再进行编译就发现成功！

页面中就长这个样子啦：