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

更多 shadcn-vue 中文文档在 Torna

Nuxt

安装并配置Nuxt

1. 创建项目

首先,使用 create-nuxt-app 创建一个新的 Nuxt 项目。

如果你选择使用 JavaScript 模板,那么必须存在 jsconfig.json 文件,这样命令行工具(CLI)才能正常运行。

npx nuxi@latest init my-app

2. 下载 TypeScript

如果你遇到报错 ERROR: Cannot read properties of undefined (reading 'sys') (x4),根据该报错的反馈,你应该安装 TypeScript 作为依赖项。

npm install -D typescript

3. 下载 Tailwind 模块

npx nuxi@latest module add @nuxtjs/tailwindcss

4. 添加 Nuxt 模块

shadcn-nuxt - 通过下方命令行自动下载

npx nuxi@latest module add shadcn-nuxt

shadcn-nuxt - 手动下载,添加下方代码至 modules/shadcn.ts 文件

点击展开查看代码
import {defineNuxtModule,addComponent,addComponentsDir,tryResolveModule,
} from 'nuxt/kit';export interface ShadcnVueOptions {/*** Prefix for all the imported component*/prefix: string;/*** Directory that the component lives in.* @default "~/components/ui"*/componentDir: string;
}export default defineNuxtModule<ShadcnVueOptions>({defaults: {prefix: 'Ui',componentDir: '~/components/ui',},meta: {name: 'ShadcnVue',configKey: 'shadcn',version: '0.0.1',compatibility: {nuxt: '>=3.9.0',bridge: false,},},async setup({ componentDir, prefix }) {const veeValidate = await tryResolveModule('vee-validate');const vaulVue = await tryResolveModule('vaul-vue');addComponentsDir({path: componentDir,extensions: ['.vue'],prefix,pathPrefix: false,},{prepend: true,});if (veeValidate !== undefined) {addComponent({filePath: 'vee-validate',export: 'Form',name: `${prefix}Form`,priority: 999,});addComponent({filePath: 'vee-validate',export: 'Field',name: `${prefix}FormField`,priority: 999,});}if(vaulVue !== undefined) {['DrawerPortal', 'DrawerTrigger', 'DrawerClose'].forEach((item) => {addComponent({filePath: 'vaul-vue',export: item,name: prefix + item,priority: 999,});})}addComponent({filePath: 'radix-vue',export: 'PaginationRoot',name: `${prefix}Pagination`,priority: 999,});addComponent({filePath: 'radix-vue',export: 'PaginationList',name: `${prefix}PaginationList`,priority: 999,});addComponent({filePath: 'radix-vue',export: 'PaginationListItem',name: `${prefix}PaginationListItem`,priority: 999,});},
});declare module '@nuxt/schema' {interface NuxtConfig {shadcn?: ShadcnVueOptions;}interface NuxtOptions {shadcn?: ShadcnVueOptions;}
}

5. 配置 nuxt.config.ts

export default defineNuxtConfig({modules: ['@nuxtjs/tailwindcss', 'shadcn-nuxt'],shadcn: {/*** Prefix for all the imported component*/prefix: '',/*** Directory that the component lives in.* @default "./components/ui"*/componentDir: './components/ui'}
})

6. 运行命令行工具(CLI)

运行 shadcn-vue 初始化命令开始你的项目:

npx shadcn-vue@latest init

7. 配置 components.json

在此,您将被询问几个问题,以配置 components.json 文件:

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/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. 应用结构

以下是 Nuxt 应用程序的默认项目结构,可供参考:

.
├── pages
│   ├── index.vue
│   └── dashboard.vue
├── components
│   ├── ui
│   │   ├── alert-dialog
│   │   │   ├── AlertDialog.vue
│   │   │   └── ...
│   │   ├── button
│   │   │   ├── Button.vue
│   │   │   └── ...
│   │   ├── dropdown-menu
│   │   │   ├── Dropdown.vue
│   │   │   └── ...
│   │   └── ...
│   ├── MainNav.vue
│   ├── PageHeader.vue
│   └── ...
├── lib
│   └── utils.ts
├── assets
│   ├── css
│   │   └── tailwind.css
├── app.vue
├── nuxt.config.ts
├── package.json
├── tailwind.config.js
└── tsconfig.json
  • UI 组件放置在 components/ui 文件夹中
  • 其他组件,例如 和 ,放置在 components 文件夹中
  • lib 文件夹包含所有的工具函数
  • utils.ts 中定义了 cn 辅助函数
  • assets/css 文件夹包含全局 CSS

