-
Notifications
You must be signed in to change notification settings - Fork 2
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
5 changed files
with
38 additions
and
79 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,16 +1,4 @@ | ||
# Vue 3 + TypeScript + Vite | ||
# Vue 3 App | ||
|
||
This template should help get you started developing with Vue 3 and TypeScript in Vite. The template uses Vue 3 `<script setup>` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more. | ||
App build with Vue.js and Clean Architecture | ||
|
||
## Recommended IDE Setup | ||
|
||
- [VS Code](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) | ||
|
||
## Type Support For `.vue` Imports in TS | ||
|
||
Since TypeScript cannot handle type information for `.vue` imports, they are shimmed to be a generic Vue component type by default. In most cases this is fine if you don't really care about component prop types outside of templates. However, if you wish to get actual prop types in `.vue` imports (for example to get props validation when using manual `h(...)` calls), you can enable Volar's Take Over mode by following these steps: | ||
|
||
1. Run `Extensions: Show Built-in Extensions` from VS Code's command palette, look for `TypeScript and JavaScript Language Features`, then right click and select `Disable (Workspace)`. By default, Take Over mode will enable itself if the default TypeScript extension is disabled. | ||
2. Reload the VS Code window by running `Developer: Reload Window` from the command palette. | ||
|
||
You can learn more about Take Over mode [here](https://github.com/johnsoncodehk/volar/discussions/471). |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,4 @@ | ||
# React App | ||
|
||
App build with React and Clean Architecture | ||
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,66 +1,3 @@ | ||
# Qwik App ⚡️ | ||
|
||
- [Qwik Docs](https://qwik.builder.io/) | ||
- [Discord](https://qwik.builder.io/chat) | ||
- [Qwik GitHub](https://github.com/BuilderIO/qwik) | ||
- [@QwikDev](https://twitter.com/QwikDev) | ||
- [Vite](https://vitejs.dev/) | ||
- [Partytown](https://partytown.builder.io/) | ||
- [Mitosis](https://github.com/BuilderIO/mitosis) | ||
- [Builder.io](https://www.builder.io/) | ||
|
||
--- | ||
|
||
## Project Structure | ||
|
||
Inside your project, you'll see the following directory structure: | ||
|
||
``` | ||
├── public/ | ||
│ └── ... | ||
└── src/ | ||
├── components/ | ||
│ └── ... | ||
└── routes/ | ||
└── ... | ||
``` | ||
|
||
- `src/routes`: Provides the directory based routing, which can include a hierarchy of `layout.tsx` layout files, and an `index.tsx` file as the page. Additionally, `index.ts` files are endpoints. Please see the [routing docs](https://qwik.builder.io/qwikcity/routing/overview/) for more info. | ||
|
||
- `src/components`: Recommended directory for components. | ||
|
||
- `public`: Any static assets, like images, can be placed in the public directory. Please see the [Vite public directory](https://vitejs.dev/guide/assets.html#the-public-directory) for more info. | ||
|
||
## Add Integrations | ||
|
||
Use the `npm run qwik add` command to add additional integrations. Some examples of integrations include: Cloudflare, Netlify or Vercel server, and the [Static Site Generator (SSG)](https://qwik.builder.io/qwikcity/static-site-generation/static-site-config/). | ||
|
||
```shell | ||
npm run qwik add # or `yarn qwik add` | ||
``` | ||
|
||
## Development | ||
|
||
Development mode uses [Vite's development server](https://vitejs.dev/). During development, the `dev` command will server-side render (SSR) the output. | ||
|
||
```shell | ||
npm run dev # or `yarn dev` | ||
``` | ||
|
||
> Note: during dev mode, Vite may request a significant number of `.js` files. This does not represent a Qwik production build. | ||
## Preview | ||
|
||
The preview command will create a production build of the client modules, a production build of `src/entry.preview.tsx`, and run a local server. The preview server is only for convenience to locally preview a production build, and it should not be used as a production server. | ||
|
||
```shell | ||
npm run preview # or `yarn preview` | ||
``` | ||
|
||
## Production | ||
|
||
The production build will generate client and server modules by running both client and server build commands. Additionally, the build command will use Typescript to run a type check on the source code. | ||
|
||
```shell | ||
npm run build # or `yarn build` | ||
``` | ||
App build with Qwik and Clean Architecture |