Vite
1. 创建项目
使用 vite
创建一个新的 vue
项目。
如果你正在使用 JS 模板,需要存在 jsconfig.json
文件才能正确运行 CLI
。
# npm 6.x
npm create vite@latest my-vue-app --template vue-ts
# npm 7+, extra double-dash is needed:
npm create vite@latest my-vue-app -- --template vue-ts
2. 添加 Tailwind
并配置
安装 tailwindcss
及其对等依赖项,然后生成 tailwind.config.js
并配置 postcss
插件。
npm install -D tailwindcss autoprefixer
如果你正在使用 postcss.config.js
,则无需此更改。
vite.config
import path from 'node:path'
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import tailwind from 'tailwindcss'
import autoprefixer from 'autoprefixer'
export default defineConfig({
css: {
postcss: {
plugins: [tailwind(), autoprefixer()],
},
},
plugins: [vue()],
resolve: {
alias: {
'@': path.resolve(__dirname, './src'),
},
},
})
3. 编辑 tsconfig/jsconfig.json
如果您正在使用 TypeScript
,则当前版本的 Vite 将配置分成三个文件,对 tsconfig.app.json
需要进行相同的更改。
将下面的代码添加到 tsconfig.json
或者 jsconfig.json
的 compilerOptions
中,之后你的应用就可以正确地解析路径。
{
"compilerOptions": {
// ...
"baseUrl": ".",
"paths": {
"@/*": ["./src/*"]
}
// ...
}
}
4. 更新 vite.config.ts
将下面的代码添加到 vite.config.ts
,之后你的应用就可以正确地解析路径。
# 请正确导入路径
npm i -D @types/node
import path from 'node:path'
import vue from '@vitejs/plugin-vue'
import { defineConfig } from 'vite'
import tailwind from 'tailwindcss'
import autoprefixer from 'autoprefixer'
export default defineConfig({
css: {
postcss: {
plugins: [tailwind(), autoprefixer()],
},
},
plugins: [vue()],
resolve: {
alias: {
'@': path.resolve(__dirname, './src'),
},
},
})
5. 删除默认的 Vite
样式
删除默认的 css
文件 ./src/style.css
。
6. 运行 CLI
运行 shadcn-vue
初始化命令创建你的项目:
npx shadcn-vue@latest init
7. 配置 components.json
在此,你将如同创建 Vue
项目一样回答一系列问题:
Would you like to use TypeScript (recommended)? no / yes
Which framework are you using? Vite / Nuxt / Laravel
Which style would you like to use? › Default
Which color would you like to use as base color? › Slate
Where is your tsconfig.json or jsconfig.json file? › ./tsconfig.json
Where is your global CSS file? › › src/assets/index.css
Do you want to use CSS variables for colors? › no / yes
Where is your tailwind.config.js located? › tailwind.config.js
Configure the import alias for components: › @/components
Configure the import alias for utils: › @/lib/utils
Write configuration to components.json. Proceed? > Y/n
8. 更新 main.ts
删除默认配置的 css
并添加 tailwind
样式 import './assets/index.css'
。
import { createApp } from 'vue'
- import './style.css'
import App from './App.vue'
+ import './assets/index.css'
createApp(App).mount('#app')
9. 开始使用
你现在可以开始添加 shadcn-vue
组件到你的项目中去。
npx shadcn-vue@latest add button
这条命令将添加 Button
组件到你的项目中去。你可以这样使用:
<script setup lang="ts">
import { Button } from '@/components/ui/button'
</script>
<template>
<div>
<Button>Click me</Button>
</div>
</template>