目录结构;根据需求修改、创建对应目录;
src 应用部署目录├─api 接口├─assets 公共文件│ ├─theme.scss 主题样式库│ ├─images 默认图片(默认头像、登录图片、背景图片等)│ ├─style 样式优化区│ │ ├─index.scss 后台基础样式│ │ ├─card.scss 后台桌面和控制台各种卡片样式├─components 组件│ ├─framework 框架基础组件 │ │ ├─Topcrumb.vue 框架头部组件│ │ ├─tagsview.vue 框架头部标签组件│ │ ├─TreeMenu.vue 框架右侧菜单组件│ ├─form 表单组件│ │ ├─JmInput.vue Input文件(文本、多行文本、数字、密码框、滑块、颜色选择、图标选择、评分组件、单图上传、多图上传、单文件上传、多文件上传、富文本、开关) │ │ ├─JmEnum.vue 选择框文件(日期、日期+时间、时间、时间范围选择、城市(三级联动、单城市等)、多选、单选、普通下拉、动态下拉(分页、自定义格式))│ │ ├─list.vue 列表文件(键值对)│ ├─list 列表页组件│ │ ├─index.vue 列表页组件(整合快捷搜索、快捷按钮、表格、分页) │ │ ├─search.vue 快捷搜索文件(整合搜索表单和搜索格式) │ ├─table 表格组件│ │ ├─index.vue 列表页组件 (表格的每个字段如何显示) │ │ ├─JmTb.vue 字段文件(selection框、文本、数字、图标、格式化日期、自定义单位¥、链接、内容截断、评分、状态、开关、多文件和单文件、多图和单图、默认、自定义格式) ├─router 路由管理├─store │ ├─index.js 用户状态文件(获取用户信息、头部标签信息)│ ├─mutations.js 业务层数据提交├─utils │ ├─request.js axios二次封装文件(请求拦截器、响应拦截器)│ ├─storage.js Storage二次封装(设置缓存、清空缓存、获取缓存、删除缓存)│ ├─utils.js 工具封装(时间格式化、数字格式化、返回数据类型、判断是否为空、颜色混合)├─views 视图层
3、布局和图标组件
3.1 布局
先创建views目录和修改router路由、并创建views/index/index.vue页面
然后改app.vue;
<template>
<router-view />
</template>
然后改路由
import { createRouter, createWebHashHistory } from 'vue-router'
// import Home from '../components/Home.vue'const routes = [{name: 'Index',path: '/',meta: { title:'首页' },component:() => import('../views/index/index.vue')} ]const router = createRouter({history: createWebHashHistory(),routes
})
export default router
然后找一下element-plus的布局容器
我选择
代码
<template><div class="common-layout"><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></div></template>
就是这样,布局就搞定了;
接下来打算弄一个图标组件