当前位置: 首页 > news >正文

使用 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.ts

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>

http://www.lryc.cn/news/452986.html

相关文章:

  • 微信小程序:一个小程序跳转至另一个小程序
  • Java第二阶段---10方法带参---第二节 方法重载(Overloading)
  • Java Web 之 Session 详解
  • 63.5 注意力提示_by《李沐:动手学深度学习v2》pytorch版
  • vscode 的terminal 输出打印行数限制设置
  • 深入挖掘C++中的特性之一 — 继承
  • Linux 下 poll 详解
  • virtualbox配置为NAT模式后物理机和虚拟机互通
  • 工程机械车辆挖掘机自卸卡车轮式装载机检测数据集VOC+YOLO格式2644张3类别
  • [Notepad++] 文本编辑器的下载及详细安装使用过程(附有下载文件)
  • 深入浅出Java多线程(六):Java内存模型
  • 注册了个小趴菜999#it#com
  • UE4 材质学习笔记02(数据类型/扭曲着色器)
  • Linux驱动开发(速记版)--设备树插件
  • 代码报错后如何定位问题
  • Python数据可视化--Matplotlib--入门
  • 美国食品等级FDA认证测试介绍
  • Vue2如何在网页实现文字的逐个显现
  • mybatisplus的查询,分页查询,自定义多表查询,修改的几种写法
  • 括号匹配判断
  • 数据结构(栈和队列的实现)
  • Python批量处理客户明细表格数据,挖掘更大价值
  • NAND Flash虚拟层索引表机制
  • Spring Boot框架:新闻推荐系统开发新趋势
  • RK3568平台(opencv篇)opencv处理图像
  • 【移动端】Viewport 视口
  • PWM 模式
  • 模拟算法(3)_Z字形变换
  • Go语言实现长连接并发框架 - 任务执行流路由模块
  • Windows 编译 FFmpeg 源码详细教程