9. 开始使用

你现在可以开始添加 shadcn-vue 组件到你的项目中去。

npx shadcn-vue@latest add button

这条命令将添加 Button 组件到你的项目中去。Nuxt 将会自动处理组件的导入,你只需像这样使用它:

<template><div><Button>Click me</Button></div>
</template>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/pingmian/58872.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Flarum:简洁而强大的开源论坛软件

Flarum简介 Flarum是一款开源论坛软件&#xff0c;以其简洁、快速和易用性而闻名。它继承了esoTalk和FluxBB的优良传统&#xff0c;旨在提供一个不复杂、不臃肿的论坛体验。Flarum的核心优势在于&#xff1a; 快速、简单&#xff1a; Flarum使用PHP构建&#xff0c;易于部署&…

CPU用户时间百分比

在计算机系统中&#xff0c;"CPU用户时间百分比&#xff08;CPU User Time&#xff09;"是一个性能监控指标&#xff0c;它描述了CPU在用户模式下执行的累积时间与总的CPU时间的比例。这个指标可以帮助我们了解系统在执行用户态程序时的负载情况。下面是一些关于CPU用…

vue系列==Vuex状态管理器

1、Vuex状态管理器 1、创建一个Vuex的store对象来统一管理多个组件之间共享的状态数据。在创建store对象时&#xff0c;可以配置state、getters、mutations和actions这4个对象&#xff0c;组件之间共享的状态数据在state对象中指定&#xff0c;而基于状态数据的计算属性可以在g…

ubuntu20.04安装ros与rosdep

目录 前置配置 配置apt清华源 配置ros软件源 添加ros安装源&#xff08;中科大软件源&#xff09; 设置秘钥 更新源 ros安装 安装ros 初始化 rosdep 更新 rosdep 设置环境变量 安装 rosinstall 安装验证 启动海龟仿真器 操控海龟仿真器 rosdep安装更新 安装 使用…

C#读取.ini配置文件

INI文件&#xff08;Initialization File&#xff09;是一种简单的文本文件格式&#xff0c;用于存储程序的配置信息。在Visual Studio中&#xff0c;INI文件通常用于存储应用程序或项目的设置和配置数据。这些设置可能包括数据库连接字符串、应用程序参数、用户偏好等。 INI文…

mobile频段要查找、设置并获取相关参数,该怎么破?

今天我们一起来学习查找和设置mobile频段&#xff0c;并获取相关参数。 一、mobile概述 1.1 简介 “4G mobile”指的是第四代移动通信技术&#xff0c;常用于描述通过4G网络进行的高速无线数据传输和通信。4G网络最显著的特征是其高速数据传输能力。理论上&#xff0c;4G可以…

「C/C++」C++11 之<thread>多线程编程

✨博客主页何曾参静谧的博客📌文章专栏「C/C++」C/C++程序设计📚全部专栏「VS」Visual Studio「C/C++」C/C++程序设计「UG/NX」BlockUI集合「Win」Windows程序设计「DSA」数据结构与算法「UG/NX」NX二次开发「QT」QT5程序设计「File」数据文件格式「PK」Parasolid函数说明目…

CSS元素类型(二)

CSS元素类型 重点 CSS元素类型基本的3种类型&#xff1a;1 块【div]1 可以设置宽度/高度2 如果你不设置宽度的话 宽度父元素3 独占一行【父元素的一行】4 margin【外边框】 auto[自动 将左右二边的空白区域平均分配给元素两端]父元素的居中效果空白区域 父元素宽度 - 本身元…

InsCode线上IDE推荐及使用指南

小编在使用inscode后非常震撼&#xff0c;惊叹于他的线上IDE功能和各类其他功能。 割绳子小游戏,这是小编在inscode上做的游戏部署的网站&#xff0c;大家可以去游玩&#xff0c;有什么值得改进的请大家多多指点。 接下来小编分两期为大家带来inscode线上及线下IDE推荐和使用…

[SAP ABAP] SMW0上传模板

通常来说&#xff0c;一个批量导入的程序必须使用指定的模板&#xff0c;我们需要将模板保存到SAP系统中&#xff0c;以便用户下载并更改。这里我们可以使用事务码SMW0解决上述的问题 1.选择二进制类型 2.输入存放的包 3.创建对象 选择需要进行上传的本地模板文件到SAP系统中 …

