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>
简易版动态左侧菜单写好拉~~~