%VITE_APP_TITLE% - %VITE_APP

commit 107726be2532f2d603a1cd51d03dda833586e25f Author: juetan Date: Sat Jul 8 14:18:41 2023 +0800 feat: 首次提交 diff --git a/.env b/.env new file mode 100644 index 0000000..d04ce10 --- /dev/null +++ b/.env @@ -0,0 +1,43 @@ +# ============================================================ +# 项目配置文件 +# ============================================================ + +# 网站标题 +VITE_APP_TITLE = 应用管理系统 + +# 网站副标题 +VITE_APP_SUBTITLE = 快速开发web应用的模板工具 + +# Axios基本URL +VITE_APP_API_BASE_URL = /api + + + +# ============================================================ +# 开发设置 +# ============================================================ + +# API接口地址(开发环境) +VITE_API_BASE_URL = http://127.0.0.1:3030 + +# API代理地址(开发环境) +VITE_API_PROXY_URL = /api + +# API文档地址(开发环境) 备注：需为openapi规范的json文件 +# VITE_API_DOCS_URL = http://127.0.0.1:3030/openapi-json +VITE_API_DOCS_URL = https://petstore.swagger.io/v2/swagger.json + +# 端口号(开发环境) +VITE_DEV_PORT = 3020 + +# 主机地址(开发环境) +VITE_DEV_HOST = 0.0.0.0 + + + +# ============================================================ +# 构建设置 +# ============================================================ + +# 构建时加载的文件后缀. 例如：设置为todo则会首先尝试加载index.todo.vue文件，不存在时再加载index.vue文件 +VITE_BUILD_EXTENSION = todo \ No newline at end of file diff --git a/.github/workflows/deploy.yml b/.github/workflows/deploy.yml new file mode 100644 index 0000000..50c7075 --- /dev/null +++ b/.github/workflows/deploy.yml @@ -0,0 +1,33 @@ +# 工作流名称，可自定义 +name: 自动部署 + +# 事件监听，决定什么时候触发该工作流内的任务 +on: + # 在master分支推动到github时触发 + push: + branches: [ master ] + +# 任务集合，可包含多个任务 +jobs: + # 任务名称 + build: + # 运行的操作系统 + runs-on: ubuntu-latest + + # 步骤集合，可包含多个步骤 + steps: + # 单个步骤，没有名称，直接使用一个action + - uses: actions/checkout@v2 + + # 单个步骤，带有名称，带有参数 + - name: build and deploy + run: | + npm install + npm run build + cd dist + git config --global user.name "juetan" + git config --global user.email "810335188@qq.com" + git init + git add -A + git commit -m "Build through github action" + git push -f "https://${{ github.actor }}:${{ secrets.GITHUB_TOKEN }}@github.com/${{ github.repository }}.git" master:gh-pages diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..3fb0166 --- /dev/null +++ b/.gitignore @@ -0,0 +1,25 @@ +# Logs +logs +*.log +npm-debug.log* +yarn-debug.log* +yarn-error.log* +pnpm-debug.log* +lerna-debug.log* + +node_modules +dist +dist-ssr +*.local + +# Editor directories and files +.vscode/* +!.vscode/extensions.json +!.vscode/*.code-snippets +.idea +.DS_Store +*.suo +*.ntvs* +*.njsproj +*.sln +*.sw? diff --git a/.npmrc b/.npmrc new file mode 100644 index 0000000..29581a4 --- /dev/null +++ b/.npmrc @@ -0,0 +1,2 @@ +registry=https://registry.npmmirror.com/ +public-hoist-pattern[]=@vue/runtime-core \ No newline at end of file diff --git a/.vscode/components.code-snippets b/.vscode/components.code-snippets new file mode 100644 index 0000000..ba144f7 --- /dev/null +++ b/.vscode/components.code-snippets @@ -0,0 +1,98 @@ +{ + "New useform": { + "prefix": "guseform", + "description": "useForm code", + "body": [ + "const ${1:form} = useForm({", + " model: {},", + " items: [", + " {", + " field: '${2:name}',", + " label: '${3:label}',", + " type: '${4:input}',", + " },", + " ${0}", + " ],", + " submit: async ({ model }) => {", + " console.log(model);", + " },", + "});" + ] + }, + "New Component": { + "scope": "vue,vue-html,html", + "prefix": "gtable", + "description": "Table Component Code", + "body": ["

