create-vite-react-cli 1.0.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/LICENSE +21 -0
- package/README.md +115 -0
- package/bin/cli.js +16 -0
- package/package.json +45 -0
- package/src/index.js +86 -0
- package/templates/README.md +35 -0
- package/templates/index.html +14 -0
- package/templates/package.json +22 -0
- package/templates/public/react.svg +2 -0
- package/templates/public/vite.svg +2 -0
- package/templates/src/App.css +43 -0
- package/templates/src/App.jsx +34 -0
- package/templates/src/index.css +69 -0
- package/templates/src/main.jsx +11 -0
- package/templates/vite.config.js +8 -0
package/LICENSE
ADDED
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
MIT License
|
|
2
|
+
|
|
3
|
+
Copyright (c) 2025 Pan Min
|
|
4
|
+
|
|
5
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
6
|
+
of this software and associated documentation files (the "Software"), to deal
|
|
7
|
+
in the Software without restriction, including without limitation the rights
|
|
8
|
+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
9
|
+
copies of the Software, and to permit persons to whom the Software is
|
|
10
|
+
furnished to do so, subject to the following conditions:
|
|
11
|
+
|
|
12
|
+
The above copyright notice and this permission notice shall be included in all
|
|
13
|
+
copies or substantial portions of the Software.
|
|
14
|
+
|
|
15
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
16
|
+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
17
|
+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
18
|
+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
19
|
+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
20
|
+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
21
|
+
SOFTWARE.
|
package/README.md
ADDED
|
@@ -0,0 +1,115 @@
|
|
|
1
|
+
# create-vite-react-cli
|
|
2
|
+
|
|
3
|
+
一个快速创建基于 Vite 的 React 项目的脚手架工具。
|
|
4
|
+
|
|
5
|
+
## 功能特性
|
|
6
|
+
|
|
7
|
+
- ⚡️ 基于 Vite,极速启动
|
|
8
|
+
- ⚛️ 使用 React 18
|
|
9
|
+
- 🎨 开箱即用的项目模板
|
|
10
|
+
- 📦 自动配置 TypeScript 类型支持
|
|
11
|
+
- 🚀 现代化的开发体验
|
|
12
|
+
|
|
13
|
+
## 安装
|
|
14
|
+
|
|
15
|
+
### 全局安装
|
|
16
|
+
|
|
17
|
+
```bash
|
|
18
|
+
npm install -g create-vite-react-cli
|
|
19
|
+
```
|
|
20
|
+
|
|
21
|
+
### 使用 npx(推荐)
|
|
22
|
+
|
|
23
|
+
```bash
|
|
24
|
+
npx create-vite-react-cli my-app
|
|
25
|
+
```
|
|
26
|
+
|
|
27
|
+
## 使用方法
|
|
28
|
+
|
|
29
|
+
### 基本用法
|
|
30
|
+
|
|
31
|
+
```bash
|
|
32
|
+
create-vite-react my-app
|
|
33
|
+
```
|
|
34
|
+
|
|
35
|
+
或者使用 npx:
|
|
36
|
+
|
|
37
|
+
```bash
|
|
38
|
+
npx create-vite-react-cli my-app
|
|
39
|
+
```
|
|
40
|
+
|
|
41
|
+
### 交互式创建
|
|
42
|
+
|
|
43
|
+
如果不提供项目名称,工具会提示您输入:
|
|
44
|
+
|
|
45
|
+
```bash
|
|
46
|
+
create-vite-react
|
|
47
|
+
```
|
|
48
|
+
|
|
49
|
+
## 项目结构
|
|
50
|
+
|
|
51
|
+
创建的项目包含以下结构:
|
|
52
|
+
|
|
53
|
+
```
|
|
54
|
+
my-app/
|
|
55
|
+
├── public/
|
|
56
|
+
│ ├── vite.svg
|
|
57
|
+
│ └── react.svg
|
|
58
|
+
├── src/
|
|
59
|
+
│ ├── App.jsx
|
|
60
|
+
│ ├── App.css
|
|
61
|
+
│ ├── main.jsx
|
|
62
|
+
│ └── index.css
|
|
63
|
+
├── index.html
|
|
64
|
+
├── vite.config.js
|
|
65
|
+
├── package.json
|
|
66
|
+
└── README.md
|
|
67
|
+
```
|
|
68
|
+
|
|
69
|
+
## 创建后的步骤
|
|
70
|
+
|
|
71
|
+
1. 进入项目目录:
|
|
72
|
+
```bash
|
|
73
|
+
cd my-app
|
|
74
|
+
```
|
|
75
|
+
|
|
76
|
+
2. 安装依赖:
|
|
77
|
+
```bash
|
|
78
|
+
npm install
|
|
79
|
+
```
|
|
80
|
+
|
|
81
|
+
3. 启动开发服务器:
|
|
82
|
+
```bash
|
|
83
|
+
npm run dev
|
|
84
|
+
```
|
|
85
|
+
|
|
86
|
+
4. 构建生产版本:
|
|
87
|
+
```bash
|
|
88
|
+
npm run build
|
|
89
|
+
```
|
|
90
|
+
|
|
91
|
+
5. 预览生产构建:
|
|
92
|
+
```bash
|
|
93
|
+
npm run preview
|
|
94
|
+
```
|
|
95
|
+
|
|
96
|
+
## 发布到 npm
|
|
97
|
+
|
|
98
|
+
1. 确保已登录 npm:
|
|
99
|
+
```bash
|
|
100
|
+
npm login
|
|
101
|
+
```
|
|
102
|
+
|
|
103
|
+
2. 发布包:
|
|
104
|
+
```bash
|
|
105
|
+
npm publish
|
|
106
|
+
```
|
|
107
|
+
|
|
108
|
+
## 许可证
|
|
109
|
+
|
|
110
|
+
MIT
|
|
111
|
+
|
|
112
|
+
## 作者
|
|
113
|
+
|
|
114
|
+
Pan Min
|
|
115
|
+
|
package/bin/cli.js
ADDED
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
#!/usr/bin/env node
|
|
2
|
+
|
|
3
|
+
const { program } = require('commander');
|
|
4
|
+
const createProject = require('../src/index');
|
|
5
|
+
|
|
6
|
+
program
|
|
7
|
+
.name('create-vite-react-cli')
|
|
8
|
+
.description('快速创建基于 Vite 的 React 项目')
|
|
9
|
+
.version('1.0.1')
|
|
10
|
+
.argument('[project-name]', '项目名称')
|
|
11
|
+
.action((projectName) => {
|
|
12
|
+
createProject(projectName);
|
|
13
|
+
});
|
|
14
|
+
|
|
15
|
+
program.parse();
|
|
16
|
+
|
package/package.json
ADDED
|
@@ -0,0 +1,45 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "create-vite-react-cli",
|
|
3
|
+
"version": "1.0.1",
|
|
4
|
+
"description": "一个快速创建基于 Vite 的 React 项目的脚手架工具。",
|
|
5
|
+
"main": "index.js",
|
|
6
|
+
"bin": {
|
|
7
|
+
"create-vite-react-cli": "bin/cli.js"
|
|
8
|
+
},
|
|
9
|
+
"files": [
|
|
10
|
+
"bin",
|
|
11
|
+
"src",
|
|
12
|
+
"templates"
|
|
13
|
+
],
|
|
14
|
+
"engines": {
|
|
15
|
+
"node": ">=14.0.0"
|
|
16
|
+
},
|
|
17
|
+
"scripts": {
|
|
18
|
+
"test": "echo \"Error: no test specified\" && exit 1"
|
|
19
|
+
},
|
|
20
|
+
"repository": {
|
|
21
|
+
"type": "git",
|
|
22
|
+
"url": "git+https://github.com/pm0915/create-vite-react-cli.git"
|
|
23
|
+
},
|
|
24
|
+
"keywords": [
|
|
25
|
+
"vite",
|
|
26
|
+
"react",
|
|
27
|
+
"scaffold",
|
|
28
|
+
"cli",
|
|
29
|
+
"create-react-app",
|
|
30
|
+
"template"
|
|
31
|
+
],
|
|
32
|
+
"author": "",
|
|
33
|
+
"license": "MIT",
|
|
34
|
+
"bugs": {
|
|
35
|
+
"url": "https://github.com/pm0915/create-vite-react-cli/issues"
|
|
36
|
+
},
|
|
37
|
+
"homepage": "https://github.com/pm0915/create-vite-react-cli#readme",
|
|
38
|
+
"dependencies": {
|
|
39
|
+
"chalk": "^4.1.2",
|
|
40
|
+
"commander": "^9.4.1",
|
|
41
|
+
"fs-extra": "^11.1.1",
|
|
42
|
+
"inquirer": "^8.2.5",
|
|
43
|
+
"ora": "^5.4.1"
|
|
44
|
+
}
|
|
45
|
+
}
|
package/src/index.js
ADDED
|
@@ -0,0 +1,86 @@
|
|
|
1
|
+
const fs = require('fs-extra');
|
|
2
|
+
const path = require('path');
|
|
3
|
+
const chalk = require('chalk');
|
|
4
|
+
const ora = require('ora');
|
|
5
|
+
const inquirer = require('inquirer');
|
|
6
|
+
|
|
7
|
+
async function createProject(projectName) {
|
|
8
|
+
try {
|
|
9
|
+
// 如果没有提供项目名称,则询问用户
|
|
10
|
+
if (!projectName) {
|
|
11
|
+
const answer = await inquirer.prompt([
|
|
12
|
+
{
|
|
13
|
+
type: 'input',
|
|
14
|
+
name: 'name',
|
|
15
|
+
message: '请输入项目名称:',
|
|
16
|
+
default: 'my-vite-react-app',
|
|
17
|
+
validate: (input) => {
|
|
18
|
+
if (!input.trim()) {
|
|
19
|
+
return '项目名称不能为空';
|
|
20
|
+
}
|
|
21
|
+
if (!/^[a-z0-9-]+$/.test(input)) {
|
|
22
|
+
return '项目名称只能包含小写字母、数字和连字符';
|
|
23
|
+
}
|
|
24
|
+
return true;
|
|
25
|
+
}
|
|
26
|
+
}
|
|
27
|
+
]);
|
|
28
|
+
projectName = answer.name;
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
// 验证项目名称格式
|
|
32
|
+
if (!/^[a-z0-9-]+$/.test(projectName)) {
|
|
33
|
+
console.error(chalk.red('错误: 项目名称只能包含小写字母、数字和连字符'));
|
|
34
|
+
process.exit(1);
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
const targetDir = path.resolve(process.cwd(), projectName);
|
|
38
|
+
|
|
39
|
+
// 检查目录是否已存在
|
|
40
|
+
if (await fs.pathExists(targetDir)) {
|
|
41
|
+
const { overwrite } = await inquirer.prompt([
|
|
42
|
+
{
|
|
43
|
+
type: 'confirm',
|
|
44
|
+
name: 'overwrite',
|
|
45
|
+
message: `目录 ${projectName} 已存在,是否覆盖?`,
|
|
46
|
+
default: false
|
|
47
|
+
}
|
|
48
|
+
]);
|
|
49
|
+
|
|
50
|
+
if (overwrite) {
|
|
51
|
+
await fs.remove(targetDir);
|
|
52
|
+
} else {
|
|
53
|
+
console.log(chalk.yellow('操作已取消'));
|
|
54
|
+
process.exit(0);
|
|
55
|
+
}
|
|
56
|
+
}
|
|
57
|
+
|
|
58
|
+
const spinner = ora('正在创建项目...').start();
|
|
59
|
+
|
|
60
|
+
// 创建项目目录
|
|
61
|
+
await fs.ensureDir(targetDir);
|
|
62
|
+
|
|
63
|
+
// 复制模板文件
|
|
64
|
+
const templateDir = path.join(__dirname, '../templates');
|
|
65
|
+
await fs.copy(templateDir, targetDir);
|
|
66
|
+
|
|
67
|
+
// 读取并更新 package.json
|
|
68
|
+
const packageJsonPath = path.join(targetDir, 'package.json');
|
|
69
|
+
const packageJson = await fs.readJson(packageJsonPath);
|
|
70
|
+
packageJson.name = projectName;
|
|
71
|
+
await fs.writeJson(packageJsonPath, packageJson, { spaces: 2 });
|
|
72
|
+
|
|
73
|
+
spinner.succeed('项目创建成功!');
|
|
74
|
+
|
|
75
|
+
console.log(chalk.green('\n下一步:'));
|
|
76
|
+
console.log(chalk.cyan(` cd ${projectName}`));
|
|
77
|
+
console.log(chalk.cyan(' npm install'));
|
|
78
|
+
console.log(chalk.cyan(' npm run dev\n'));
|
|
79
|
+
} catch (error) {
|
|
80
|
+
console.error(chalk.red('创建项目时出错:'), error.message);
|
|
81
|
+
process.exit(1);
|
|
82
|
+
}
|
|
83
|
+
}
|
|
84
|
+
|
|
85
|
+
module.exports = createProject;
|
|
86
|
+
|
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
# React + Vite
|
|
2
|
+
|
|
3
|
+
这是一个使用 [Vite](https://vitejs.dev/) 创建的 React 项目模板。
|
|
4
|
+
|
|
5
|
+
## 开始使用
|
|
6
|
+
|
|
7
|
+
### 安装依赖
|
|
8
|
+
|
|
9
|
+
```bash
|
|
10
|
+
npm install
|
|
11
|
+
```
|
|
12
|
+
|
|
13
|
+
### 开发
|
|
14
|
+
|
|
15
|
+
```bash
|
|
16
|
+
npm run dev
|
|
17
|
+
```
|
|
18
|
+
|
|
19
|
+
### 构建
|
|
20
|
+
|
|
21
|
+
```bash
|
|
22
|
+
npm run build
|
|
23
|
+
```
|
|
24
|
+
|
|
25
|
+
### 预览生产构建
|
|
26
|
+
|
|
27
|
+
```bash
|
|
28
|
+
npm run preview
|
|
29
|
+
```
|
|
30
|
+
|
|
31
|
+
## 了解更多
|
|
32
|
+
|
|
33
|
+
- [React 文档](https://react.dev/)
|
|
34
|
+
- [Vite 文档](https://vitejs.dev/)
|
|
35
|
+
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
<!doctype html>
|
|
2
|
+
<html lang="zh-CN">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="UTF-8" />
|
|
5
|
+
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
|
|
6
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
7
|
+
<title>Vite + React</title>
|
|
8
|
+
</head>
|
|
9
|
+
<body>
|
|
10
|
+
<div id="root"></div>
|
|
11
|
+
<script type="module" src="/src/main.jsx"></script>
|
|
12
|
+
</body>
|
|
13
|
+
</html>
|
|
14
|
+
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "my-vite-react-app",
|
|
3
|
+
"private": true,
|
|
4
|
+
"version": "0.0.0",
|
|
5
|
+
"type": "module",
|
|
6
|
+
"scripts": {
|
|
7
|
+
"dev": "vite",
|
|
8
|
+
"build": "vite build",
|
|
9
|
+
"preview": "vite preview"
|
|
10
|
+
},
|
|
11
|
+
"dependencies": {
|
|
12
|
+
"react": "^18.2.0",
|
|
13
|
+
"react-dom": "^18.2.0"
|
|
14
|
+
},
|
|
15
|
+
"devDependencies": {
|
|
16
|
+
"@types/react": "^18.2.43",
|
|
17
|
+
"@types/react-dom": "^18.2.17",
|
|
18
|
+
"@vitejs/plugin-react": "^4.2.1",
|
|
19
|
+
"vite": "^5.0.8"
|
|
20
|
+
}
|
|
21
|
+
}
|
|
22
|
+
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="35.93" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 228"><path fill="#00D8FF" d="M210.483 73.824a171.49 171.49 0 0 0-11.283-12.978c-.404-.466-.827-.928-1.238-1.4c-7.464-8.563-15.868-15.939-24.959-22.256a9.87 9.87 0 0 0-2.422-1.005a128.22 128.22 0 0 0-9.276-2.756a132.952 132.952 0 0 0-20.177-2.729a9.9 9.9 0 0 0-1.15-.04H128.01c-1.4.015-2.8.04-4.19.13c-6.97.38-13.88 1.23-20.65 2.55a9.95 9.95 0 0 0-1.87.48c-3.12.75-6.19 1.63-9.2 2.65a9.85 9.85 0 0 0-1.72.73a115.388 115.388 0 0 0-9.12 4.54a134.838 134.838 0 0 0-25.037 22.19a9.98 9.98 0 0 0-1.13 1.28a145.227 145.227 0 0 0-11.16 12.94a125.876 125.876 0 0 0-7.35 10.48a156.152 156.152 0 0 0-9.07 17.15c-.25.52-.48 1.05-.71 1.58a114.27 114.27 0 0 0-5.13 14.88a9.97 9.97 0 0 0-.28 1.16a125.67 125.67 0 0 0-3.18 15.75a9.94 9.94 0 0 0-.08 1.22v.66a132.52 132.52 0 0 0-.17 13.16a9.9 9.9 0 0 0 .08 1.22c.33 2.62.75 5.22 1.26 7.8a9.97 9.97 0 0 0 .28 1.16c.95 3.88 2.05 7.72 3.28 11.52c.23.53.46 1.06.71 1.58a156.152 156.152 0 0 0 9.07 17.15c1.55 2.8 3.2 5.55 4.93 8.25a125.876 125.876 0 0 0 7.35 10.48a145.227 145.227 0 0 0 11.16 12.94a9.98 9.98 0 0 0 1.13 1.28a134.838 134.838 0 0 0 25.037 22.19a115.388 115.388 0 0 0 9.12 4.54a9.85 9.85 0 0 0 1.72.73c2.95.98 5.97 1.84 9.03 2.56a9.95 9.95 0 0 0 1.87.48c6.77 1.32 13.68 2.17 20.65 2.55c1.39.09 2.79.12 4.19.13h1.93c1.4-.015 2.8-.04 4.19-.13c6.97-.38 13.88-1.23 20.65-2.55a9.95 9.95 0 0 0 1.87-.48c3.06-.72 6.08-1.58 9.03-2.56a9.85 9.85 0 0 0 1.72-.73a115.388 115.388 0 0 0 9.12-4.54a134.838 134.838 0 0 0 25.037-22.19a9.98 9.98 0 0 0 1.13-1.28a145.227 145.227 0 0 0 11.16-12.94c1.73-2.7 3.38-5.45 4.93-8.25a156.152 156.152 0 0 0 9.07-17.15c.25-.52.48-1.05.71-1.58a114.27 114.27 0 0 0 5.13-14.88a9.97 9.97 0 0 0 .28-1.16c.51-2.58.93-5.18 1.26-7.8a9.9 9.9 0 0 0 .08-1.22v-.66a132.52 132.52 0 0 0-.17-13.16a9.9 9.9 0 0 0-.08-1.22c-.33-2.62-.75-5.22-1.26-7.8a9.97 9.97 0 0 0-.28-1.16a114.27 114.27 0 0 0-5.13-14.88c-.23-.53-.46-1.06-.71-1.58a156.152 156.152 0 0 0-9.07-17.15a125.876 125.876 0 0 0-7.35-10.48Zm-5.376 20.45c.2.42.4.85.59 1.28c1.55 3.4 2.98 6.86 4.27 10.37c.08.22.16.44.23.66c1.15 3.23 2.2 6.5 3.13 9.8c.05.18.1.36.15.54c.7 2.55 1.35 5.12 1.93 7.7c.03.13.06.26.09.39c.52 2.3.98 4.62 1.38 6.95c.02.12.04.24.06.36c.35 2.05.66 4.11.92 6.18c.01.1.02.2.03.3c.22 1.78.4 3.57.54 5.36c.01.12.02.24.03.36c.1 1.5.18 3 .23 4.5c0 .08 0 .16.01.24c.03 1.1.05 2.2.05 3.3c0 .37 0 .74-.01 1.11c0 .55-.02 1.1-.04 1.65c-.01.24-.02.48-.04.72c-.05 1.5-.13 3-.23 4.5c-.01.12-.02.24-.03.36c-.14 1.79-.32 3.58-.54 5.36c-.01.1-.02.2-.03.3c-.26 2.07-.57 4.13-.92 6.18c-.02.12-.04.24-.06.36c-.4 2.33-.86 4.65-1.38 6.95c-.03.13-.06.26-.09.39c-.58 2.58-1.23 5.15-1.93 7.7c-.05.18-.1.36-.15.54c-.93 3.3-1.98 6.57-3.13 9.8c-.07.22-.15.44-.23.66c-1.29 3.51-2.72 6.97-4.27 10.37c-.19.43-.39.86-.59 1.28a134.376 134.376 0 0 1-8.89 15.48a115.22 115.22 0 0 1-6.15 8.88a125.3 125.3 0 0 1-9.78 11.2a115.5 115.5 0 0 1-8.56 8.12a134.7 134.7 0 0 1-22.12 16.12a115.4 115.4 0 0 1-7.84 4.1a125.4 125.4 0 0 1-17.15 6.12a115.5 115.5 0 0 1-8.88 2.12a134.7 134.7 0 0 1-24.75 2.3c-.46 0-.92-.01-1.38-.02c-3.3-.08-6.58-.3-9.83-.66a115.5 115.5 0 0 1-8.88-2.12a125.4 125.4 0 0 1-17.15-6.12a115.4 115.4 0 0 1-7.84-4.1a134.7 134.7 0 0 1-22.12-16.12a115.5 115.5 0 0 1-8.56-8.12a125.3 125.3 0 0 1-9.78-11.2a115.22 115.22 0 0 1-6.15-8.88a134.376 134.376 0 0 1-8.89-15.48c-.2-.42-.4-.85-.59-1.28c-1.55-3.4-2.98-6.86-4.27-10.37a115.22 115.22 0 0 1-.23-.66c-1.15-3.23-2.2-6.5-3.13-9.8a125.3 125.3 0 0 1-.15-.54c-.7-2.55-1.35-5.12-1.93-7.7a115.5 115.5 0 0 1-.09-.39c-.52-2.3-.98-4.62-1.38-6.95a134.7 134.7 0 0 1-.06-.36c-.35-2.05-.66-4.11-.92-6.18a115.4 115.4 0 0 1-.03-.3c-.22-1.78-.4-3.57-.54-5.36a125.4 125.4 0 0 1-.03-.36c-.1-1.5-.18-3-.23-4.5a115.5 115.5 0 0 1-.04-.72c-.02-.55-.04-1.1-.04-1.65c0-.37 0-.74-.01-1.11c0-1.1-.02-2.2-.05-3.3a134.7 134.7 0 0 1-.01-.24c-.05-1.5-.13-3-.23-4.5c-.01-.12-.02-.24-.03-.36c-.14-1.79-.32-3.58-.54-5.36c-.01-.1-.02-.2-.03-.3c-.26-2.07-.57-4.13-.92-6.18c-.02-.12-.04-.24-.06-.36c-.4-2.33-.86-4.65-1.38-6.95c-.03-.13-.06-.26-.09-.39c-.58-2.58-1.23-5.15-1.93-7.7c-.05-.18-.1-.36-.15-.54c-.93-3.3-1.98-6.57-3.13-9.8c-.07-.22-.15-.44-.23-.66c1.29-3.51 2.72-6.97 4.27-10.37c.19-.43.39-.86.59-1.28a134.376 134.376 0 0 1 8.89-15.48a115.22 115.22 0 0 1 6.15-8.88a125.3 125.3 0 0 1 9.78-11.2a115.5 115.5 0 0 1 8.56-8.12a134.7 134.7 0 0 1 22.12-16.12a115.4 115.4 0 0 1 7.84-4.1a125.4 125.4 0 0 1 17.15-6.12a115.5 115.5 0 0 1 8.88-2.12a134.7 134.7 0 0 1 24.75-2.3c.46 0 .92.01 1.38.02c3.3.08 6.58.3 9.83.66a115.5 115.5 0 0 1 8.88 2.12a125.4 125.4 0 0 1 17.15 6.12a115.4 115.4 0 0 1 7.84 4.1a134.7 134.7 0 0 1 22.12 16.12a115.5 115.5 0 0 1 8.56 8.12a125.3 125.3 0 0 1 9.78 11.2a115.22 115.22 0 0 1 6.15 8.88a134.376 134.376 0 0 1 8.89 15.48Z"></path><path fill="#00D8FF" d="M210.483 73.824a171.49 171.49 0 0 0-11.283-12.978c-.404-.466-.827-.928-1.238-1.4c-7.464-8.563-15.868-15.939-24.959-22.256a9.87 9.87 0 0 0-2.422-1.005a128.22 128.22 0 0 0-9.276-2.756a132.952 132.952 0 0 0-20.177-2.729a9.9 9.9 0 0 0-1.15-.04H128.01c-1.4.015-2.8.04-4.19.13c-6.97.38-13.88 1.23-20.65 2.55a9.95 9.95 0 0 0-1.87.48c-3.12.75-6.19 1.63-9.2 2.65a9.85 9.85 0 0 0-1.72.73a115.388 115.388 0 0 0-9.12 4.54a134.838 134.838 0 0 0-25.037 22.19a9.98 9.98 0 0 0-1.13 1.28a145.227 145.227 0 0 0-11.16 12.94a125.876 125.876 0 0 0-7.35 10.48a156.152 156.152 0 0 0-9.07 17.15c-.25.52-.48 1.05-.71 1.58a114.27 114.27 0 0 0-5.13 14.88a9.97 9.97 0 0 0-.28 1.16a125.67 125.67 0 0 0-3.18 15.75a9.94 9.94 0 0 0-.08 1.22v.66a132.52 132.52 0 0 0-.17 13.16a9.9 9.9 0 0 0 .08 1.22c.33 2.62.75 5.22 1.26 7.8a9.97 9.97 0 0 0 .28 1.16c.95 3.88 2.05 7.72 3.28 11.52c.23.53.46 1.06.71 1.58a156.152 156.152 0 0 0 9.07 17.15c1.55 2.8 3.2 5.55 4.93 8.25a125.876 125.876 0 0 0 7.35 10.48a145.227 145.227 0 0 0 11.16 12.94a9.98 9.98 0 0 0 1.13 1.28a134.838 134.838 0 0 0 25.037 22.19a115.388 115.388 0 0 0 9.12 4.54a9.85 9.85 0 0 0 1.72.73c2.95.98 5.97 1.84 9.03 2.56a9.95 9.95 0 0 0 1.87.48c6.77 1.32 13.68 2.17 20.65 2.55c1.39.09 2.79.12 4.19.13h1.93c1.4-.015 2.8-.04 4.19-.13c6.97-.38 13.88-1.23 20.65-2.55a9.95 9.95 0 0 0 1.87-.48c3.06-.72 6.08-1.58 9.03-2.56a9.85 9.85 0 0 0 1.72-.73a115.388 115.388 0 0 0 9.12-4.54a134.838 134.838 0 0 0 25.037-22.19a9.98 9.98 0 0 0 1.13-1.28a145.227 145.227 0 0 0 11.16-12.94c1.73-2.7 3.38-5.45 4.93-8.25a156.152 156.152 0 0 0 9.07-17.15c.25-.52.48-1.05.71-1.58a114.27 114.27 0 0 0 5.13-14.88a9.97 9.97 0 0 0 .28-1.16c.51-2.58.93-5.18 1.26-7.8a9.9 9.9 0 0 0 .08-1.22v-.66a132.52 132.52 0 0 0-.17-13.16a9.9 9.9 0 0 0-.08-1.22c-.33-2.62-.75-5.22-1.26-7.8a9.97 9.97 0 0 0-.28-1.16a114.27 114.27 0 0 0-5.13-14.88c-.23-.53-.46-1.06-.71-1.58a156.152 156.152 0 0 0-9.07-17.15a125.876 125.876 0 0 0-7.35-10.48Zm-5.376 20.45c.2.42.4.85.59 1.28c1.55 3.4 2.98 6.86 4.27 10.37c.08.22.16.44.23.66c1.15 3.23 2.2 6.5 3.13 9.8c.05.18.1.36.15.54c.7 2.55 1.35 5.12 1.93 7.7c.03.13.06.26.09.39c.52 2.3.98 4.62 1.38 6.95c.02.12.04.24.06.36c.35 2.05.66 4.11.92 6.18c.01.1.02.2.03.3c.22 1.78.4 3.57.54 5.36c.01.12.02.24.03.36c.1 1.5.18 3 .23 4.5c0 .08 0 .16.01.24c.03 1.1.05 2.2.05 3.3c0 .37 0 .74-.01 1.11c0 .55-.02 1.1-.04 1.65c-.01.24-.02.48-.04.72c-.05 1.5-.13 3-.23 4.5c-.01.12-.02.24-.03.36c-.14 1.79-.32 3.58-.54 5.36c-.01.1-.02.2-.03.3c-.26 2.07-.57 4.13-.92 6.18c-.02.12-.04.24-.06.36c-.4 2.33-.86 4.65-1.38 6.95c-.03.13-.06.26-.09.39c-.58 2.58-1.23 5.15-1.93 7.7c-.05.18-.1.36-.15.54c-.93 3.3-1.98 6.57-3.13 9.8c-.07.22-.15.44-.23.66c-1.29 3.51-2.72 6.97-4.27 10.37c-.19.43-.39.86-.59 1.28a134.376 134.376 0 0 1-8.89 15.48a115.22 115.22 0 0 1-6.15 8.88a125.3 125.3 0 0 1-9.78 11.2a115.5 115.5 0 0 1-8.56 8.12a134.7 134.7 0 0 1-22.12 16.12a115.4 115.4 0 0 1-7.84 4.1a125.4 125.4 0 0 1-17.15 6.12a115.5 115.5 0 0 1-8.88 2.12a134.7 134.7 0 0 1-24.75 2.3c-.46 0-.92-.01-1.38-.02c-3.3-.08-6.58-.3-9.83-.66a115.5 115.5 0 0 1-8.88-2.12a125.4 125.4 0 0 1-17.15-6.12a115.4 115.4 0 0 1-7.84-4.1a134.7 134.7 0 0 1-22.12-16.12a115.5 115.5 0 0 1-8.56-8.12a125.3 125.3 0 0 1-9.78-11.2a115.22 115.22 0 0 1-6.15-8.88a134.376 134.376 0 0 1-8.89-15.48c-.2-.42-.4-.85-.59-1.28c-1.55-3.4-2.98-6.86-4.27-10.37a115.22 115.22 0 0 1-.23-.66c-1.15-3.23-2.2-6.5-3.13-9.8a125.3 125.3 0 0 1-.15-.54c-.7-2.55-1.35-5.12-1.93-7.7a115.5 115.5 0 0 1-.09-.39c-.52-2.3-.98-4.62-1.38-6.95a134.7 134.7 0 0 1-.06-.36c-.35-2.05-.66-4.11-.92-6.18a115.4 115.4 0 0 1-.03-.3c-.22-1.78-.4-3.57-.54-5.36a125.4 125.4 0 0 1-.03-.36c-.1-1.5-.18-3-.23-4.5a115.5 115.5 0 0 1-.04-.72c-.02-.55-.04-1.1-.04-1.65c0-.37 0-.74-.01-1.11c0-1.1-.02-2.2-.05-3.3a134.7 134.7 0 0 1-.01-.24c-.05-1.5-.13-3-.23-4.5c-.01-.12-.02-.24-.03-.36c-.14-1.79-.32-3.58-.54-5.36c-.01-.1-.02-.2-.03-.3c-.26-2.07-.57-4.13-.92-6.18c-.02-.12-.04-.24-.06-.36c-.4-2.33-.86-4.65-1.38-6.95c-.03-.13-.06-.26-.09-.39c-.58-2.58-1.23-5.15-1.93-7.7c-.05-.18-.1-.36-.15-.54c-.93-3.3-1.98-6.57-3.13-9.8c-.07-.22-.15-.44-.23-.66c1.29-3.51 2.72-6.97 4.27-10.37c.19-.43.39-.86.59-1.28a134.376 134.376 0 0 1 8.89-15.48a115.22 115.22 0 0 1 6.15-8.88a125.3 125.3 0 0 1 9.78-11.2a115.5 115.5 0 0 1 8.56-8.12a134.7 134.7 0 0 1 22.12-16.12a115.4 115.4 0 0 1 7.84-4.1a125.4 125.4 0 0 1 17.15-6.12a115.5 115.5 0 0 1 8.88-2.12a134.7 134.7 0 0 1 24.75-2.3c.46 0 .92.01 1.38.02c3.3.08 6.58.3 9.83.66a115.5 115.5 0 0 1 8.88 2.12a125.4 125.4 0 0 1 17.15 6.12a115.4 115.4 0 0 1 7.84 4.1a134.7 134.7 0 0 1 22.12 16.12a115.5 115.5 0 0 1 8.56 8.12a125.3 125.3 0 0 1 9.78 11.2a115.22 115.22 0 0 1 6.15 8.88a134.376 134.376 0 0 1 8.89 15.48Z"></path></svg>
|
|
2
|
+
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>
|
|
2
|
+
|
|
@@ -0,0 +1,43 @@
|
|
|
1
|
+
#root {
|
|
2
|
+
max-width: 1280px;
|
|
3
|
+
margin: 0 auto;
|
|
4
|
+
padding: 2rem;
|
|
5
|
+
text-align: center;
|
|
6
|
+
}
|
|
7
|
+
|
|
8
|
+
.logo {
|
|
9
|
+
height: 6em;
|
|
10
|
+
padding: 1.5em;
|
|
11
|
+
will-change: filter;
|
|
12
|
+
transition: filter 300ms;
|
|
13
|
+
}
|
|
14
|
+
.logo:hover {
|
|
15
|
+
filter: drop-shadow(0 0 2em #646cffaa);
|
|
16
|
+
}
|
|
17
|
+
.logo.react:hover {
|
|
18
|
+
filter: drop-shadow(0 0 2em #61dafbaa);
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
@keyframes logo-spin {
|
|
22
|
+
from {
|
|
23
|
+
transform: rotate(0deg);
|
|
24
|
+
}
|
|
25
|
+
to {
|
|
26
|
+
transform: rotate(360deg);
|
|
27
|
+
}
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
@media (prefers-reduced-motion: no-preference) {
|
|
31
|
+
a:nth-of-type(2) .logo {
|
|
32
|
+
animation: logo-spin infinite 20s linear;
|
|
33
|
+
}
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
.card {
|
|
37
|
+
padding: 2em;
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
.read-the-docs {
|
|
41
|
+
color: #888;
|
|
42
|
+
}
|
|
43
|
+
|
|
@@ -0,0 +1,34 @@
|
|
|
1
|
+
import { useState } from 'react'
|
|
2
|
+
import './App.css'
|
|
3
|
+
|
|
4
|
+
function App() {
|
|
5
|
+
const [count, setCount] = useState(0)
|
|
6
|
+
|
|
7
|
+
return (
|
|
8
|
+
<div className="App">
|
|
9
|
+
<div>
|
|
10
|
+
<a href="https://vitejs.dev" target="_blank" rel="noopener noreferrer">
|
|
11
|
+
<img src="/vite.svg" className="logo" alt="Vite logo" />
|
|
12
|
+
</a>
|
|
13
|
+
<a href="https://react.dev" target="_blank" rel="noopener noreferrer">
|
|
14
|
+
<img src="/react.svg" className="logo react" alt="React logo" />
|
|
15
|
+
</a>
|
|
16
|
+
</div>
|
|
17
|
+
<h1>Vite + React</h1>
|
|
18
|
+
<div className="card">
|
|
19
|
+
<button onClick={() => setCount((count) => count + 1)}>
|
|
20
|
+
计数是 {count}
|
|
21
|
+
</button>
|
|
22
|
+
<p>
|
|
23
|
+
编辑 <code>src/App.jsx</code> 并保存以测试 HMR
|
|
24
|
+
</p>
|
|
25
|
+
</div>
|
|
26
|
+
<p className="read-the-docs">
|
|
27
|
+
点击 Vite 和 React 的 logo 了解更多信息
|
|
28
|
+
</p>
|
|
29
|
+
</div>
|
|
30
|
+
)
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
export default App
|
|
34
|
+
|
|
@@ -0,0 +1,69 @@
|
|
|
1
|
+
:root {
|
|
2
|
+
font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
|
|
3
|
+
line-height: 1.5;
|
|
4
|
+
font-weight: 400;
|
|
5
|
+
|
|
6
|
+
color-scheme: light dark;
|
|
7
|
+
color: rgba(255, 255, 255, 0.87);
|
|
8
|
+
background-color: #242424;
|
|
9
|
+
|
|
10
|
+
font-synthesis: none;
|
|
11
|
+
text-rendering: optimizeLegibility;
|
|
12
|
+
-webkit-font-smoothing: antialiased;
|
|
13
|
+
-moz-osx-font-smoothing: grayscale;
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
a {
|
|
17
|
+
font-weight: 500;
|
|
18
|
+
color: #646cff;
|
|
19
|
+
text-decoration: inherit;
|
|
20
|
+
}
|
|
21
|
+
a:hover {
|
|
22
|
+
color: #535bf2;
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
body {
|
|
26
|
+
margin: 0;
|
|
27
|
+
display: flex;
|
|
28
|
+
place-items: center;
|
|
29
|
+
min-width: 320px;
|
|
30
|
+
min-height: 100vh;
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
h1 {
|
|
34
|
+
font-size: 3.2em;
|
|
35
|
+
line-height: 1.1;
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
button {
|
|
39
|
+
border-radius: 8px;
|
|
40
|
+
border: 1px solid transparent;
|
|
41
|
+
padding: 0.6em 1.2em;
|
|
42
|
+
font-size: 1em;
|
|
43
|
+
font-weight: 500;
|
|
44
|
+
font-family: inherit;
|
|
45
|
+
background-color: #1a1a1a;
|
|
46
|
+
cursor: pointer;
|
|
47
|
+
transition: border-color 0.25s;
|
|
48
|
+
}
|
|
49
|
+
button:hover {
|
|
50
|
+
border-color: #646cff;
|
|
51
|
+
}
|
|
52
|
+
button:focus,
|
|
53
|
+
button:focus-visible {
|
|
54
|
+
outline: 4px auto -webkit-focus-ring-color;
|
|
55
|
+
}
|
|
56
|
+
|
|
57
|
+
@media (prefers-color-scheme: light) {
|
|
58
|
+
:root {
|
|
59
|
+
color: #213547;
|
|
60
|
+
background-color: #ffffff;
|
|
61
|
+
}
|
|
62
|
+
a:hover {
|
|
63
|
+
color: #747bff;
|
|
64
|
+
}
|
|
65
|
+
button {
|
|
66
|
+
background-color: #f9f9f9;
|
|
67
|
+
}
|
|
68
|
+
}
|
|
69
|
+
|