docs: update vite.md (#505)

This commit is contained in:
chachew 2024-04-20 03:05:55 -05:00 committed by GitHub
parent c77b087c9c
commit 95f4e6b56d
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194

View File

@ -9,6 +9,12 @@ description: Install and configure Vite.
Start by creating a new Vue project using `vite`: Start by creating a new Vue project using `vite`:
<Callout>
If you're using the JS template, `jsconfig.json` must exist for the CLI to run without errors.
</Callout>
```bash ```bash
# npm 6.x # npm 6.x
npm create vite@latest my-vue-app --template vue-ts npm create vite@latest my-vue-app --template vue-ts
@ -24,12 +30,18 @@ Install `tailwindcss` and its peer dependencies, then generate your `tailwind.co
<TabsMarkdown> <TabsMarkdown>
<TabMarkdown title="vite.config"> <TabMarkdown title="vite.config">
Vite already has [`postcss`](https://github.com/vitejs/vite/blob/main/packages/vite/package.json#L78) dependency so you don't have to install it again in your package.json Vite already has [`postcss`](https://github.com/vitejs/vite/blob/main/packages/vite/package.json#89) dependency so you don't have to install it again in your package.json
```bash ```bash
npm install -D tailwindcss autoprefixer npm install -D tailwindcss autoprefixer
``` ```
<Callout>
If you're utilizing `postcss.config.js`, these changes will be inconsequential.
</Callout>
#### `vite.config` #### `vite.config`
```typescript {5,6,9-13} ```typescript {5,6,9-13}
@ -77,9 +89,9 @@ Install `tailwindcss` and its peer dependencies, then generate your `tailwind.co
</TabMarkdown> </TabMarkdown>
</TabsMarkdown> </TabsMarkdown>
### Edit tsconfig.json ### Edit tsconfig/jsconfig.json
Add the code below to the compilerOptions of your tsconfig.json so your app can resolve paths without error Add the code below to the compilerOptions of your `tsconfig.json` or `jsconfig.json` so your app can resolve paths without error
```json {4-7} ```json {4-7}
{ {
@ -126,6 +138,10 @@ export default defineConfig({
}) })
``` ```
### Delete default Vite styles
Delete the default Vite stylesheet `./src/style.css`
### Run the CLI ### Run the CLI
Run the `shadcn-vue` init command to setup your project: Run the `shadcn-vue` init command to setup your project:
@ -150,6 +166,19 @@ Configure the import alias for components: @/components
Configure the import alias for utils: @/lib/utils Configure the import alias for utils: @/lib/utils
``` ```
### Update main.ts
Remove import for style.css and add add tailwind style import `import './assets/index.css'`
```diff typescript {4}
import { createApp } from 'vue'
- import './style.css'
import App from './App.vue'
+ import './assets/index.css'
createApp(App).mount('#app')
```
### That's it ### That's it
You can now start adding components to your project. You can now start adding components to your project.