From 6e74a6ebd7f9a5975b6760c15aff0a41f1196208 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E7=BC=96=E7=A0=81=E7=8C=BF?= Date: Fri, 27 Sep 2024 01:13:55 +0800 Subject: [PATCH] first commit --- .gitignore | 24 ++++++++++++ .pydio | 1 + .vscode/extensions.json | 3 ++ README.md | 47 ++++++++++++++++++++++++ index.html | 13 +++++++ package.json | 26 +++++++++++++ public/.pydio | 1 + public/vite.svg | 1 + src/.pydio | 1 + src/App.svelte | 19 ++++++++++ src/assets/.pydio | 1 + src/assets/svelte.svg | 1 + src/component/.pydio | 1 + src/component/header.svelte | 10 +++++ src/http/.pydio | 1 + src/main.ts | 8 ++++ src/pages/.pydio | 1 + src/pages/about/.pydio | 1 + src/pages/about/about.less | 0 src/pages/about/about.svelte | 33 +++++++++++++++++ src/pages/home/.pydio | 1 + src/pages/home/home.less | 4 ++ src/pages/home/home.svelte | 71 ++++++++++++++++++++++++++++++++++++ src/router/.pydio | 1 + src/router/index.ts | 11 ++++++ src/serve/.pydio | 1 + src/vite-env.d.ts | 2 + svelte.config.js | 7 ++++ tsconfig.json | 20 ++++++++++ tsconfig.node.json | 9 +++++ vite.config.ts | 15 ++++++++ 31 files changed, 335 insertions(+) create mode 100644 .gitignore create mode 100644 .pydio create mode 100644 .vscode/extensions.json create mode 100644 README.md create mode 100644 index.html create mode 100644 package.json create mode 100644 public/.pydio create mode 100644 public/vite.svg create mode 100644 src/.pydio create mode 100644 src/App.svelte create mode 100644 src/assets/.pydio create mode 100644 src/assets/svelte.svg create mode 100644 src/component/.pydio create mode 100644 src/component/header.svelte create mode 100644 src/http/.pydio create mode 100644 src/main.ts create mode 100644 src/pages/.pydio create mode 100644 src/pages/about/.pydio create mode 100644 src/pages/about/about.less create mode 100644 src/pages/about/about.svelte create mode 100644 src/pages/home/.pydio create mode 100644 src/pages/home/home.less create mode 100644 src/pages/home/home.svelte create mode 100644 src/router/.pydio create mode 100644 src/router/index.ts create mode 100644 src/serve/.pydio create mode 100644 src/vite-env.d.ts create mode 100644 svelte.config.js create mode 100644 tsconfig.json create mode 100644 tsconfig.node.json create mode 100644 vite.config.ts diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..a547bf3 --- /dev/null +++ b/.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/.pydio b/.pydio new file mode 100644 index 0000000..be04fc5 --- /dev/null +++ b/.pydio @@ -0,0 +1 @@ +75946548-4bf0-406f-8cf1-da74efded78e \ No newline at end of file diff --git a/.vscode/extensions.json b/.vscode/extensions.json new file mode 100644 index 0000000..bdef820 --- /dev/null +++ b/.vscode/extensions.json @@ -0,0 +1,3 @@ +{ + "recommendations": ["svelte.svelte-vscode"] +} diff --git a/README.md b/README.md new file mode 100644 index 0000000..e6cd94f --- /dev/null +++ b/README.md @@ -0,0 +1,47 @@ +# Svelte + TS + Vite + +This template should help get you started developing with Svelte and TypeScript in Vite. + +## Recommended IDE Setup + +[VS Code](https://code.visualstudio.com/) + [Svelte](https://marketplace.visualstudio.com/items?itemName=svelte.svelte-vscode). + +## Need an official Svelte framework? + +Check out [SvelteKit](https://github.com/sveltejs/kit#readme), which is also powered by Vite. Deploy anywhere with its serverless-first approach and adapt to various platforms, with out of the box support for TypeScript, SCSS, and Less, and easily-added support for mdsvex, GraphQL, PostCSS, Tailwind CSS, and more. + +## Technical considerations + +**Why use this over SvelteKit?** + +- It brings its own routing solution which might not be preferable for some users. +- It is first and foremost a framework that just happens to use Vite under the hood, not a Vite app. + +This template contains as little as possible to get started with Vite + TypeScript + Svelte, while taking into account the developer experience with regards to HMR and intellisense. It demonstrates capabilities on par with the other `create-vite` templates and is a good starting point for beginners dipping their toes into a Vite + Svelte project. + +Should you later need the extended capabilities and extensibility provided by SvelteKit, the template has been structured similarly to SvelteKit so that it is easy to migrate. + +**Why `global.d.ts` instead of `compilerOptions.types` inside `jsconfig.json` or `tsconfig.json`?** + +Setting `compilerOptions.types` shuts out all other types not explicitly listed in the configuration. Using triple-slash references keeps the default TypeScript setting of accepting type information from the entire workspace, while also adding `svelte` and `vite/client` type information. + +**Why include `.vscode/extensions.json`?** + +Other templates indirectly recommend extensions via the README, but this file allows VS Code to prompt the user to install the recommended extension upon opening the project. + +**Why enable `allowJs` in the TS template?** + +While `allowJs: false` would indeed prevent the use of `.js` files in the project, it does not prevent the use of JavaScript syntax in `.svelte` files. In addition, it would force `checkJs: false`, bringing the worst of both worlds: not being able to guarantee the entire codebase is TypeScript, and also having worse typechecking for the existing JavaScript. In addition, there are valid use cases in which a mixed codebase may be relevant. + +**Why is HMR not preserving my local component state?** + +HMR state preservation comes with a number of gotchas! It has been disabled by default in both `svelte-hmr` and `@sveltejs/vite-plugin-svelte` due to its often surprising behavior. You can read the details [here](https://github.com/rixo/svelte-hmr#svelte-hmr). + +If you have state that's important to retain within a component, consider creating an external store which would not be replaced by HMR. + +```ts +// store.ts +// An extremely simple external store +import { writable } from 'svelte/store' +export default writable(0) +``` diff --git a/index.html b/index.html new file mode 100644 index 0000000..b6c5f0a --- /dev/null +++ b/index.html @@ -0,0 +1,13 @@ + + + + + + + Vite + Svelte + TS + + +
+ + + diff --git a/package.json b/package.json new file mode 100644 index 0000000..a746258 --- /dev/null +++ b/package.json @@ -0,0 +1,26 @@ +{ + "name": "my-svelte", + "private": true, + "version": "0.0.0", + "type": "module", + "scripts": { + "dev": "vite", + "build": "vite build", + "preview": "vite preview", + "check": "svelte-check --tsconfig ./tsconfig.json" + }, + "dependencies": { + "svelte-spa-router": "^3.3.0" + }, + "devDependencies": { + "@sveltejs/vite-plugin-svelte": "^2.4.2", + "@tsconfig/svelte": "^5.0.0", + "less": "^4.2.0", + "svelte": "^4.0.5", + "svelte-check": "^3.4.6", + "svelte-preprocess-less": "^0.4.0", + "tslib": "^2.6.0", + "typescript": "^5.0.2", + "vite": "^4.4.5" + } +} \ No newline at end of file diff --git a/public/.pydio b/public/.pydio new file mode 100644 index 0000000..094c307 --- /dev/null +++ b/public/.pydio @@ -0,0 +1 @@ +3635f122-7ad5-489c-b398-5cdcd12377cc \ No newline at end of file diff --git a/public/vite.svg b/public/vite.svg new file mode 100644 index 0000000..e7b8dfb --- /dev/null +++ b/public/vite.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/.pydio b/src/.pydio new file mode 100644 index 0000000..63f9660 --- /dev/null +++ b/src/.pydio @@ -0,0 +1 @@ +09fac702-d6e5-49f4-ab24-7da441f4833d \ No newline at end of file diff --git a/src/App.svelte b/src/App.svelte new file mode 100644 index 0000000..34144eb --- /dev/null +++ b/src/App.svelte @@ -0,0 +1,19 @@ + + +
+

