使用 vite 快速初始化 shadcn-vue 项目

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.jsoncompilerOptions 中,之后你的应用就可以正确地解析路径。

{
  "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>
相关推荐
懒大王爱吃狼26 分钟前
Python教程:python枚举类定义和使用
开发语言·前端·javascript·python·python基础·python编程·python书籍
逐·風4 小时前
unity关于自定义渲染、内存管理、性能调优、复杂物理模拟、并行计算以及插件开发
前端·unity·c#
Devil枫5 小时前
Vue 3 单元测试与E2E测试
前端·vue.js·单元测试
尚梦5 小时前
uni-app 封装刘海状态栏(适用小程序, h5, 头条小程序)
前端·小程序·uni-app
GIS程序媛—椰子6 小时前
【Vue 全家桶】6、vue-router 路由(更新中)
前端·vue.js
前端青山6 小时前
Node.js-增强 API 安全性和性能优化
开发语言·前端·javascript·性能优化·前端框架·node.js
毕业设计制作和分享7 小时前
ssm《数据库系统原理》课程平台的设计与实现+vue
前端·数据库·vue.js·oracle·mybatis
程序媛小果7 小时前
基于java+SpringBoot+Vue的旅游管理系统设计与实现
java·vue.js·spring boot
从兄7 小时前
vue 使用docx-preview 预览替换文档内的特定变量
javascript·vue.js·ecmascript
凉辰8 小时前
设计模式 策略模式 场景Vue (技术提升)
vue.js·设计模式·策略模式