LSTM模型改进实现多步预测未来30天销售额

项目源码获取方式见文章末尾&#xff01; 600多个深度学习项目资料&#xff0c;快来加入社群一起学习吧。 《------往期经典推荐------》 项目名称 1.【BiLSTM模型实现电力数据预测】 2.【卫星图像道路检测DeepLabV3Plus模型】 3.【GAN模型实现二次元头像生成】 4.【CNN模型实…

中科蓝汛GPIO操作说明

第一种写法&#xff1a; GPIO配置输入模式 //内部上拉 GPIOBDE | BIT(4); //数字IO使能: 0为模拟IO, 1 为数字IO GPIOBDIR | BIT(4); //控制IO的方向: 0为输出, 1为输入. GPIOBFEN & ~BIT(4);//0:当作通用GPIO使用 //1:当作其它功能性IO GPIOBPU | BIT(4); //10K上拉…

docker file容器化部署Jenkins(一)

Jenkins Github地址&#xff1a;https://github.com/jenkinsci/jenkins 国内镜像地址&#xff1a;https://docker.aityp.com/ 准备工作 # 创建持久化卷目录 mkdir /data/jenkins_home/Jenkins拉取镜像 # 由于Jenkins需要JDK&#xff0c;所以直接拉取带有JDK的Jenkins镜像 doc…

3DDFA-V3——基于人脸分割几何信息指导下的三维人脸重建

1. 研究背景 从二维图像中重建三维人脸是计算机视觉研究的一项关键任务。在虚拟现实、医疗美容、计算机生成图像等领域中&#xff0c;研究人员通常依赖三维可变形模型&#xff08;3DMM&#xff09;进行人脸重建&#xff0c;以定位面部特征和捕捉表情。然而&#xff0c;现有的方…

高并发编程

一台64G内存的服务器QPS可以达到9W&#xff0c;TPS&#xff08;事务&#xff09;可以达到5K&#xff0c;每个TPS大约包含18个QPS.只读的话QPS可以达到30~40万.阿里云有相关测试工具、测试方法、测试结果。 1、volatile 保证可见性&#xff0c;禁止指令重排&#xff0c;避免多线…

HTML 基础标签——表单标签<form>

文章目录 1. `<form>` 标签:定义表单容器2. `<input>` 标签:多用途输入控件3. `<textarea>` 标签:多行文本输入框4. `<select>` 标签:下拉选择框5. `<option>` 标签:下拉菜单选项6. `<button>` 标签:按钮元素7. `<label>` 标签…

GraphQL 与 Elasticsearch 相遇:使用 Hasura DDN 构建可扩展、支持 AI 的应用程序

作者&#xff1a;来自 Elastic Praveen Durairaju GraphQL 提供了一种高效且灵活的数据查询方式。本博客将解释 Hasura DDN 如何与 Elasticsearch 配合使用&#xff0c;以实现高性能和元数据驱动的数据访问。 此示例的代码和设置可在此 GitHub 存储库 - elasticsearch-subgraph…

智能座舱相关术语全解及多模态交互在智能座舱中的应用

文章目录 座舱相关术语全解1. 智能座舱2. UFS3. 多模态交互4. 3D虚拟引擎5. AR/VR6. GNSS7. TTS8. DPU9. 摄像头10. 屏幕/显示器11. 音频12. 无线连接13. 其他组件 多模态交互在智能座舱中有以下一些应用 座舱相关术语全解 1. 智能座舱 智能座舱&#xff08;intelligent cabi…

RSI 5G通信技术中用于标识小区的特定参数

RSI是指在5G通信技术中用于标识小区的特定参数&#xff0c;全称为Radio Subframe Indicator&#xff08;无线子帧指示符&#xff09;。在原文的上下文中&#xff0c;RSI被用来确保相邻小区间有足够的间隔&#xff0c;避免由于RSI冲突导致用户设备&#xff08;UE&#xff09;随机…

selinux和防火墙

目录 selinux 1、selinux的说明 2、selinux的工作原理 安全上下文四个字段&#xff1a; 访问过程&#xff1a; 3、selinux的启动、关闭与查看 &#xff08;1&#xff09;SELinux三种模式 &#xff08;2&#xff09;修改安全上下文 4、selinux对linux服务的影响 防火墙 …