+ 首页 + 我的 +

+ +
+ + diff --git a/src/assets/.pydio b/src/assets/.pydio new file mode 100644 index 0000000..4a9add9 --- /dev/null +++ b/src/assets/.pydio @@ -0,0 +1 @@ +d509114f-203a-4a94-a075-a40ed38bf3be \ No newline at end of file diff --git a/src/assets/svelte.svg b/src/assets/svelte.svg new file mode 100644 index 0000000..c5e0848 --- /dev/null +++ b/src/assets/svelte.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/component/.pydio b/src/component/.pydio new file mode 100644 index 0000000..2b0c0ef --- /dev/null +++ b/src/component/.pydio @@ -0,0 +1 @@ +43303a3e-2e76-40af-bd49-1e5a8d09cb28 \ No newline at end of file diff --git a/src/component/header.svelte b/src/component/header.svelte new file mode 100644 index 0000000..2446694 --- /dev/null +++ b/src/component/header.svelte @@ -0,0 +1,10 @@ + + + +

event(Math.random())}>头部组件 {title}

+ diff --git a/src/http/.pydio b/src/http/.pydio new file mode 100644 index 0000000..4434220 --- /dev/null +++ b/src/http/.pydio @@ -0,0 +1 @@ +4af1501a-6544-47c3-8ad2-c40a11084c4c \ No newline at end of file diff --git a/src/main.ts b/src/main.ts new file mode 100644 index 0000000..6bc0152 --- /dev/null +++ b/src/main.ts @@ -0,0 +1,8 @@ + +import App from './App.svelte' + +const app = new App({ + target: document.querySelector("#app"), +}) + +export default app diff --git a/src/pages/.pydio b/src/pages/.pydio new file mode 100644 index 0000000..e6c47d5 --- /dev/null +++ b/src/pages/.pydio @@ -0,0 +1 @@ +40a233d2-9988-4e8e-84cb-d98b7d9c7369 \ No newline at end of file diff --git a/src/pages/about/.pydio b/src/pages/about/.pydio new file mode 100644 index 0000000..c4625ec --- /dev/null +++ b/src/pages/about/.pydio @@ -0,0 +1 @@ +c5f54189-0aea-4034-806e-7784dfc5b500 \ No newline at end of file diff --git a/src/pages/about/about.less b/src/pages/about/about.less new file mode 100644 index 0000000..e69de29 diff --git a/src/pages/about/about.svelte b/src/pages/about/about.svelte new file mode 100644 index 0000000..907174f --- /dev/null +++ b/src/pages/about/about.svelte @@ -0,0 +1,33 @@ + + +

