docs: update vite.md (#505)
This commit is contained in:
parent
c77b087c9c
commit
95f4e6b56d
|
|
@ -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.
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue
Block a user