👀 说明

🎲 vue3-lazyly-admin是一个基于Vue3、Vite3、Pina、 ElementUi 构建的极简版中后台模板具体如下：

• 💥使用husky设置了代码提交规范
• 💥eslint、prettier设置代码规范
• 💥基于axios二次封装接口请求，判定浏览器code和后端code（具体需要自己与后端约定）
• 💥使用docker部署具体配置docker文件夹里面（后续会专出文章总结）
• 💥基于Element二次封装后台常用Dialog、FormList、Pagination、TableList
• 💥打包优化ElementUI按需加载、viteImagemin图片压缩（需等待时间比较久、如无严格要求可注释）、viteCompression开启Gzip压缩（服务器需同步设置）、静态分包

🙈 特性

• ⚡️ Vite 3 - 构建工具（就是快！）
• 🖖 Vue 3 - 渐进式 JavaScript 框架
• 🚦 Vue Router - 官方路由管理器
• 📦 Pinia - 值得你喜欢的 Vue Store
• 💻 Element - Element 适配桌面端的组件库
• 🎨 scss - CSS 预处理器
• 🔗 Axios - 一个基于 promise 的网络请求库，可以用于浏览器和 node.js
• 🧰 Husky + Lint-Staged - Git Hook 工具
• 🛡️ EditorConfig + ESLint + Prettier + Stylelint + Airbnb JavaScript Style Guide - 代码规范
• 🔨 Commitizen + Commitlint - 提交规范

🎏 编码风格

• ESLint 配置为 eslint-config-airbnb-base
• Prettier 配置为 eslint-config-prettier
• Stylelint 配置为 stylelint-config-standard

🔨 开发工具

• npm - 包管理器
• Visual Stuido Code 扩展
  • Vite - 自动启动 Vite 服务器
  • Volar - Vue 3 <script setup> IDE 支持
  • EditorConfig for VS Code - 一套用于统一代码格式的解决方案
  • ESLint - 可组装的JavaScript和JSX检查工具
  • Prettier - 代码格式化工具
  • StyleLint - CSS 代码规范工具

📘 克隆、运行、构建

🎈 拉取代码

git clone https://github.com/kongchao517/vue3-lazyly-admin.git

🎈 安装依赖

npm i / yarn

🎈 运行

npm run dev / yarn dev

🎈 构建开发环境

npm run build:dev / yarn build:dev

🎈 构建生产环境

npm run build / yarn build

🎸 自动引入ref、reactive......

yarn add unplugin-auto-import

vite.config.js

import AutoImport from 'unplugin-auto-import/vite';
    plugins:[ AutoImport({
        dts: 'auto-imports.d.ts',
      }),]

删除无引入ref、reactive...eslint警告 yarn add vue-global-api .eslintrc.js

extends: [
    'vue-global-api',
    ]

main.js

import 'vue-global-api';

⚡docker发布到服务器

本篇文字详细讲述了vue3项目使用docker上传到服务器https://juejin.cn/post/7233298261473804343

还请顺手点个赞！！🙏🙏🙏🙏🙏🙏