From 1deb1ea0bf5a103d397efbe2d7b7573079786b2a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=B8=80=E7=9E=A5?= Date: Mon, 13 Feb 2023 10:18:24 +0800 Subject: [PATCH] init --- .env | 4 + .env.development | 2 + .env.production | 1 + .eslintignore | 16 + .eslintrc.js | 78 + .gitignore | 31 + .husky/commit-msg | 6 + .husky/common.sh | 9 + .husky/lintstagedrc.js | 7 + .husky/pre-commit | 8 + .npmrc | 8 + .prettierignore | 18 + .vscode/extensions.json | 3 + CHANGELOG.md | 35 + LICENSE | 21 + README.md | 245 + commitlint.config.js | 45 + config/constant.ts | 33 + config/themeConfig.ts | 30 + config/vite/optimizer.ts | 27 + config/vite/plugin/autoImport.ts | 11 + config/vite/plugin/component.ts | 41 + config/vite/plugin/compress.ts | 17 + config/vite/plugin/index.ts | 44 + config/vite/plugin/mock.ts | 23 + config/vite/plugin/styleImport.ts | 78 + config/vite/plugin/svgIcons.ts | 17 + config/vite/plugin/visualizer.ts | 17 + config/vite/proxy.ts | 30 + index.html | 13 + mock/_createProdMockServer.ts | 18 + mock/_util.ts | 60 + mock/common.ts | 32 + mock/home.ts | 89 + mock/table.ts | 119 + mock/user.ts | 98 + package.json | 99 + pnpm-lock.yaml | 9354 +++++++++++++++++ postcss.config.js | 5 + prettier.config.js | 10 + public/favicon.ico | Bin 0 -> 16958 bytes src/App.vue | 26 + src/api/common/index.ts | 13 + src/api/common/model.d.ts | 14 + src/api/global.d.ts | 6 + src/api/home/index.ts | 13 + src/api/home/model.d.ts | 32 + src/api/sys/account/index.ts | 18 + src/api/sys/account/model.d.ts | 16 + src/api/user/index.ts | 13 + src/api/user/model.d.ts | 16 + src/assets/images/Icon _Search.png | Bin 0 -> 535 bytes src/assets/images/Icon_Block.png | Bin 0 -> 1454 bytes src/assets/images/Icon_contract.png | Bin 0 -> 1843 bytes src/assets/images/Icon_node.png | Bin 0 -> 822 bytes src/assets/images/Icon_trading.png | Bin 0 -> 1886 bytes src/assets/images/avatar.png | Bin 0 -> 19262 bytes src/assets/images/login_bg.png | Bin 0 -> 94992 bytes src/assets/images/logo.png | Bin 0 -> 12559 bytes src/components/Alert/index.vue | 20 + src/components/Breadcrumb/index.vue | 46 + src/components/Icon/index.vue | 54 + src/components/Modal/index.vue | 49 + src/components/Table/index.vue | 220 + src/components/TableFilter/index.vue | 132 + src/components/Upload/index.vue | 96 + src/directives/index.ts | 11 + src/directives/permission.ts | 32 + src/directives/role.ts | 51 + src/enums/authEnum.ts | 27 + src/hooks/useBreadcrumbTitle.ts | 38 + src/hooks/useECharts.ts | 108 + src/hooks/useEventListener.ts | 58 + src/hooks/useMessage.tsx | 125 + src/hooks/usePermission.ts | 35 + src/hooks/useRole.ts | 27 + src/hooks/useTimeout.ts | 45 + src/hooks/useTitle.ts | 23 + src/layouts/BasicLayout/components/Header.vue | 50 + .../BasicLayout/components/RightContent.vue | 88 + .../BasicLayout/components/SideMenu.tsx | 125 + .../BasicLayout/components/constant.ts | 31 + src/layouts/BasicLayout/components/index.less | 30 + .../BasicLayout/components/videoBox.vue | 50 + src/layouts/BasicLayout/index.vue | 31 + src/layouts/BasicLayout/utils/index.ts | 47 + src/layouts/BasicLayout/utils/typings.ts | 59 + src/layouts/BlankLayout.vue | 3 + src/main.ts | 30 + src/plugin.ts | 62 + src/router/index.ts | 12 + src/router/permission.ts | 49 + src/router/router.config.ts | 116 + src/shims-vue.d.ts | 5 + src/store/index.ts | 9 + src/store/modules/home.ts | 45 + src/store/modules/permission.ts | 134 + src/store/modules/sysAccount.ts | 62 + src/store/modules/user.ts | 69 + src/styles/antd.less | 5 + src/styles/common.less | 88 + src/styles/index.less | 5 + src/styles/public.less | 33 + src/styles/transition.less | 82 + src/styles/variables.less | 5 + src/utils/auth.ts | 13 + src/utils/crypto.ts | 32 + src/utils/dateUtil.ts | 21 + src/utils/echarts.ts | 19 + src/utils/http.ts | 106 + src/utils/index.ts | 91 + src/utils/is.ts | 99 + src/utils/mitt.ts | 101 + src/utils/permission.ts | 67 + src/utils/validate.ts | 30 + src/views/404.vue | 7 + src/views/account/constant.ts | 29 + src/views/account/index.vue | 128 + src/views/home/components/DataOverview.vue | 108 + src/views/home/components/TradingHistory.vue | 109 + src/views/home/constant.tsx | 50 + src/views/home/index.vue | 35 + src/views/login/Form.vue | 158 + src/views/login/index.vue | 43 + src/views/others/about/index.vue | 128 + src/views/others/antdv/index.vue | 8 + src/views/redirect/index.tsx | 16 + src/views/table-demo/constant.tsx | 64 + src/views/table-demo/index.vue | 171 + src/views/website/constant.tsx | 47 + src/views/website/index.vue | 138 + tsconfig.json | 42 + types/common.d.ts | 16 + types/global.d.ts | 49 + types/index.d.ts | 27 + vite.config.ts | 77 + 136 files changed, 15520 insertions(+) create mode 100644 .env create mode 100644 .env.development create mode 100644 .env.production create mode 100644 .eslintignore create mode 100644 .eslintrc.js create mode 100644 .gitignore create mode 100644 .husky/commit-msg create mode 100644 .husky/common.sh create mode 100644 .husky/lintstagedrc.js create mode 100644 .husky/pre-commit create mode 100644 .npmrc create mode 100644 .prettierignore create mode 100644 .vscode/extensions.json create mode 100644 CHANGELOG.md create mode 100644 LICENSE create mode 100644 README.md create mode 100644 commitlint.config.js create mode 100644 config/constant.ts create mode 100644 config/themeConfig.ts create mode 100644 config/vite/optimizer.ts create mode 100644 config/vite/plugin/autoImport.ts create mode 100644 config/vite/plugin/component.ts create mode 100644 config/vite/plugin/compress.ts create mode 100644 config/vite/plugin/index.ts create mode 100644 config/vite/plugin/mock.ts create mode 100644 config/vite/plugin/styleImport.ts create mode 100644 config/vite/plugin/svgIcons.ts create mode 100644 config/vite/plugin/visualizer.ts create mode 100644 config/vite/proxy.ts create mode 100644 index.html create mode 100644 mock/_createProdMockServer.ts create mode 100644 mock/_util.ts create mode 100644 mock/common.ts create mode 100644 mock/home.ts create mode 100644 mock/table.ts create mode 100644 mock/user.ts create mode 100644 package.json create mode 100644 pnpm-lock.yaml create mode 100644 postcss.config.js create mode 100644 prettier.config.js create mode 100644 public/favicon.ico create mode 100644 src/App.vue create mode 100644 src/api/common/index.ts create mode 100644 src/api/common/model.d.ts create mode 100644 src/api/global.d.ts create mode 100644 src/api/home/index.ts create mode 100644 src/api/home/model.d.ts create mode 100644 src/api/sys/account/index.ts create mode 100644 src/api/sys/account/model.d.ts create mode 100644 src/api/user/index.ts create mode 100644 src/api/user/model.d.ts create mode 100644 src/assets/images/Icon _Search.png create mode 100644 src/assets/images/Icon_Block.png create mode 100644 src/assets/images/Icon_contract.png create mode 100644 src/assets/images/Icon_node.png create mode 100644 src/assets/images/Icon_trading.png create mode 100644 src/assets/images/avatar.png create mode 100644 src/assets/images/login_bg.png create mode 100644 src/assets/images/logo.png create mode 100644 src/components/Alert/index.vue create mode 100644 src/components/Breadcrumb/index.vue create mode 100644 src/components/Icon/index.vue create mode 100644 src/components/Modal/index.vue create mode 100644 src/components/Table/index.vue create mode 100644 src/components/TableFilter/index.vue create mode 100644 src/components/Upload/index.vue create mode 100644 src/directives/index.ts create mode 100644 src/directives/permission.ts create mode 100644 src/directives/role.ts create mode 100644 src/enums/authEnum.ts create mode 100644 src/hooks/useBreadcrumbTitle.ts create mode 100644 src/hooks/useECharts.ts create mode 100644 src/hooks/useEventListener.ts create mode 100644 src/hooks/useMessage.tsx create mode 100644 src/hooks/usePermission.ts create mode 100644 src/hooks/useRole.ts create mode 100644 src/hooks/useTimeout.ts create mode 100644 src/hooks/useTitle.ts create mode 100644 src/layouts/BasicLayout/components/Header.vue create mode 100644 src/layouts/BasicLayout/components/RightContent.vue create mode 100644 src/layouts/BasicLayout/components/SideMenu.tsx create mode 100644 src/layouts/BasicLayout/components/constant.ts create mode 100644 src/layouts/BasicLayout/components/index.less create mode 100644 src/layouts/BasicLayout/components/videoBox.vue create mode 100644 src/layouts/BasicLayout/index.vue create mode 100644 src/layouts/BasicLayout/utils/index.ts create mode 100644 src/layouts/BasicLayout/utils/typings.ts create mode 100644 src/layouts/BlankLayout.vue create mode 100644 src/main.ts create mode 100644 src/plugin.ts create mode 100644 src/router/index.ts create mode 100644 src/router/permission.ts create mode 100644 src/router/router.config.ts create mode 100644 src/shims-vue.d.ts create mode 100644 src/store/index.ts create mode 100644 src/store/modules/home.ts create mode 100644 src/store/modules/permission.ts create mode 100644 src/store/modules/sysAccount.ts create mode 100644 src/store/modules/user.ts create mode 100644 src/styles/antd.less create mode 100644 src/styles/common.less create mode 100644 src/styles/index.less create mode 100644 src/styles/public.less create mode 100644 src/styles/transition.less create mode 100644 src/styles/variables.less create mode 100644 src/utils/auth.ts create mode 100644 src/utils/crypto.ts create mode 100644 src/utils/dateUtil.ts create mode 100644 src/utils/echarts.ts create mode 100644 src/utils/http.ts create mode 100644 src/utils/index.ts create mode 100644 src/utils/is.ts create mode 100644 src/utils/mitt.ts create mode 100644 src/utils/permission.ts create mode 100644 src/utils/validate.ts create mode 100644 src/views/404.vue create mode 100644 src/views/account/constant.ts create mode 100644 src/views/account/index.vue create mode 100644 src/views/home/components/DataOverview.vue create mode 100644 src/views/home/components/TradingHistory.vue create mode 100644 src/views/home/constant.tsx create mode 100644 src/views/home/index.vue create mode 100644 src/views/login/Form.vue create mode 100644 src/views/login/index.vue create mode 100644 src/views/others/about/index.vue create mode 100644 src/views/others/antdv/index.vue create mode 100644 src/views/redirect/index.tsx create mode 100644 src/views/table-demo/constant.tsx create mode 100644 src/views/table-demo/index.vue create mode 100644 src/views/website/constant.tsx create mode 100644 src/views/website/index.vue create mode 100644 tsconfig.json create mode 100644 types/common.d.ts create mode 100644 types/global.d.ts create mode 100644 types/index.d.ts create mode 100644 vite.config.ts diff --git a/.env b/.env new file mode 100644 index 0000000..bb5a5f8 --- /dev/null +++ b/.env @@ -0,0 +1,4 @@ +NODE_ENV=production +VUE_APP_PREVIEW=false +VUE_APP_API_BASE_URL=/api/hto-mp/v1 +PORT=8998 diff --git a/.env.development b/.env.development new file mode 100644 index 0000000..72950d5 --- /dev/null +++ b/.env.development @@ -0,0 +1,2 @@ +VITE_APP_ENV = dev +VITE_APP_TITLE = 我是标题 \ No newline at end of file diff --git a/.env.production b/.env.production new file mode 100644 index 0000000..6ab3136 --- /dev/null +++ b/.env.production @@ -0,0 +1 @@ +VITE_APP_ENV = production \ No newline at end of file diff --git a/.eslintignore b/.eslintignore new file mode 100644 index 0000000..d8ce52d --- /dev/null +++ b/.eslintignore @@ -0,0 +1,16 @@ + +*.sh +node_modules +*.md +*.woff +*.ttf +.vscode +.idea +dist +/public +/docs +.husky +.local +/bin +Dockerfile +.npmrc \ No newline at end of file diff --git a/.eslintrc.js b/.eslintrc.js new file mode 100644 index 0000000..5fcac9e --- /dev/null +++ b/.eslintrc.js @@ -0,0 +1,78 @@ +// @ts-check +const { defineConfig } = require('eslint-define-config'); +module.exports = defineConfig({ + root: true, + env: { + browser: true, + node: true, + es6: true, + }, + parser: 'vue-eslint-parser', + parserOptions: { + parser: '@typescript-eslint/parser', + ecmaVersion: 2020, + sourceType: 'module', + jsxPragma: 'React', + ecmaFeatures: { + jsx: true, + }, + }, + extends: [ + 'plugin:vue/vue3-recommended', + 'plugin:@typescript-eslint/recommended', + 'prettier', + 'plugin:prettier/recommended', + 'plugin:jest/recommended', + ], + rules: { + 'vue/script-setup-uses-vars': 'error', + '@typescript-eslint/ban-ts-ignore': 'off', + '@typescript-eslint/explicit-function-return-type': 'off', + '@typescript-eslint/no-explicit-any': 'off', + '@typescript-eslint/no-var-requires': 'off', + '@typescript-eslint/no-empty-function': 'off', + 'vue/custom-event-name-casing': 'off', + 'no-use-before-define': 'off', + '@typescript-eslint/no-use-before-define': 'off', + '@typescript-eslint/ban-ts-comment': 'off', + '@typescript-eslint/ban-types': 'off', + '@typescript-eslint/no-non-null-assertion': 'off', + '@typescript-eslint/explicit-module-boundary-types': 'off', + '@typescript-eslint/no-unused-vars': [ + 'error', + { + argsIgnorePattern: '^_', + varsIgnorePattern: '^_', + }, + ], + 'no-unused-vars': [ + 'error', + { + argsIgnorePattern: '^_', + varsIgnorePattern: '^_', + }, + ], + 'space-before-function-paren': 'off', + + 'vue/attributes-order': 'off', + 'vue/one-component-per-file': 'off', + 'vue/html-closing-bracket-newline': 'off', + 'vue/max-attributes-per-line': 'off', + 'vue/multiline-html-element-content-newline': 'off', + 'vue/singleline-html-element-content-newline': 'off', + 'vue/attribute-hyphenation': 'off', + 'vue/require-default-prop': 'off', + 'vue/html-self-closing': [ + 'error', + { + html: { + void: 'always', + normal: 'never', + component: 'always', + }, + svg: 'always', + math: 'always', + }, + ], + }, +}); diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..cfb0ddf --- /dev/null +++ b/.gitignore @@ -0,0 +1,31 @@ +node_modules +.DS_Store +dist +.cache + +package-lock.json +yarn.lock + +.local +# local env files +.env.local +.env.*.local +.eslintcache + +# Log files +npm-debug.log* +yarn-debug.log* +yarn-error.log* +pnpm-debug.log* + +# Editor directories and files +.idea +# .vscode +*.suo +*.ntvs* +*.njsproj +*.sln +*.sw? + +**/src/auto-imports.d.ts +**/src/components.d.ts diff --git a/.husky/commit-msg b/.husky/commit-msg new file mode 100644 index 0000000..567ff71 --- /dev/null +++ b/.husky/commit-msg @@ -0,0 +1,6 @@ +#!/bin/sh + +# shellcheck source=./_/husky.sh +. "$(dirname "$0")/_/husky.sh" + +npx --no-install commitlint --edit "$1" diff --git a/.husky/common.sh b/.husky/common.sh new file mode 100644 index 0000000..9d5129b --- /dev/null +++ b/.husky/common.sh @@ -0,0 +1,9 @@ +#!/bin/sh +command_exists () { + command -v "$1" >/dev/null 2>&1 +} + +# Workaround for Windows 10, Git Bash and Yarn +if command_exists winpty && test -t 1; then + exec < /dev/tty +fi diff --git a/.husky/lintstagedrc.js b/.husky/lintstagedrc.js new file mode 100644 index 0000000..46e5a84 --- /dev/null +++ b/.husky/lintstagedrc.js @@ -0,0 +1,7 @@ +module.exports = { + '*.{js,jsx,ts,tsx}': ['eslint --fix', 'prettier --write'], + '{!(package)*.json,*.code-snippets,.!(browserslist)*rc}': ['prettier --write--parser json'], + 'package.json': ['prettier --write'], + '*.vue': ['eslint --fix', 'prettier --write'], + '*.{scss,less,styl,html}': ['prettier --write'], +}; diff --git a/.husky/pre-commit b/.husky/pre-commit new file mode 100644 index 0000000..35f9242 --- /dev/null +++ b/.husky/pre-commit @@ -0,0 +1,8 @@ +#!/bin/sh +. "$(dirname "$0")/_/husky.sh" +. "$(dirname "$0")/common.sh" + +[ -n "$CI" ] && exit 0 + +# Format and submit code according to lintstagedrc.js configuration +npm run lint:lint-staged diff --git a/.npmrc b/.npmrc new file mode 100644 index 0000000..2aa30de --- /dev/null +++ b/.npmrc @@ -0,0 +1,8 @@ +# 提升一些依赖包至 node_modules +# 解决部分包模块not found的问题 +# 用于配合 pnpm +#shamefully-hoist = true + +# node-sass 下载问题 +registry = "https://registry.npm.taobao.org" +sass_binary_site="https://npm.taobao.org/mirrors/node-sass/" diff --git a/.prettierignore b/.prettierignore new file mode 100644 index 0000000..58a03a8 --- /dev/null +++ b/.prettierignore @@ -0,0 +1,18 @@ +**/*.svg +**/*.ico +package.json +/dist +.DS_Store +.eslintignore +*.png +*.toml +.editorconfig +.gitignore +.prettierignore +LICENSE +.eslintcache +*.lock +yarn-error.log +/public +**/node_modules/** +.npmrc \ No newline at end of file diff --git a/.vscode/extensions.json b/.vscode/extensions.json new file mode 100644 index 0000000..3dc5b08 --- /dev/null +++ b/.vscode/extensions.json @@ -0,0 +1,3 @@ +{ + "recommendations": ["johnsoncodehk.volar"] +} diff --git a/CHANGELOG.md b/CHANGELOG.md new file mode 100644 index 0000000..63864b0 --- /dev/null +++ b/CHANGELOG.md @@ -0,0 +1,35 @@ +# [1.0.0](https://github.com/js-banana/vite-vue3-ts/compare/v1.1.0...v1.0.0) (2022-08-09) + +# [1.0.0](https://github.com/js-banana/vite-vue3-ts/compare/v1.1.0...v1.0.0) (2022-08-09) + +# [1.0.0](https://github.com/js-banana/vite-vue3-ts/compare/v1.1.0...v1.0.0) (2022-08-09) + +# [1.0.0](https://github.com/js-banana/vite-vue3-ts/compare/v1.1.0...v1.0.0) (2022-08-09) + +# [1.0.0](https://github.com/js-banana/vite-vue3-ts/compare/v1.1.0...v1.0.0) (2022-08-09) + +### Bug Fixes + +- nav ([a66af47](https://github.com/js-banana/vite-vue3-ts/commit/a66af4704c00fac48fcd6d30f1fa05f3c883aad9)) +- **router:** 域名二级目录的路由配置优化 ([9b8c887](https://github.com/js-banana/vite-vue3-ts/commit/9b8c8876d61ebbdda7b16cc10aa19083517eceb2)) +- **SideMenu:** 修复菜单文本与图标居中 ([60bafa0](https://github.com/js-banana/vite-vue3-ts/commit/60bafa0711b2f44df76f2979399ac95998576d67)) + +### Features + +- **.env:** 增加环境变量配置文件 ([403029c](https://github.com/js-banana/vite-vue3-ts/commit/403029cb0ad703f4ea464a81876987a64b570f37)) +- 调整权限逻辑，补充 v-role 指令 ([9a9598b](https://github.com/js-banana/vite-vue3-ts/commit/9a9598b2bb85a5c8baf5a08c56efd0e308514b96)) +- 添加路由动效，抽离 Breadcrumb 组件 ([d32087c](https://github.com/js-banana/vite-vue3-ts/commit/d32087c9f9490f6245589fce42342b19e3068b5e)) +- 增加 Table 使用 demo，完善文档说明，优化 Table API，保持与官方 antv 一致 ([159e0da](https://github.com/js-banana/vite-vue3-ts/commit/159e0da34c2897d4d2a3433ac793cfa3c4521cf2)) +- vite2.x => vite3.x 工具链生态相关升级更新 ([820c02e](https://github.com/js-banana/vite-vue3-ts/commit/820c02e0f1eec256bf4fc9884cb25f2631fa803e)) + +### Performance Improvements + +- 路由模式由 hash 调整为 history ([e37f2f6](https://github.com/js-banana/vite-vue3-ts/commit/e37f2f60291241ec4ab30134afd46b0dd83815a8)) + +## [0.0.1](https://github.com/js-banana/vite-vue3-ts/compare/219fe493bd2623c0abfab0e4ef48a2a12838ccdf...v0.0.1) (2021-12-13) + +### Features + +- **app:** 生产环境 mock、功能组件、路由完善 ([74b1983](https://github.com/js-banana/vite-vue3-ts/commit/74b1983c7a946b2fb1a95afcd3870a13db96fa9b)) +- **mock:** mock 数据编写 ([219fe49](https://github.com/js-banana/vite-vue3-ts/commit/219fe493bd2623c0abfab0e4ef48a2a12838ccdf)) +- update app and docs ([b61d9ce](https://github.com/js-banana/vite-vue3-ts/commit/b61d9cea26c522850eca74cb0833d5efd90c52c1)) diff --git a/LICENSE b/LICENSE new file mode 100644 index 0000000..1302d4a --- /dev/null +++ b/LICENSE @@ -0,0 +1,21 @@ +MIT License + +Copyright (c) 2020-present, JS-banana + +Permission is hereby granted, free of charge, to any person obtaining a copy +of this software and associated documentation files (the "Software"), to deal +in the Software without restriction, including without limitation the rights +to use, copy, modify, merge, publish, distribute, sublicense, and/or sell +copies of the Software, and to permit persons to whom the Software is +furnished to do so, subject to the following conditions: + +The above copyright notice and this permission notice shall be included in all +copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR +IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, +FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE +AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER +LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, +OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE +SOFTWARE. diff --git a/README.md b/README.md new file mode 100644 index 0000000..2b787f4 --- /dev/null +++ b/README.md @@ -0,0 +1,245 @@ +# vite-vue3-ts + +[![ci](https://github.com/JS-banana/vite-vue3-ts/actions/workflows/deploy.yml/badge.svg)](https://github.com/JS-banana/vite-vue3-ts/actions/workflows/deploy.yml) + +## 介绍 + +一个使用 `vite` + `vue3` + `pinia` + `ant-design-vue` + `typescript` 完整技术路线开发的项目，秒级开发更新启动、新的`vue3 composition api` 结合 `setup`纵享丝滑般的开发体验、全新的 `pinia`状态管理器和优秀的设计体验（`1k`的size）、`antd`无障碍过渡使用UI组件库 `ant-design-vue`、安全高效的 `typescript`类型支持、代码规范验证、多级别的权限管理~ + +相关文章： + +本项目相关改动及更新见【[更新记录](#更新记录)↓↓↓】 + +## 特性 + +- ✨脚手架工具：高效、快速的 **Vite** +- 🔥前端框架：眼下最时髦的 **Vue3** +- 🍍状态管理器：`vue3`新秀 **Pinia**，犹如 `react zustand`般的体验，友好的api和异步处理 +- 🏆开发语言：政治正确 **TypeScript** +- 🎉UI组件：`antd`开发者无障碍过渡使用 **ant-design-vue**，熟悉的配方熟悉的味道 +- 🎨css样式：**less** 、`postcss` +- 📖代码规范：**Eslint**、**Prettier**、**Commitlint** +- 🔒权限管理：页面级、菜单级、按钮级、接口级 +- ✊依赖按需加载：**unplugin-auto-import**，可自动导入使用到的`vue`、`vue-router`等依赖 +- 💪组件按需导入：**unplugin-vue-components**，无论是第三方UI组件还是自定义组件都可实现自动按需导入以及`TS`语法提示 + +## 项目目录 + +```js +├── .husky // husky git hooks配置目录 + ├── _ // husky 脚本生成的目录文件 + ├── commit-msg // commit-msg钩子，用于验证 message格式 + ├── pre-commit // pre-commit钩子，主要是和eslint配合 +├── config // 全局配置文件 + ├── vite // vite 相关配置 + ├── constant.ts // 项目配置 + ├── themeConfig.ts // 主题配置 +├── dist // 默认的 build 输出目录 +├── mock // 前端数据mock +├── public // vite项目下的静态目录 +└── src // 源码目录 + ├── api // 接口相关 + ├── assets // 公共的文件（如image、css、font等） + ├── components // 项目组件 + ├── directives // 自定义 指令 + ├── enums // 自定义 常量（枚举写法） + ├── hooks // 自定义 hooks + ├── layout // 全局布局 + ├── router // 路由 + ├── store // 状态管理器 + ├── utils // 工具库 + ├── views // 页面模块目录 + ├── login // login页面模块 + ├── ... + ├── App.vue // vue顶层文件 + ├── auto-imports.d.ts // unplugin-auto-import 插件生成 + ├── components.d.d.ts // unplugin-vue-components 插件生成 + ├── main.ts // 项目入口文件 + ├── shimes-vue.d.ts // vite默认ts类型文件 + ├── types // 项目type类型定义文件夹 +├── .editorconfig // IDE格式规范 +├── .env // 环境变量 +├── .eslintignore // eslint忽略 +├── .eslintrc // eslint配置文件 +├── .gitignore // git忽略 +├── .npmrc // npm配置文件 +├── .prettierignore // prettierc忽略 +├── .prettierrc // prettierc配置文件 +├── index.html // 入口文件 +├── LICENSE.md // LICENSE +├── package.json // package +├── pnpm-lock.yaml // pnpm-lock +├── postcss.config.js // postcss +├── README.md // README +├── tsconfig.json // typescript配置文件 +└── vite.config.ts // vite +``` + +## 使用说明 + +> 简要说明： +> +> 随着vite3.x的发布，本项目针对该依赖的相关生态做了升级，详情见分支 [feat-vite3.x](https://github.com/JS-banana/vite-vue3-ts/tree/feat-vite3.x) +> +> 需要指出的是vite3.x要求node14.18及以上，详情见 [从 v2 迁移](https://cn.vitejs.dev/guide/migration.html) + +1. 克隆本项目 + + ```sh + git clone https://github.com/JS-banana/vite-vue3-ts.git + ``` + +2. 安装依赖 + + ```sh + # 推荐使用 pnpm + pnpm install + # 没有安装的直接安装 + npm install -g pnpm + ``` + +3. 启动项目 + + ```sh + pnpm serve + # or + pnpm dev + ``` + +4. 部署 + + ```sh + # 检查TS类型然后构建打包 + pnpm build:check + # 跳过检查直接构建打包 + pnpm build + # 预览 + pnpm preview + ``` + +### 数据模拟 + +为了实现更多元化和真实数据展示，使用了Mock+fakerjs进行数据模拟，fakerjs的功能极其强大，几乎可以定制任何类型数据，本项目里做了部分演示，源码见`mock/table.ts` + +### ant-design-vue 2.x升级到3.x的说明 + +Table组件： + +在2.x版本的时候，Table组件主要通过 `columns`属性，配置字段 `slots: { customRender: 'action' }`进行自定义插槽，做到制定内容的内容，基于此，本项目Table组件封装的内部实现为`