docs: update vite installation

This commit is contained in:
Sadegh Barati 2024-01-07 23:01:14 +03:30
parent dbdf91294e
commit 41b2f14519

View File

@ -19,14 +19,64 @@ npm create vite@latest my-vue-app -- --template vue-ts
### Add Tailwind and its configuration
Install `tailwindcss` and its peer dependencies, then generate your `tailwind.config.js` and `postcss.config.js` files:
Install `tailwindcss` and its peer dependencies, then generate your `tailwind.config.js` and configure `postcss` plugins
<TabsMarkdown>
<TabMarkdown title="vite.config.ts">
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
```bash
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p
npm install -D tailwindcss autoprefixer
```
#### `vite.config`
```typescript {5,6,10-14}
import path from "path"
import { defineConfig } from "vite"
import vue from "@vitejs/plugin-vue"
import tailwind from "tailwindcss"
import autoprefixer from "autoprefixer"
export default defineConfig({
plugins: [vue()],
css: {
postcss: {
plugins: [tailwind(), autoprefixer()],
},
},
resolve: {...}
})
```
</TabMarkdown>
<TabMarkdown title="postcss.config.js">
```bash
npm install -D tailwindcss autoprefixer postcss
```
#### `postcss.config.js`
```js
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
}
```
</TabMarkdown>
</TabsMarkdown>
### Edit tsconfig.json
Add the code below to the compilerOptions of your tsconfig.json so your app can resolve paths without error
@ -42,6 +92,11 @@ Add the code below to the compilerOptions of your tsconfig.json so your app can
Add the code below to the vite.config.ts so your app can resolve paths without error
```bash
# (so you can import "path" without error)
npm i -D @types/node
```
```typescript
import path from "path"
import vue from "@vitejs/plugin-vue"