adminsys-vue3-ts-vite v1.0.0

AdminSys-vue3-ts-vite

基于Vue3和vite搭建前端web开发脚手架；集成 TypeScript + Vite + Vue3 + Vue Router + Vuex + Element Plus + Axios + Sass + Jest；强制使用 Eslint + Prettier + editor 代码规范。

AdminSys目录

│─ public/ │─ src/ │ │─ api/ // api 管理及 axios 配置 │ │─ assets/ // 静态资源目录 │ │─ common/ // 通用类库目录 │ │─ components/ // 公共组件目录 │ │─ router/ // router 配置目录 │ │─ store/ // vuex 状态管理目录 │ │─ style/ // 通用 CSS 目录 │ │─ utils/ // 工具函数目录 │ │─ views/ // 页面组件目录 │ │── App.vue // vue 根组件 │ │── main.ts // 入口文件 │ └── shims-vue.d.ts │─ tests/ // 单元测试目录 │ └── Test.spec.ts // Test 组件测试 │── index.html // index.html │── tsconfig.json // TypeScript 配置文件 │── vite.config.ts // Vite 配置文件 │── .editorconfig // EditorConfig 配置 │── .prettierrc // Prettier 配置 │── .eslintrc.js // Eslint 配置 └── package.json // npm 包管理

代码规范

• EditorConfig 注意： VSCode 使用 EditorConfig 需要去插件市场下载插件 EditorConfig for VS Code ； JetBrains 系列（WebStorm、IntelliJ IDEA 等）则不用额外安装插件，可直接使用 EditorConfig 配置。

• Prettier 注意： 格式化所有文件（. 表示所有文件）$ npx prettier --write .； VSCode 编辑器使用 Prettier 配置需要下载插件 Prettier - Code formatter ； JetBrains 系列编辑器（WebStorm、IntelliJ IDEA 等）则不用额外安装插件，可直接使用 Prettier 配置。

• Eslint 注意： VSCode 在 settings.json 设置文件中，增加以下代码：

"editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
 }

WebStorm 打开设置窗口，搜索eslint，找到Language & Frameworks / JavaScript / Code Quality Tools / Eslint 勾选Automatic Eslint xxxx 和 Run eslint xxxxx，最后点击 Apply -> OK

项目启动

1. 使用 VsCode 或 WebStorm 开发，安装/配置 Eslint、Prettier、EditorConfig

2. 安装开发依赖包：$ npm install

其他运行命令：

• 开发环境启动：$ npm run dev

• AdminSys打包：$ npm run build

• 通过TypeScript打包：$ npm run build-tsc

• 本地预览生产包：$ npm run serve

• prettier格式化：$ npm run format

• Eslint校验：$ npm run lint

• Eslint自动修复：$ npm run lint-fix

• 运行Jest单元测试：$ npm run test