Keystion

vite + vue3 + tailwind + antdv 4

前端3 年前

兼容性注意

Vite 需要 Node.js 版本 14.18+，16+。然而，有些模板需要依赖更高的 Node 版本才能正常运行，当你的包管理器发出警告时，请注意升级你的 Node 版本。

Vite&Vue ​

https://cn.vitejs.dev/guide/#scaffolding-your-first-vite-project

bash
PROJECT_FOLDER=vite4-vue3-antdv4-tailwind-starter && pnpm create vite $PROJECT_FOLDER --template vue-ts && cd $PROJECT_FOLDER && pnpm install

# PROJECT_FOLDER=vite4-vue3-antdv4-tailwind-starter
# pnpm create vite $PROJECT_FOLDER --template vue-ts
# cd $PROJECT_FOLDER
# pnpm install

tailwindcss ​

https://tailwindcss.com/docs/guides/vite#vue

bash
pnpm add -D tailwindcss postcss autoprefixer && npx tailwindcss init -p

# 安装依赖 安装成功之后会初始化 postcss.config.js
# pnpm add -D tailwindcss postcss autoprefixer
# 生成 tailwind.config.js
# npx tailwindcss init -p

编辑 tailwind.config.js

js
/** @type {import('tailwindcss').Config} */
export default {
  content: [
    "./index.html",
    "./src/**/*.{vue,js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

将 Tailwind 指令添加到您的 CSS 中

css
echo "@tailwind base;
@tailwind components;
@tailwind utilities;" >> src/tailwind.css

> 向文件内写入数据，>> 向文件内追加，

main.ts

ts
import { createApp } from 'vue'
import './tailwind.css'
import './style.css'
import App from './App.vue'

createApp(App).mount('#app')

编辑器支持 ​

vscode

自动提示 ​

Tailwind CSS IntelliSense

协同项目 推荐维护一下项目的 vscode 插件依赖 .vscode/extensions.json

json
{
  "recommendations": [
    "Vue.volar",
    "Vue.vscode-typescript-vue-plugin",
    "bradlc.vscode-tailwindcss", // tailwindcss
  ]
}

使用 Prettier 自动进行类别排序 ​

node modules

prettier-plugin-tailwindcss

bash
pnpm add -D prettier prettier-plugin-tailwindcss

配置 .prettierrc.json

json
{
  "plugins": ["prettier-plugin-tailwindcss"]
}

配置 .vscode/settings.json

json
{
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true,
  "editor.codeActionsOnSave": {
    "source.organizeImports": true
  }
}

antdv ​

bash
pnpm add -S ant-design-vue@4.x @ant-design/icons-vue

按需加载

bash
pnpm add -D unplugin-vue-components

vite.config.ts

ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import Components from 'unplugin-vue-components/vite';
import { AntDesignVueResolver } from 'unplugin-vue-components/resolvers';

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    Components({
      dts: 'src/types/components.d.ts', // 自动生成类型声明文件，默认为 ./components.d.ts
      resolvers: [
        AntDesignVueResolver({
          importStyle: false, // css in js
        }),
      ],
    }),
  ],
})

vue-router ​

bash
pnpm add -S vue-router@4.x

sass ​

bash
pnpm add -D sass sass-loader
#vite
订阅
webclown.net/文章/vite + vue3 + tailwind + antdv 4