DEV Community
·
如何将 shadcn-svelte 集成到 editable.website 模板中
原文英文，约500词，阅读约需2分钟。
📝
内容提要
本文讲解如何在 editable.website 模板中集成 shadcn-svelte。步骤包括：克隆模板、安装依赖、配置环境变量、初始化数据库、运行开发服务器、设置路径别名、解决 Prettier 依赖问题、运行 CLI 配置并添加组件。
🎯
关键要点
-
步骤1：克隆Editable.Website模板到本地机器。
-
步骤2：安装项目所需的依赖。
-
步骤3：复制.env.example文件并配置数据库和管理员密码。
-
步骤4：使用sqlite3初始化数据库。
-
步骤5：运行开发服务器。
-
步骤6：创建jsconfig.json文件以配置导入别名。
-
步骤7：在svelte.config.js中设置路径别名。
-
步骤8：安装兼容的Prettier版本以解决依赖警告。
-
步骤9：运行CLI配置并添加组件。
-
完成后可以开始向项目中添加组件。
❓
延伸问答
如何克隆 editable.website 模板？
使用命令 git clone https://github.com/michael/editable-website.git 克隆模板。
如何配置数据库和管理员密码？
复制 .env.example 文件为 .env，并配置数据库和管理员密码。
如何初始化数据库？
确保系统安装了 sqlite3，然后使用命令 sqlite3 data/db.sqlite3 < sql/schema.sql 初始化数据库。
如何设置路径别名？
创建 jsconfig.json 文件并在 svelte.config.js 中设置路径别名。
如何解决 Prettier 依赖问题？
安装兼容的 Prettier 版本，并在 package.json 中调整脚本以使用特定版本。
如何向项目中添加组件？
使用命令 pnpm dlx shadcn-svelte@latest add button 将按钮组件添加到项目中。
🏷️
