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,13 +19,63 @@ npm create vite@latest my-vue-app -- --template vue-ts
### Add Tailwind and its configuration ### 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
```bash
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p
``` <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 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 ### Edit tsconfig.json
@ -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 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 ```typescript
import path from "path" import path from "path"
import vue from "@vitejs/plugin-vue" import vue from "@vitejs/plugin-vue"