浅陌初心 / vue3-admin-element

1 介绍

基于 vue-cli + vue3.x + vue-router4.x + vuex4.x + aixos + element plus + iconfont 的基础后台管理系统模板

1.1 目录结构

本项目已经为你生成了一个完整的开发框架，提供了涵盖中后台开发的各类功能和坑位，下面是整个项目的目录结构。

├── build                      # 构建相关
├── mock                       # 项目mock 模拟数据
├── plop-templates             # 基本模板
├── public                     # 静态资源
│   │── favicon.ico            # favicon图标
│   └── index.html             # html模板
├── src                        # 源代码
│   ├── api                    # 所有请求
│   ├── assets                 # 主题 字体等静态资源
│   ├── components             # 全局公用组件
│   ├── directive              # 全局指令
│   ├── filters                # 全局 filter
│   ├── icons                  # 项目所有 svg icons
│   ├── lang                   # 国际化 language
│   ├── layout                 # 全局 layout
│   ├── router                 # 路由
│   ├── store                  # 全局 store管理
│   ├── styles                 # 全局样式
│   ├── utils                  # 全局公用方法
│   ├── vendor                 # 公用vendor
│   ├── views                  # views 所有页面
│   ├── App.vue                # 入口页面
│   ├── main.js                # 入口文件 加载组件 初始化等
│   └── permission.js          # 权限管理
├── tests                      # 测试
├── .env.xxx                   # 环境变量配置
├── .eslintrc.js               # eslint 配置项
├── .babelrc                   # babel-loader 配置
├── .travis.yml                # 自动化CI配置
├── vue.config.js              # vue-cli 配置
├── postcss.config.js          # postcss 配置
└── package.json               # package.json

2 风格指南

2.1 Component

所有的 Component 文件都是以大写开头 (PascalCase)，这也是官方所推荐的。

但除了 index.vue。

例子：

• @/components/BackToTop/index.vue
• @/components/Charts/Line.vue
• @/views/example/components/Button.vue

2.2 JS 文件

所有的.js 文件都遵循横线连接 (kebab-case)。

例子：

• @/utils/open-window.js
• @/views/svg-icons/require-icons.js
• @/components/MarkdownEditor/default-options.js

2.3 Views

在 views 文件下，代表路由的.vue 文件都使用横线连接 (kebab-case)，代表路由的文件夹也是使用同样的规则。

例子：

• @/views/svg-icons/index.vue
• @/views/svg-icons/require-icons.js

使用横线连接 (kebab-case)来命名 views 主要是出于以下几个考虑。

• 横线连接 (kebab-case) 也是官方推荐的命名规范之一 文档
• views 下的.vue 文件代表的是一个路由，所以它需要和 component 进行区分(component 都是大写开头)
• 页面的 url 也都是横线连接的，比如https://www.xxx.admin/export-excel，所以路由对应的view应该要保持统一
• 没有大小写敏感问题

3 开发过程

1. 使用 vue-cli 创建项目

2. 对比之前项目，使用 yarn 添加需要的插件和依赖,推荐使用 yarn 包管理工具，yarn install 时会自动更新相关包，避免报错。详见 使用方法 | Yarn 中文文档

3. vue.config.js 配置

4. vuex 模块化配置

5. mock 服务配置

6. main.js 中引入库或插件

7. vue.config.js 中让 scss 变量能够同时在 scss 和 js 中使用、全局引入 jquery

8. 路由钩子中权限判断

9. axios封装、api统一管理

10. 登录页面重构