"] + }, + "New Table Column": { + "prefix": "gcolumn", + "description": "Table Column Code", + "body": ["{", " title: \"${1}\",", " dataIndex: \"${2}\",", " ${3}", "},", "${0}"] + }, + "New Item": { + "prefix": "gitem", + "description": "创建新表单元素", + "body": ["{", " field: \"${1}\",", " label: \"${2}\",", " type: \"${3:input}\",", " ${4}", "},", "${0}"] + }, + "New Crud Page": { + "prefix": "gusetable", + "isFileTemplate": true, + "body": [ + "", + "", + "", + "", + "" + ] + } +} diff --git a/.vscode/extensions.json b/.vscode/extensions.json new file mode 100644 index 0000000..bed4fa9 --- /dev/null +++ b/.vscode/extensions.json @@ -0,0 +1,11 @@ +{ + "recommendations": [ + "dbaeumer.vscode-eslint", + "esbenp.prettier-vscode", + "xabikos.JavaScriptSnippets", + "Vue.volar", + "Vue.vscode-typescript-vue-plugin", + "sdras.vue-vscode-snippets", + "antfu.iconify" + ] +} diff --git a/.vscode/template.code-snippets b/.vscode/template.code-snippets new file mode 100644 index 0000000..050b1da --- /dev/null +++ b/.vscode/template.code-snippets @@ -0,0 +1,66 @@ +{ + "New Route": { + "description": "生成一个Setup风格的SFC页面(带路由)", + "prefix": "groute", + "isFileTemplate": true, + "body": [ + "", + "", + "", + "", + "", + "", + "", + "{", + " \"meta\": {", + " \"sort\": ${1:20010},", + " \"title\": \"${2:测试页面}\",", + " \"icon\": \"icon-park-outline-${3:home}\"", + " }", + "}", + "" + ] + }, + "New Page": { + "description": "生成一个Setup风格的SFC页面", + "prefix": "gpage", + "isFileTemplate": true, + "body": [ + "", + "", + "", + "", + "" + ] + }, + "New Route Meta": { + "prefix": "groutemeta", + "body": [ + "", + "{", + " \"meta\": {", + " \"sort\": ${1:20010},", + " \"title\": \"${2:测试页面}\",", + " \"icon\": \"icon-park-outline-${3:home}\"", + " }", + "}", + "" + ] + } +} diff --git a/README.md b/README.md new file mode 100644 index 0000000..92c68a8 --- /dev/null +++ b/README.md @@ -0,0 +1,264 @@ +## 介绍 +基于vue3 + vite4 + typescript的B端管理系统起始模板，提供自动导入/路由、轻量CRUD表格组件和API接口自动生成等功能。 + +## 功能 +- 一个文件，自动生成路由/菜单/面包屑 +- Typescript支持，内置和扩展众多类型定义，文档在手可触 +- 根据openapi自动生成数据类型、请求函数 +- 轻量化的封装表单、CRUD表格，开箱即用 +- 内置VITE插件，输出版本/打包信息，支持根据不同后缀打包 +- 轻量的字典常量定义助手函数 +- 常用API/组件自动导入，同时带类型提示 +- 图标/样式一个类名搞定 +- 遵循Conventional Changelog规范，自动生成版本记录文档 +- 内置常用VsCode代码片段和推荐扩展，提升开发效率 + +## 快速开始 +1. 确保本地安装有如下软件，推荐最新版本。 +``` +git +node +pnpm +``` +备注：pnpm在NodeJS v16+版本可通过 corepack enable 命令开启，低版本请通过 npm install pnpm 命令安装 + +2. 拉取模板 +``` +npx degit https://github.com/juetan/apptify-admin +``` + +3. 安装依赖 +``` +pnpm install +``` + +4. 启动项目，默认端口3020。 +``` +pnpm dev +``` + + +## 开发文档 +本仓库仅是一个起始模板，具体项目请根据需求改造。 + +### 路由菜单 +基于 [vite-plugin-pages](https://github.com/hannoeru/vite-plugin-pages) 插件。本项目使用`src/pages`作为路由目录，最终生成的路由仅有2级，主要是出于``缓存的需要，其中： + +| 说明 | +| --- | +| `src/pages`目录下以`_`开头的文件名/目录名为一级路由，如登陆页面。 +| `src/pages`其他子目录或`.vue`文件为二级路由，如应用首页。 + +左侧菜单数据，将根据上面的二级路由自动生成，如需生成层级只需在对应目录下的index.vue文件中定义如下路由配置： +``` + +{ + "parentMeta": { + // 具体属性查阅 src/types/vue-router.d.ts + } +} + +``` + +### 文件后缀 +在 `scripts/vite/plugin.ts` 文件中，内置了一个VITE插件，主要用于输出编译信息以及根据不同文件后缀进行打包。在项目根目录下的`.env`配置文件中，可指定以下属性： +``` +VITE_BUILD_TYPE = my +``` +配置后，构建时将首先尝试加载`index.my.vue`文件，不存在时再加载`index.vue`。默认开发环境下为`dev`, 其他环境为`prod`，这在本地临时开发或根据微差异化打包时非常有用。 + +### 图标样式 +基于 [UnoCSS]() 插件，可使用类似TailwindCSS的原子样式快速开发，同时默认安装`icon-park-outline`图标库，只需引用类名即可得到SVG图标。这在路由菜单等需要动态渲染时非常有用，同时所有样式类和图标类都是按需打包的，示例： +```html +

欢迎访问%VITE_APP_TITLE%

403

+ {{ appStore.title }} +