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 开发过程

使用 vue-cli 创建项目
对比之前项目，使用 yarn 添加需要的插件和依赖,推荐使用 yarn 包管理工具，yarn install 时会自动更新相关包，避免报错。详见使用方法 | Yarn 中文文档
vue.config.js 配置
vuex 模块化配置
mock 服务配置
main.js 中引入库或插件
vue.config.js 中让 scss 变量能够同时在 scss 和 js 中使用、全局引入 jquery
路由钩子中权限判断
axios封装、api统一管理
登录页面重构

浅陌初心 / vue3-admin-element相关推荐

vue3 使用Element Plus ＜script lang=“ts“ setup＞加上lang=“ts“后编译错误
vue3 使用Element Plus <script lang="ts" setup>加上lang="ts"后编译错误目录 vue3 使用Ele ...
Vue3.x+Element Plus仿制Acro Design简洁模式分页器组件
Vue3.x+Element Plus仿制Acro Design简洁模式分页器组件开发中难免会遇到宽度很窄的列表需要使用分页器的情况,这时若使用Element Plus组件的分页器会导致分页器内容超 ...
vue3+ts+element封装一个简易的curd
vue3+ts+element封装一个简易的curd 闲来无趣做一个简单的table封装,不喜勿喷首先创建一个公共的Table.vue/pagination.vue文件 Table.vue < ...
Vue3和element plus 中ref用法元素实例操作
在 vue3 中,组件的逻辑可以放在 setup 函数里面,但是 setup 中不再有 this,所以 vue2 中的 this.$refs 的用法在 vue3 中无法使用. 用法是: element ...
vue3 admin 后台管理项目小计
Naive UI全局挂载useDialog.useMessage App.vue <n-config-provider :locale="locale" :date-loca ...
vue3+ts+element 简单的登陆案例（一）
第一步创建vue3项目项目名字不能使用驼峰命名创建好项目目录我们需要引入自己的css文件来重订样式再index.html 文件夹中引入css html, body, div, span, a ...
Vue3 封装 Element Plus Menu 无限级菜单组件【建议收藏】
本文分别使用 SFC(模板方式)和 tsx 方式对 Element Plus el-menu 组件进行二次封装,实现配置化的菜单,有了配置化的菜单,后续便可以根据路由动态渲染菜单. 1 数据结构定义 ...
基于Vue3，Element Plus的一款表单设计器，支持生成Element和Antd样式的表单
简介 FormMaking v3 是基于 Vue 3.x 和 Element Plus 开发的可视化/低代码表单设计器,可以生成 Element 和 Antd 样式的表单. FormMaking 目前 ...
vue3 使用element表格导出excel表格（带图片）
如想要实现导出功能,并且可以导出图片,如下图效果: 下面直接上步骤: 下载安装插件: 安装命令:npm install js-table2excel 引入插件: import table2excel ...

浅陌初心 / vue3-admin-element