From b6e5cb354c339e340ae06c1b1928049bb499d1cc Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=8D=89=E9=9E=8B=E6=B2=A1=E5=8F=B7?= <308487730@qq.com>
Date: Sat, 20 May 2023 22:59:01 +0800
Subject: [PATCH 1/5] feat: template-react-ts, template-vanilla-ts,
template-vue-ts
---
template-react-ts/.eslintrc.cjs | 14 +++
template-react-ts/_gitignore | 24 +++++
template-react-ts/index.html | 13 +++
template-react-ts/package.json | 28 ++++++
template-react-ts/public/vite.svg | 1 +
template-react-ts/src/App.css | 42 ++++++++
template-react-ts/src/App.tsx | 35 +++++++
template-react-ts/src/assets/react.svg | 1 +
template-react-ts/src/index.css | 69 +++++++++++++
template-react-ts/src/main.tsx | 10 ++
template-react-ts/src/vite-env.d.ts | 1 +
template-react-ts/tsconfig.json | 25 +++++
template-react-ts/tsconfig.node.json | 10 ++
template-react-ts/vite.config.ts | 7 ++
template-vanilla-ts/_gitignore | 24 +++++
template-vanilla-ts/index.html | 13 +++
template-vanilla-ts/package.json | 15 +++
template-vanilla-ts/public/vite.svg | 1 +
template-vanilla-ts/src/counter.ts | 9 ++
template-vanilla-ts/src/main.ts | 24 +++++
template-vanilla-ts/src/style.css | 97 +++++++++++++++++++
template-vanilla-ts/src/typescript.svg | 1 +
template-vanilla-ts/src/vite-env.d.ts | 1 +
template-vanilla-ts/tsconfig.json | 23 +++++
template-vue-ts/.vscode/extensions.json | 3 +
template-vue-ts/README.md | 18 ++++
template-vue-ts/_gitignore | 24 +++++
template-vue-ts/index.html | 13 +++
template-vue-ts/package.json | 20 ++++
template-vue-ts/public/vite.svg | 1 +
template-vue-ts/src/App.vue | 30 ++++++
template-vue-ts/src/assets/vue.svg | 1 +
template-vue-ts/src/components/HelloWorld.vue | 38 ++++++++
template-vue-ts/src/main.ts | 5 +
template-vue-ts/src/style.css | 80 +++++++++++++++
template-vue-ts/src/vite-env.d.ts | 1 +
template-vue-ts/tsconfig.json | 25 +++++
template-vue-ts/tsconfig.node.json | 10 ++
template-vue-ts/vite.config.ts | 7 ++
39 files changed, 764 insertions(+)
create mode 100644 template-react-ts/.eslintrc.cjs
create mode 100644 template-react-ts/_gitignore
create mode 100644 template-react-ts/index.html
create mode 100644 template-react-ts/package.json
create mode 100644 template-react-ts/public/vite.svg
create mode 100644 template-react-ts/src/App.css
create mode 100644 template-react-ts/src/App.tsx
create mode 100644 template-react-ts/src/assets/react.svg
create mode 100644 template-react-ts/src/index.css
create mode 100644 template-react-ts/src/main.tsx
create mode 100644 template-react-ts/src/vite-env.d.ts
create mode 100644 template-react-ts/tsconfig.json
create mode 100644 template-react-ts/tsconfig.node.json
create mode 100644 template-react-ts/vite.config.ts
create mode 100644 template-vanilla-ts/_gitignore
create mode 100644 template-vanilla-ts/index.html
create mode 100644 template-vanilla-ts/package.json
create mode 100644 template-vanilla-ts/public/vite.svg
create mode 100644 template-vanilla-ts/src/counter.ts
create mode 100644 template-vanilla-ts/src/main.ts
create mode 100644 template-vanilla-ts/src/style.css
create mode 100644 template-vanilla-ts/src/typescript.svg
create mode 100644 template-vanilla-ts/src/vite-env.d.ts
create mode 100644 template-vanilla-ts/tsconfig.json
create mode 100644 template-vue-ts/.vscode/extensions.json
create mode 100644 template-vue-ts/README.md
create mode 100644 template-vue-ts/_gitignore
create mode 100644 template-vue-ts/index.html
create mode 100644 template-vue-ts/package.json
create mode 100644 template-vue-ts/public/vite.svg
create mode 100644 template-vue-ts/src/App.vue
create mode 100644 template-vue-ts/src/assets/vue.svg
create mode 100644 template-vue-ts/src/components/HelloWorld.vue
create mode 100644 template-vue-ts/src/main.ts
create mode 100644 template-vue-ts/src/style.css
create mode 100644 template-vue-ts/src/vite-env.d.ts
create mode 100644 template-vue-ts/tsconfig.json
create mode 100644 template-vue-ts/tsconfig.node.json
create mode 100644 template-vue-ts/vite.config.ts
diff --git a/template-react-ts/.eslintrc.cjs b/template-react-ts/.eslintrc.cjs
new file mode 100644
index 0000000..4020bcb
--- /dev/null
+++ b/template-react-ts/.eslintrc.cjs
@@ -0,0 +1,14 @@
+module.exports = {
+ env: { browser: true, es2020: true },
+ extends: [
+ 'eslint:recommended',
+ 'plugin:@typescript-eslint/recommended',
+ 'plugin:react-hooks/recommended',
+ ],
+ parser: '@typescript-eslint/parser',
+ parserOptions: { ecmaVersion: 'latest', sourceType: 'module' },
+ plugins: ['react-refresh'],
+ rules: {
+ 'react-refresh/only-export-components': 'warn',
+ },
+}
diff --git a/template-react-ts/_gitignore b/template-react-ts/_gitignore
new file mode 100644
index 0000000..a547bf3
--- /dev/null
+++ b/template-react-ts/_gitignore
@@ -0,0 +1,24 @@
+# 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
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
diff --git a/template-react-ts/index.html b/template-react-ts/index.html
new file mode 100644
index 0000000..e0d1c84
--- /dev/null
+++ b/template-react-ts/index.html
@@ -0,0 +1,13 @@
+
+
+
+
+
+
+ Vite + React + TS
+
+
+
+
+
+
diff --git a/template-react-ts/package.json b/template-react-ts/package.json
new file mode 100644
index 0000000..63bd229
--- /dev/null
+++ b/template-react-ts/package.json
@@ -0,0 +1,28 @@
+{
+ "name": "vite-react-typescript-starter",
+ "private": true,
+ "version": "0.0.0",
+ "type": "module",
+ "scripts": {
+ "dev": "vite",
+ "build": "tsc && vite build",
+ "lint": "eslint src --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
+ "preview": "vite preview"
+ },
+ "dependencies": {
+ "react": "^18.2.0",
+ "react-dom": "^18.2.0"
+ },
+ "devDependencies": {
+ "@types/react": "^18.0.37",
+ "@types/react-dom": "^18.0.11",
+ "@typescript-eslint/eslint-plugin": "^5.59.0",
+ "@typescript-eslint/parser": "^5.59.0",
+ "@vitejs/plugin-react": "^4.0.0",
+ "eslint": "^8.38.0",
+ "eslint-plugin-react-hooks": "^4.6.0",
+ "eslint-plugin-react-refresh": "^0.3.4",
+ "typescript": "^5.0.2",
+ "vite": "^4.3.2"
+ }
+}
diff --git a/template-react-ts/public/vite.svg b/template-react-ts/public/vite.svg
new file mode 100644
index 0000000..e7b8dfb
--- /dev/null
+++ b/template-react-ts/public/vite.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/template-react-ts/src/App.css b/template-react-ts/src/App.css
new file mode 100644
index 0000000..b9d355d
--- /dev/null
+++ b/template-react-ts/src/App.css
@@ -0,0 +1,42 @@
+#root {
+ max-width: 1280px;
+ margin: 0 auto;
+ padding: 2rem;
+ text-align: center;
+}
+
+.logo {
+ height: 6em;
+ padding: 1.5em;
+ will-change: filter;
+ transition: filter 300ms;
+}
+.logo:hover {
+ filter: drop-shadow(0 0 2em #646cffaa);
+}
+.logo.react:hover {
+ filter: drop-shadow(0 0 2em #61dafbaa);
+}
+
+@keyframes logo-spin {
+ from {
+ transform: rotate(0deg);
+ }
+ to {
+ transform: rotate(360deg);
+ }
+}
+
+@media (prefers-reduced-motion: no-preference) {
+ a:nth-of-type(2) .logo {
+ animation: logo-spin infinite 20s linear;
+ }
+}
+
+.card {
+ padding: 2em;
+}
+
+.read-the-docs {
+ color: #888;
+}
diff --git a/template-react-ts/src/App.tsx b/template-react-ts/src/App.tsx
new file mode 100644
index 0000000..afe48ac
--- /dev/null
+++ b/template-react-ts/src/App.tsx
@@ -0,0 +1,35 @@
+import { useState } from 'react'
+import reactLogo from './assets/react.svg'
+import viteLogo from '/vite.svg'
+import './App.css'
+
+function App() {
+ const [count, setCount] = useState(0)
+
+ return (
+ <>
+
+ Vite + React
+
+
+
+ Edit src/App.tsx
and save to test HMR
+
+
+
+ Click on the Vite and React logos to learn more
+
+ >
+ )
+}
+
+export default App
diff --git a/template-react-ts/src/assets/react.svg b/template-react-ts/src/assets/react.svg
new file mode 100644
index 0000000..6c87de9
--- /dev/null
+++ b/template-react-ts/src/assets/react.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/template-react-ts/src/index.css b/template-react-ts/src/index.css
new file mode 100644
index 0000000..2c3fac6
--- /dev/null
+++ b/template-react-ts/src/index.css
@@ -0,0 +1,69 @@
+:root {
+ font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
+ line-height: 1.5;
+ font-weight: 400;
+
+ color-scheme: light dark;
+ color: rgba(255, 255, 255, 0.87);
+ background-color: #242424;
+
+ font-synthesis: none;
+ text-rendering: optimizeLegibility;
+ -webkit-font-smoothing: antialiased;
+ -moz-osx-font-smoothing: grayscale;
+ -webkit-text-size-adjust: 100%;
+}
+
+a {
+ font-weight: 500;
+ color: #646cff;
+ text-decoration: inherit;
+}
+a:hover {
+ color: #535bf2;
+}
+
+body {
+ margin: 0;
+ display: flex;
+ place-items: center;
+ min-width: 320px;
+ min-height: 100vh;
+}
+
+h1 {
+ font-size: 3.2em;
+ line-height: 1.1;
+}
+
+button {
+ border-radius: 8px;
+ border: 1px solid transparent;
+ padding: 0.6em 1.2em;
+ font-size: 1em;
+ font-weight: 500;
+ font-family: inherit;
+ background-color: #1a1a1a;
+ cursor: pointer;
+ transition: border-color 0.25s;
+}
+button:hover {
+ border-color: #646cff;
+}
+button:focus,
+button:focus-visible {
+ outline: 4px auto -webkit-focus-ring-color;
+}
+
+@media (prefers-color-scheme: light) {
+ :root {
+ color: #213547;
+ background-color: #ffffff;
+ }
+ a:hover {
+ color: #747bff;
+ }
+ button {
+ background-color: #f9f9f9;
+ }
+}
diff --git a/template-react-ts/src/main.tsx b/template-react-ts/src/main.tsx
new file mode 100644
index 0000000..91c03f3
--- /dev/null
+++ b/template-react-ts/src/main.tsx
@@ -0,0 +1,10 @@
+import React from 'react'
+import ReactDOM from 'react-dom/client'
+import App from './App.tsx'
+import './index.css'
+
+ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
+
+
+ ,
+)
diff --git a/template-react-ts/src/vite-env.d.ts b/template-react-ts/src/vite-env.d.ts
new file mode 100644
index 0000000..11f02fe
--- /dev/null
+++ b/template-react-ts/src/vite-env.d.ts
@@ -0,0 +1 @@
+///
diff --git a/template-react-ts/tsconfig.json b/template-react-ts/tsconfig.json
new file mode 100644
index 0000000..a7fc6fb
--- /dev/null
+++ b/template-react-ts/tsconfig.json
@@ -0,0 +1,25 @@
+{
+ "compilerOptions": {
+ "target": "ES2020",
+ "useDefineForClassFields": true,
+ "lib": ["ES2020", "DOM", "DOM.Iterable"],
+ "module": "ESNext",
+ "skipLibCheck": true,
+
+ /* Bundler mode */
+ "moduleResolution": "bundler",
+ "allowImportingTsExtensions": true,
+ "resolveJsonModule": true,
+ "isolatedModules": true,
+ "noEmit": true,
+ "jsx": "react-jsx",
+
+ /* Linting */
+ "strict": true,
+ "noUnusedLocals": true,
+ "noUnusedParameters": true,
+ "noFallthroughCasesInSwitch": true
+ },
+ "include": ["src"],
+ "references": [{ "path": "./tsconfig.node.json" }]
+}
diff --git a/template-react-ts/tsconfig.node.json b/template-react-ts/tsconfig.node.json
new file mode 100644
index 0000000..42872c5
--- /dev/null
+++ b/template-react-ts/tsconfig.node.json
@@ -0,0 +1,10 @@
+{
+ "compilerOptions": {
+ "composite": true,
+ "skipLibCheck": true,
+ "module": "ESNext",
+ "moduleResolution": "bundler",
+ "allowSyntheticDefaultImports": true
+ },
+ "include": ["vite.config.ts"]
+}
diff --git a/template-react-ts/vite.config.ts b/template-react-ts/vite.config.ts
new file mode 100644
index 0000000..5a33944
--- /dev/null
+++ b/template-react-ts/vite.config.ts
@@ -0,0 +1,7 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+
+// https://vitejs.dev/config/
+export default defineConfig({
+ plugins: [react()],
+})
diff --git a/template-vanilla-ts/_gitignore b/template-vanilla-ts/_gitignore
new file mode 100644
index 0000000..a547bf3
--- /dev/null
+++ b/template-vanilla-ts/_gitignore
@@ -0,0 +1,24 @@
+# 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
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
diff --git a/template-vanilla-ts/index.html b/template-vanilla-ts/index.html
new file mode 100644
index 0000000..f86e483
--- /dev/null
+++ b/template-vanilla-ts/index.html
@@ -0,0 +1,13 @@
+
+
+
+
+
+
+ Vite + TS
+
+
+
+
+
+
diff --git a/template-vanilla-ts/package.json b/template-vanilla-ts/package.json
new file mode 100644
index 0000000..7c063e0
--- /dev/null
+++ b/template-vanilla-ts/package.json
@@ -0,0 +1,15 @@
+{
+ "name": "vite-typescript-starter",
+ "private": true,
+ "version": "0.0.0",
+ "type": "module",
+ "scripts": {
+ "dev": "vite",
+ "build": "tsc && vite build",
+ "preview": "vite preview"
+ },
+ "devDependencies": {
+ "typescript": "^5.0.2",
+ "vite": "^4.3.2"
+ }
+}
diff --git a/template-vanilla-ts/public/vite.svg b/template-vanilla-ts/public/vite.svg
new file mode 100644
index 0000000..e7b8dfb
--- /dev/null
+++ b/template-vanilla-ts/public/vite.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/template-vanilla-ts/src/counter.ts b/template-vanilla-ts/src/counter.ts
new file mode 100644
index 0000000..09e5afd
--- /dev/null
+++ b/template-vanilla-ts/src/counter.ts
@@ -0,0 +1,9 @@
+export function setupCounter(element: HTMLButtonElement) {
+ let counter = 0
+ const setCounter = (count: number) => {
+ counter = count
+ element.innerHTML = `count is ${counter}`
+ }
+ element.addEventListener('click', () => setCounter(counter + 1))
+ setCounter(0)
+}
diff --git a/template-vanilla-ts/src/main.ts b/template-vanilla-ts/src/main.ts
new file mode 100644
index 0000000..791547b
--- /dev/null
+++ b/template-vanilla-ts/src/main.ts
@@ -0,0 +1,24 @@
+import './style.css'
+import typescriptLogo from './typescript.svg'
+import viteLogo from '/vite.svg'
+import { setupCounter } from './counter.ts'
+
+document.querySelector('#app')!.innerHTML = `
+
+
+
+
+
+
+
+
Vite + TypeScript
+
+
+
+
+ Click on the Vite and TypeScript logos to learn more
+
+
+`
+
+setupCounter(document.querySelector('#counter')!)
diff --git a/template-vanilla-ts/src/style.css b/template-vanilla-ts/src/style.css
new file mode 100644
index 0000000..b528b6c
--- /dev/null
+++ b/template-vanilla-ts/src/style.css
@@ -0,0 +1,97 @@
+:root {
+ font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
+ line-height: 1.5;
+ font-weight: 400;
+
+ color-scheme: light dark;
+ color: rgba(255, 255, 255, 0.87);
+ background-color: #242424;
+
+ font-synthesis: none;
+ text-rendering: optimizeLegibility;
+ -webkit-font-smoothing: antialiased;
+ -moz-osx-font-smoothing: grayscale;
+ -webkit-text-size-adjust: 100%;
+}
+
+a {
+ font-weight: 500;
+ color: #646cff;
+ text-decoration: inherit;
+}
+a:hover {
+ color: #535bf2;
+}
+
+body {
+ margin: 0;
+ display: flex;
+ place-items: center;
+ min-width: 320px;
+ min-height: 100vh;
+}
+
+h1 {
+ font-size: 3.2em;
+ line-height: 1.1;
+}
+
+#app {
+ max-width: 1280px;
+ margin: 0 auto;
+ padding: 2rem;
+ text-align: center;
+}
+
+.logo {
+ height: 6em;
+ padding: 1.5em;
+ will-change: filter;
+ transition: filter 300ms;
+}
+.logo:hover {
+ filter: drop-shadow(0 0 2em #646cffaa);
+}
+.logo.vanilla:hover {
+ filter: drop-shadow(0 0 2em #3178c6aa);
+}
+
+.card {
+ padding: 2em;
+}
+
+.read-the-docs {
+ color: #888;
+}
+
+button {
+ border-radius: 8px;
+ border: 1px solid transparent;
+ padding: 0.6em 1.2em;
+ font-size: 1em;
+ font-weight: 500;
+ font-family: inherit;
+ background-color: #1a1a1a;
+ cursor: pointer;
+ transition: border-color 0.25s;
+}
+button:hover {
+ border-color: #646cff;
+}
+button:focus,
+button:focus-visible {
+ outline: 4px auto -webkit-focus-ring-color;
+}
+
+@media (prefers-color-scheme: light) {
+ :root {
+ color: #213547;
+ background-color: #ffffff;
+ }
+ a:hover {
+ color: #747bff;
+ }
+ button {
+ background-color: #f9f9f9;
+ }
+}
diff --git a/template-vanilla-ts/src/typescript.svg b/template-vanilla-ts/src/typescript.svg
new file mode 100644
index 0000000..d91c910
--- /dev/null
+++ b/template-vanilla-ts/src/typescript.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/template-vanilla-ts/src/vite-env.d.ts b/template-vanilla-ts/src/vite-env.d.ts
new file mode 100644
index 0000000..11f02fe
--- /dev/null
+++ b/template-vanilla-ts/src/vite-env.d.ts
@@ -0,0 +1 @@
+///
diff --git a/template-vanilla-ts/tsconfig.json b/template-vanilla-ts/tsconfig.json
new file mode 100644
index 0000000..75abdef
--- /dev/null
+++ b/template-vanilla-ts/tsconfig.json
@@ -0,0 +1,23 @@
+{
+ "compilerOptions": {
+ "target": "ES2020",
+ "useDefineForClassFields": true,
+ "module": "ESNext",
+ "lib": ["ES2020", "DOM", "DOM.Iterable"],
+ "skipLibCheck": true,
+
+ /* Bundler mode */
+ "moduleResolution": "bundler",
+ "allowImportingTsExtensions": true,
+ "resolveJsonModule": true,
+ "isolatedModules": true,
+ "noEmit": true,
+
+ /* Linting */
+ "strict": true,
+ "noUnusedLocals": true,
+ "noUnusedParameters": true,
+ "noFallthroughCasesInSwitch": true
+ },
+ "include": ["src"]
+}
diff --git a/template-vue-ts/.vscode/extensions.json b/template-vue-ts/.vscode/extensions.json
new file mode 100644
index 0000000..c0a6e5a
--- /dev/null
+++ b/template-vue-ts/.vscode/extensions.json
@@ -0,0 +1,3 @@
+{
+ "recommendations": ["Vue.volar", "Vue.vscode-typescript-vue-plugin"]
+}
diff --git a/template-vue-ts/README.md b/template-vue-ts/README.md
new file mode 100644
index 0000000..ef72fd5
--- /dev/null
+++ b/template-vue-ts/README.md
@@ -0,0 +1,18 @@
+# Vue 3 + TypeScript + Vite
+
+This template should help get you started developing with Vue 3 and TypeScript in Vite. The template uses Vue 3 `
+