26 |
27 | 
28 |
29 | ## 准备
30 |
31 | - [Node](http://nodejs.org/) 和 [Git](https://git-scm.com/) -项目开发环境
32 | - [Vite](https://cn.vitejs.dev/) - 熟悉 Vite 特性
33 | - [React18](https://reactjs.org/) - 熟悉 React18 基础语法
34 | - [Es6+](http://es6.ruanyifeng.com/) - 熟悉 Es6 基本语法
35 | - [React Router V6](https://reactrouter.com/en/main) - 熟悉 React Router V6 基本使用
36 | - [And Design 5](https://ant.design/docs/react/introduce-cn) - Ui 基本使用
37 | - [Emotion](https://emotion.sh/docs/introduction) - 基本使用
38 |
39 | ## 安装使用
40 |
41 | ### 1. 获取项目代码（Https or SSH）
42 |
43 | ```bash
44 | git clone https://github.com/jsxiaosi/react-xs-admin.git
45 |
46 | git clone git@github.com:jsxiaosi/react-xs-admin.git
47 | ```
48 |
49 | 或者通过[`xs-cli`](https://github.com/jsxiaosi/xs-cli)快速创建
50 |
51 | ```bash
52 | npx @jsxiaosi/xs-cli create [project-name]
53 | ```
54 |
55 | ### 2.安装依赖
56 |
57 | ```bash
58 | cd react-xs-admin
59 | ```
60 |
61 | 推荐使用`pnpm`
62 |
63 | ```bash
64 | pnpm i
65 | ```
66 |
67 | `npm`安装
68 |
69 | ```bash
70 | npm install
71 |
72 | # 建议不要直接使用 cnpm 安装以来，会有各种诡异的 bug。可以通过如下操作解决 npm 下载速度慢的问题
73 | # 如果下载依赖慢可以使用淘宝镜像源安装依赖
74 | npm install --registry=https://registry.npm.taobao.org
75 |
76 | ```
77 |
78 | ### 3.运行
79 |
80 | ```bash
81 | npm run dev
82 | ```
83 |
84 | ### 4.打包
85 |
86 | ```bash
87 | npm run build
88 | ```
89 |
90 | ## 项目地址
91 |
92 | - [react-xs-admin](https://github.com/jsxiaosi/react-xs-admin)
93 |
94 | ## 如何贡献
95 |
96 | **Pull Request:**
97 |
98 | 1. Fork 代码!
99 | 2. 创建自己的分支: `git checkout -b feature/xxxx`
100 | 3. 提交你的修改: `git commit -m 'feature: add xxxxx'`
101 | 4. 推送您的分支: `git push origin feature/xxxx`
102 | 5. 提交`pull request`
103 |
104 | ## Git 贡献提交规范
105 |
106 | - 参考 [vue](https://github.com/vuejs/vue/blob/dev/.github/COMMIT_CONVENTION.md) 规范
107 |
108 | - `feat` 新增功能
109 | - `fix` 修复缺陷
110 | - `docs` 文档变更
111 | - `style` 代码格式
112 | - `refactor` 代码重构
113 | - `perf` 性能优化
114 | - `test` 添加疏漏测试或已有测试改动
115 | - `build` 构建流程、外部依赖变更 (如升级 npm 包、修改打包配置等)
116 | - `ci` 修改 CI 配置、脚本
117 | - `revert` 回滚 commit
118 | - `chore` 对构建过程或辅助工具和库的更改 (不影响源文件)
119 | - `wip` 正在开发中
120 | - `types` 类型定义文件修改
121 |
122 | ## 浏览器支持
123 |
124 | 本地开发推荐使用`Chrome 80+` 浏览器
125 |
126 | 支持现代浏览器, 不支持 IE
127 |
128 | | [
](http://godban.github.io/browsers-support-badges/)IE | [](http://godban.github.io/browsers-support-badges/)Edge | [
](http://godban.github.io/browsers-support-badges/)Firefox | [
](http://godban.github.io/browsers-support-badges/)Chrome | [
](http://godban.github.io/browsers-support-badges/)Safari |
129 | | :-: | :-: | :-: | :-: | :-: |
130 | | not support | last 2 versions | last 2 versions | last 2 versions | last 2 versions |
131 |
132 | ## 维护者
133 |
134 | [@jsxiaosi](https://github.com/jsxiaosi)
135 |
136 | ## License
137 |
138 | [MIT © 2022](./LICENSE)
139 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 |
29 |
30 |
31 |
32 | ## Prepare
33 |
34 | - [Node](http://nodejs.org/) And [Git](https://git-scm.com/) - Project development environment
35 | - [Vite](https://cn.vitejs.dev/) - Familiar with Vite features
36 | - [React18](https://reactjs.org/) - Familiar with the basic syntax of React18
37 | - [Es6+](http://es6.ruanyifeng.com/) - familiar with the basic syntax of Es6
38 | - [React Router V6](https://reactrouter.com/en/main) - Familiar with the basic use of React Router V6
39 | - [And Design 5](https://ant.design/docs/react/introduce-cn) - Ui basic use
40 | - [Emotion](https://emotion.sh/docs/introduction) - Basic use
41 |
42 | ## Installation and use
43 |
44 | ### 1. Get project code (Https or SSH)
45 |
46 | ```bash
47 | git clone https://github.com/jsxiaosi/react-xs-admin.git
48 |
49 | git clone git@github.com:jsxiaosi/react-xs-admin.git
50 | ```
51 |
52 | Alternatively, you can use the [`xs-cli`](https://github.com/jsxiaosi/xs-cli)to quickly create one
53 |
54 | ```bash
55 | npx @jsxiaosi/xs-cli create [project-name]
56 | ```
57 |
58 | ### 2.Installation Dependencies
59 |
60 | ```bash
61 | cd react-xs-admin
62 | ```
63 |
64 | Recommended`pnpm`
65 |
66 | ```bash
67 | pnpm i
68 | ```
69 |
70 | `npm` install
71 |
72 | ```bash
73 | npm install
74 | ```
75 |
76 | ### 3.Developer
77 |
78 | ```bash
79 | npm run dev
80 | ```
81 |
82 | ### 4.Production
83 |
84 | ```bash
85 | npm run build
86 | ```
87 |
88 | ## Project address
89 |
90 | - [react-xs-admin](https://github.com/jsxiaosi/react-xs-admin)
91 |
92 | ## How to contribute
93 |
94 | **Pull Request:**
95 |
96 | 1. Fork Code!
97 | 2. Create your own branch: `git checkout -b feature/xxxx`
98 | 3. Submit your changes: `git commit -m 'feature: add xxxxx'`
99 | 4. Push your branch: `git push origin feature/xxxx`
100 | 5. Submit: `pull request`
101 |
102 | ## Git Contribution submission specification
103 |
104 | - Refer to [Vue](https://github.com/vuejs/vue/blob/dev/.github/COMMIT_CONVENTION.md) specification
105 |
106 | - `feat` New Features
107 | - `fix` Repair defects
108 | - `docs` Document change
109 | - `style` Code format
110 | - `refactor` Code refactoring
111 | - `perf` Performance optimization
112 | - `test` Add neglected tests or changes to existing tests
113 | - `build` Build processes, external dependency changes (such as upgrading npm packages, modifying packaging configurations, etc.)
114 | - `ci` Modify CI configuration and scripts
115 | - `revert` Roll back the commit
116 | - `chore` Changes to the build process or tools and libraries (do not affect source files)
117 | - `wip` Under development
118 | - `types` Type definition file modification
119 |
120 | ## Browser Support
121 |
122 | Chrome 80+ is recommended for local development
123 |
124 | Supports modern browsers, not Internet Explorer
125 |
126 | | [](http://godban.github.io/browsers-support-badges/)IE | [](http://godban.github.io/browsers-support-badges/)Edge | [](http://godban.github.io/browsers-support-badges/)Firefox | [](http://godban.github.io/browsers-support-badges/)Chrome | [](http://godban.github.io/browsers-support-badges/)Safari |
127 | | :-: | :-: | :-: | :-: | :-: |
128 | | not support | last 2 versions | last 2 versions | last 2 versions | last 2 versions |
129 |
130 | ## maintainers
131 |
132 | [@jsxiaosi](https://github.com/jsxiaosi)
133 |
134 | ## License
135 |
136 | [MIT © 2022](./LICENSE)
137 |
--------------------------------------------------------------------------------
/build/vite/build.ts:
--------------------------------------------------------------------------------
1 | import type { BuildOptions } from 'vite';
2 |
3 | export function createViteBuild(): BuildOptions {
4 | const viteBuild = {
5 | target: 'es2015',
6 | // 指定输出路径
7 | outDir: 'dist',
8 | cssTarget: 'chrome80',
9 |
10 | // 指定生成静态资源的存放路径
11 | assetsDir: 'static',
12 | // 启用/禁用 CSS 代码拆分。当启用时，在异步 chunk 中导入的 CSS 将内联到异步 chunk 本身，并在块加载时插入 如果禁用，整个项目中的所有 CSS 将被提取到一个 CSS 文件中。
13 | cssCodeSplit: true,
14 | // 构建后是否生成 source map 文件。
15 | sourcemap: false,
16 | // 启用/禁用 brotli 压缩大小报告。压缩大型输出文件可能会很慢，因此禁用该功能可能会提高大型项目的构建性能。
17 | brotliSize: false,
18 | // minify: 'terser',
19 | // terserOptions: {
20 | // compress: {
21 | // // 打包清除console
22 | // drop_console: true,
23 | // },
24 | // },
25 | // chunk 大小警告的限制（以 kbs 为单位）
26 | chunkSizeWarningLimit: 2000,
27 | };
28 | return viteBuild;
29 | }
30 |
--------------------------------------------------------------------------------
/build/vite/plugins/index.ts:
--------------------------------------------------------------------------------
1 | import react from '@vitejs/plugin-react';
2 | // import react from '@vitejs/plugin-react-swc';
3 | import type { ConfigEnv, PluginOption } from 'vite';
4 | import { configMockPlugin } from './mock';
5 |
6 | // svg配置
7 | import { configSvgPlugin } from './svg';
8 |
9 | export function createVitePlugins(_isBuild = false, _configEnv: ConfigEnv) {
10 | const vitePlugins: PluginOption[] = [];
11 |
12 | vitePlugins.push(
13 | react({
14 | jsxImportSource: '@emotion/react',
15 | babel: {
16 | plugins: ['@emotion/babel-plugin'],
17 | },
18 | }),
19 | );
20 |
21 | vitePlugins.push(configSvgPlugin());
22 |
23 | vitePlugins.push(configMockPlugin());
24 |
25 | return vitePlugins;
26 | }
27 |
--------------------------------------------------------------------------------
/build/vite/plugins/mock.ts:
--------------------------------------------------------------------------------
1 | /**
2 | * Mock plugin for development and production.
3 | * https://github.com/anncwb/vite-plugin-mock
4 | */
5 | import { vitePluginFakeServer } from 'vite-plugin-fake-server';
6 |
7 | export function configMockPlugin() {
8 | return vitePluginFakeServer({
9 | logger: false,
10 | include: 'mock',
11 | infixName: false,
12 | enableProd: true,
13 | });
14 | }
15 |
--------------------------------------------------------------------------------
/build/vite/plugins/pwa.ts:
--------------------------------------------------------------------------------
1 | /**
2 | * pwa
3 | * https://vite-plugin-pwa.netlify.app
4 | */
5 | import { VitePWA } from 'vite-plugin-pwa';
6 |
7 | export function configPwaPlugin() {
8 | const options = {
9 | includeAssets: ['favicon.svg', 'favicon.ico', 'robots.txt', 'apple-touch-icon.png'],
10 | logLevel: 'silent',
11 | manifest: {
12 | name: '小斯管理后台模板',
13 | short_name: '小斯后台模板',
14 | description: '基于 vue3+vite+element-push 搭建的后台模板',
15 | theme_color: '#ffffff',
16 | icons: [
17 | {
18 | src: '/pwa/android-chrome-192x192.png',
19 | sizes: '192x192',
20 | type: 'image/png',
21 | },
22 | {
23 | src: '/pwa/android-chrome-512x512.png',
24 | sizes: '512x512',
25 | type: 'image/png',
26 | },
27 | {
28 | src: '/pwa/android-chrome-512x512.png',
29 | sizes: '512x512',
30 | type: 'image/png',
31 | purpose: 'any maskable',
32 | },
33 | ],
34 | },
35 | };
36 |
37 | return VitePWA(options);
38 | }
39 |
--------------------------------------------------------------------------------
/build/vite/plugins/svg.ts:
--------------------------------------------------------------------------------
1 | /**
2 | * svg
3 | * https://github.com/anncwb/vite-plugin-svg-icons/blob/main/README.zh_CN.md
4 | */
5 | import path from 'path';
6 | import process from 'process';
7 | import { createSvgIconsPlugin } from 'vite-plugin-svg-icons';
8 |
9 | export function configSvgPlugin() {
10 | const svgPlugin = createSvgIconsPlugin({
11 | // 指定需要缓存的图标文件夹
12 | iconDirs: [path.resolve(process.cwd(), 'src/assets/icons')],
13 | // 压缩配置
14 | // svgoOptions: false,
15 | // 指定symbolId格式
16 | symbolId: 'icon-[dir]-[name]',
17 | });
18 | return svgPlugin;
19 | }
20 |
--------------------------------------------------------------------------------
/build/vite/resolve.ts:
--------------------------------------------------------------------------------
1 | import path from 'path';
2 | import type { AliasOptions, ResolveOptions } from 'vite';
3 |
4 | type myResolveOptions = ResolveOptions & { alias?: AliasOptions };
5 |
6 | export function createViteResolve(myDirname: string): myResolveOptions {
7 | const viteResolve: myResolveOptions = {
8 | // 引用别名配置
9 | alias: {
10 | // 配置@别名
11 | '@': `${path.resolve(myDirname, 'src')}`,
12 | // 配置#别名
13 | '#': `${path.resolve(myDirname, 'types')}`,
14 | },
15 | // 导入时想要省略的扩展名列表。注意，不 建议忽略自定义导入类型的扩展名（例如：.vue），因为它会干扰 IDE 和类型支持。
16 | extensions: ['.mjs', '.js', '.ts', '.jsx', '.tsx', '.json'],
17 | };
18 |
19 | return viteResolve;
20 | }
21 |
--------------------------------------------------------------------------------
/build/vite/server.ts:
--------------------------------------------------------------------------------
1 | import type { ServerOptions } from 'vite';
2 |
3 | export function createViteServer(): ServerOptions {
4 | const viteServer: ServerOptions = {
5 | // 服务器主机名，如果允许外部访问，可设置为"0.0.0.0"
6 | host: true,
7 | // 服务器端口号
8 | port: 5173,
9 | // 端口已被占用时是否尝试使用下一个可用的端口 true：直接退出，而不是尝试下一个可用端口 false：尝试下一个可用端口
10 | strictPort: false,
11 | // boolean | string 启动项目时自动在浏览器打开应用程序；如果为string，比如"/index.html"，会打开http://localhost:5173/index.html
12 | // open: true,
13 | // boolean | CorsOptions 为开发服务器配置 CORS。默认启用并允许任何源，传递一个 选项对象 来调整行为或设为 false 表示禁用。
14 | // cors: true,
15 | // 设置为 true 强制使依赖预构建。
16 | // force: false,
17 | // 自定义代理规则
18 | proxy: {
19 | '/api': {
20 | target: '',
21 | changeOrigin: true,
22 | rewrite: path => path.replace(/^\/api/, ''),
23 | },
24 | },
25 | };
26 | return viteServer;
27 | }
28 |
--------------------------------------------------------------------------------
/commitlint.config.js:
--------------------------------------------------------------------------------
1 | import { execSync } from 'child_process';
2 | import fs from 'fs';
3 | import path from 'path';
4 | import { fileURLToPath } from 'url';
5 |
6 | const scopes = fs
7 | .readdirSync(path.resolve(path.dirname(fileURLToPath(import.meta.url)), 'src'))
8 | .map(i => i.toLowerCase());
9 |
10 | const gitStatus = execSync('git status --porcelain || true').toString().trim().split('\n');
11 |
12 | const scopeComplete = gitStatus
13 | .find(r => ~r.indexOf('M src'))
14 | ?.replace(/(\/)/g, '%%')
15 | ?.match(/src%%((\w|-)*)/)?.[1];
16 |
17 | const subjectComplete = gitStatus
18 | .find(r => ~r.indexOf('M src'))
19 | ?.replace(/\//g, '%%')
20 | ?.match(/src%%((\w|-)*)/)?.[1];
21 |
22 | const Configuration = {
23 | extends: ['@jsxiaosi/commitlint-config'],
24 | prompt: {
25 | // 范围设置
26 | scopes: [...scopes, 'mock'],
27 | // 范围是否可以多选
28 | enableMultipleScopes: true,
29 | // 多选范围后用标识符隔开
30 | scopeEnumSeparator: ',',
31 | // 设置 选择范围 中 为空选项(empty) 和 自定义选项(custom) 的 位置
32 | customScopesAlign: !scopeComplete ? 'top' : 'bottom',
33 | // 如果 defaultScope 与在选择范围列表项中的 value 相匹配就会进行星标置顶操作。
34 | defaultScope: scopeComplete,
35 | // 描述预设值
36 | defaultSubject: subjectComplete && `[${subjectComplete}] `,
37 | },
38 | };
39 |
40 | export default Configuration;
41 |
--------------------------------------------------------------------------------
/eslint.config.js:
--------------------------------------------------------------------------------
1 | import jsxiaosi from '@jsxiaosi/eslint-config';
2 |
3 | export default jsxiaosi({
4 | typescript: true,
5 | react: true,
6 | prettier: {
7 | usePrettierrc: true,
8 | },
9 | rules: {
10 | 'react/no-unknown-property': ['error', { ignore: ['css'] }],
11 | },
12 | });
13 |
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |