vue-pc后台管理系统:搭建项目(一)

首先我处于会用vue的小白状态,但是不怎么会用element框架.特此来学习记录

1.搭建项目

vue create start

手动配置：
需要什么自己选择（上下箭头切换 空格选中 ）
babel:转换es6语法的这个必须要
typescript 看自己需不需要用
router管理路由的也选上
vuex状态管理就看自己需不需要用
css pre样式预处理器这个也加上
linter/Formatter统一代码风格
最后2个分别是单元测试和端对端测试
然后回车确认

选择vue的版本 ,我选择的是2.x
是否选择历史路由,我选择否=hash路由,url上会带有#号
选择css预处理器,我选择less
选择语法检测工具,我选择ESLint + Prettier 能统团队的代码风格
选择语法检查方式 ,我选择Lint on save (保存就检测)
babel,postcss,eslint配置文件存放位置, 我选择in package.json（放在package.json里）
是否保存为未来项目的预配置 ,我选择是的.下一次可以直接用,不需要配置

创建项目成功

目录结构

2.引入element

npm i element-ui -S

3.开始搭建pc管理系统

1.配置路由

使用了异步组件进行引入，在大型应用中，我们可能需要将应用分割成小一些的代码块，并且只在需要的时候才从服务器加载一个模块。为了简化，Vue 允许你以一个工厂函数的方式定义你的组件，这个工厂函数会异步解析你的组件定义。Vue 只有在这个组件需要被渲染的时候才会触发该工厂函数，且会把结果缓存起来供未来重渲染。

import Vue from "vue";
import VueRouter from "vue-router";

Vue.use(VueRouter);

const routes = [
  {
  	//路径
    path: "/",
    //命名路由
    name: "Home",
    // 这个特殊的 `require` 语法将会告诉 webpack
	// 自动将你的构建代码切割成多个包，这些包
	// 会通过 Ajax 请求加载
    component: (resolve) => require(["@/views/Home.vue"], resolve),
  },
];

const router = new VueRouter({
  routes,
});

export default router;

2.App.vue

<template>
  <div id="app">
    <router-view></router-view>
  </div>
</template>

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

3.Home.vue(导航，外层框架)

1.使用布局容器创建外部框架

<el-container>
  <el-aside width="200px">Aside</el-aside>
  <el-container>
    <el-header>Header</el-header>
    <el-main>Main</el-main>
  </el-container>
</el-container>

2.创建左侧路由导航

左侧路由可以是静态写死的，也可以是从接口中获取，简单点，我通过变量进行引入，不和接口挂钩

	<el-aside width="200px">
        <el-radio-group v-model="isCollapse">
          <el-radio-button :label="false">展开</el-radio-button>
          <el-radio-button :label="true">收起</el-radio-button>
        </el-radio-group>
        <el-menu
          default-active="1" //	当前激活菜单的 index
          :collapse-transition="false" //是否开启折叠动画
          class="el-menu-vertical-demo"
          @close="handleClose" //为了不折叠子菜单
          :default-openeds="['0', '1', '2', '3', '4']" //为了显示子菜单
          :collapse="isCollapse" //是否折叠菜单
          ref="menus"
        >  
          <el-submenu index="1">
            <template slot="title">
              <i class="el-icon-location"></i>
              <span slot="title">导航一</span>
            </template>
            <el-menu-item index="1-1">选项1</el-menu-item>
            <el-menu-item index="1-2">选项2</el-menu-item>
            <el-menu-item index="1-3">选项3</el-menu-item>
          </el-submenu>
          <el-menu-item index="2">
            <i class="el-icon-menu"></i>
            <span slot="title">导航二</span>
          </el-menu-item>
          <el-submenu index="4">
            <template slot="title">
              <i class="el-icon-setting"></i>
              <span slot="title">导航四</span>
            </template>
            <el-menu-item index="1-1">选项1</el-menu-item>
          </el-submenu>
        </el-menu>
      </el-aside>

<script>
export default {
  name: "Home",
  data() {
    return {
      //当前激活菜单的 index
      currentRouter: "/first",
      //是否折叠菜单
      isCollapse: false,
      //配置路由
      routeList: [
        {
          name: "导航一",
          url: "first",
          icon: "el-icon-location",
          children: [],
        },
        {
          name: "导航二",
          url: "second",
          icon: "el-icon-menu",
          children: [
            {
              name: "选项1",
              url: "one",
            },
            {
              name: "选项2",
              url: "two",
            },
            {
              name: "选项3",
              url: "thress",
            },
          ],
        },
        {
          name: "导航三",
          url: "third",
          icon: "el-icon-setting",
          children: [],
        },
      ],
    };
  },
  methods: {
  	//为了点击不折叠子菜单
    handleClose(key, keyPath) {
      this.$refs.menus.open(keyPath);
    },
  },
};
</script>

这样左侧菜单静态版就好了，再把路由routeList动态写入页面中

	<el-menu
	      :default-active="currentRouter"
          :collapse-transition="false"
          class="el-menu-vertical-demo"
          @close="handleClose"
          :default-openeds="['0', '1', '2', '3', '4']"
          :collapse="isCollapse"
          ref="menus"
        >
          <div v-for="(item, index) in routeList" :key="item.url">
            <el-menu-item
              v-if="item.children.length == 0"
              :index="'/' + item.url"
            >
              <i :class="item.icon"></i>
              <span slot="title">{{ item.name }}</span>
            </el-menu-item>
            <el-submenu :index="index.toString()" v-else>
              <template slot="title">
                <i :class="item.icon"></i>
                <span slot="title">{{ item.name }}</span>
              </template>
              <el-menu-item
                v-for="itemSub in item.children"
                :key="itemSub.url"
                :index="'/' + itemSub.url"
                >{{ itemSub.name }}</el-menu-item
              >
            </el-submenu>
          </div>
        </el-menu>

简易版动态左侧菜单写好拉~~~