Count: {currentCount}

+ + + + + diff --git a/src/pages/home/.pydio b/src/pages/home/.pydio new file mode 100644 index 0000000..2760f8a --- /dev/null +++ b/src/pages/home/.pydio @@ -0,0 +1 @@ +32477e6c-11b9-4624-83bf-86ae090bce0f \ No newline at end of file diff --git a/src/pages/home/home.less b/src/pages/home/home.less new file mode 100644 index 0000000..320c20d --- /dev/null +++ b/src/pages/home/home.less @@ -0,0 +1,4 @@ +@color: red; +h1 { + color: @color; +} \ No newline at end of file diff --git a/src/pages/home/home.svelte b/src/pages/home/home.svelte new file mode 100644 index 0000000..1e07252 --- /dev/null +++ b/src/pages/home/home.svelte @@ -0,0 +1,71 @@ +

Vite + Svelte + TypeScript

+ + + +

我的名字: {MyName} | {test}

+
{@html MyHtml}
+ + +{#if isShow} +
显示
+{:else} +
隐藏
+{/if} + + + + +
{ + console.log(1, num); + }} +/> + + + + + \ No newline at end of file diff --git a/src/router/.pydio b/src/router/.pydio new file mode 100644 index 0000000..9f8aaee --- /dev/null +++ b/src/router/.pydio @@ -0,0 +1 @@ +11dd37b9-5d27-40d4-a4ab-e693ac5c5a69 \ No newline at end of file diff --git a/src/router/index.ts b/src/router/index.ts new file mode 100644 index 0000000..c84938e --- /dev/null +++ b/src/router/index.ts @@ -0,0 +1,11 @@ +import About from '../pages/about/about.svelte' +import { wrap } from 'svelte-spa-router/wrap' + +export default { + '/': wrap({ + asyncComponent: () => import('../pages/home/home.svelte') + }), + '/about': wrap({ + asyncComponent: () => import('../pages/about/about.svelte') + }) +} \ No newline at end of file diff --git a/src/serve/.pydio b/src/serve/.pydio new file mode 100644 index 0000000..207b0b0 --- /dev/null +++ b/src/serve/.pydio @@ -0,0 +1 @@ +9302e152-c1a2-45fb-8b8b-e59d6b603502 \ No newline at end of file diff --git a/src/vite-env.d.ts b/src/vite-env.d.ts new file mode 100644 index 0000000..4078e74 --- /dev/null +++ b/src/vite-env.d.ts @@ -0,0 +1,2 @@ +/// +/// diff --git a/svelte.config.js b/svelte.config.js new file mode 100644 index 0000000..b0683fd --- /dev/null +++ b/svelte.config.js @@ -0,0 +1,7 @@ +import { vitePreprocess } from '@sveltejs/vite-plugin-svelte' + +export default { + // Consult https://svelte.dev/docs#compile-time-svelte-preprocess + // for more information about preprocessors + preprocess: vitePreprocess(), +} diff --git a/tsconfig.json b/tsconfig.json new file mode 100644 index 0000000..c4e1c5f --- /dev/null +++ b/tsconfig.json @@ -0,0 +1,20 @@ +{ + "extends": "@tsconfig/svelte/tsconfig.json", + "compilerOptions": { + "target": "ESNext", + "useDefineForClassFields": true, + "module": "ESNext", + "resolveJsonModule": true, + /** + * Typecheck JS in `.svelte` and `.js` files by default. + * Disable checkJs if you'd like to use dynamic types in JS. + * Note that setting allowJs false does not prevent the use + * of JS in `.svelte` files. + */ + "allowJs": true, + "checkJs": true, + "isolatedModules": true + }, + "include": ["src/**/*.d.ts", "src/**/*.ts", "src/**/*.js", "src/**/*.svelte"], + "references": [{ "path": "./tsconfig.node.json" }] +} diff --git a/tsconfig.node.json b/tsconfig.node.json new file mode 100644 index 0000000..494bfe0 --- /dev/null +++ b/tsconfig.node.json @@ -0,0 +1,9 @@ +{ + "compilerOptions": { + "composite": true, + "skipLibCheck": true, + "module": "ESNext", + "moduleResolution": "bundler" + }, + "include": ["vite.config.ts"] +} diff --git a/vite.config.ts b/vite.config.ts new file mode 100644 index 0000000..24f5ab4 --- /dev/null +++ b/vite.config.ts @@ -0,0 +1,15 @@ +import { defineConfig } from 'vite' +import { svelte } from '@sveltejs/vite-plugin-svelte' +import { less } from 'svelte-preprocess-less'; + +// https://vitejs.dev/config/ +export default defineConfig({ + base: './', + plugins: [svelte({ + + preprocess: { + style: less(), + }, + + })], +})