|
1 | | -# mdx-vue3 |
| 1 | +# Vue 3 (Vite) + Typescript + MDX 2 |
2 | 2 |
|
3 | | -## Project setup |
4 | | -``` |
5 | | -yarn install |
6 | | -``` |
| 3 | +This template should help get you started developing with Vue 3 in Vite and the MDX 2 integration. |
7 | 4 |
|
8 | | -### Compiles and hot-reloads for development |
9 | | -``` |
10 | | -yarn serve |
11 | | -``` |
| 5 | + |
12 | 6 |
|
13 | | -### Compiles and minifies for production |
14 | | -``` |
15 | | -yarn build |
16 | | -``` |
| 7 | +This project uses the 'Gfm' remark plugin. Others can be installed under `vite.config.ts`. |
| 8 | + |
| 9 | +List of [Remark plugins](https://github.com/remarkjs/remark/blob/main/doc/plugins.md). |
| 10 | + |
| 11 | +## Recommended IDE Setup |
| 12 | + |
| 13 | +[VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur) + [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin). |
| 14 | + |
| 15 | +## Type Support for `.vue` Imports in TS |
17 | 16 |
|
18 | | -### Lints and fixes files |
| 17 | +TypeScript cannot handle type information for `.vue` imports by default, so we replace the `tsc` CLI with `vue-tsc` for type checking. In editors, we need [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin) to make the TypeScript language service aware of `.vue` types. |
| 18 | + |
| 19 | +If the standalone TypeScript plugin doesn't feel fast enough to you, Volar has also implemented a [Take Over Mode](https://github.com/johnsoncodehk/volar/discussions/471#discussioncomment-1361669) that is more performant. You can enable it by the following steps: |
| 20 | + |
| 21 | +1. Disable the built-in TypeScript Extension |
| 22 | + 1) Run `Extensions: Show Built-in Extensions` from VSCode's command palette |
| 23 | + 2) Find `TypeScript and JavaScript Language Features`, right click and select `Disable (Workspace)` |
| 24 | +2. Reload the VSCode window by running `Developer: Reload Window` from the command palette. |
| 25 | + |
| 26 | +## Customize configuration |
| 27 | + |
| 28 | +See [Vite Configuration Reference](https://vitejs.dev/config/). |
| 29 | + |
| 30 | +## Project Setup |
| 31 | + |
| 32 | +```sh |
| 33 | +npm install |
19 | 34 | ``` |
20 | | -yarn lint |
| 35 | + |
| 36 | +### Compile and Hot-Reload for Development |
| 37 | + |
| 38 | +```sh |
| 39 | +npm run dev |
21 | 40 | ``` |
22 | 41 |
|
23 | | -### Customize configuration |
24 | | -See [Configuration Reference](https://cli.vuejs.org/config/). |
| 42 | +### Type-Check, Compile and Minify for Production |
| 43 | + |
| 44 | +```sh |
| 45 | +npm run build |
| 46 | +``` |
0 commit comments