DEV Community
·
如何将 shadcn-svelte 集成到 editable.website 模板中
内容提要
本文讲解如何在 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配置并添加组件。
-
完成后可以开始向项目中添加组件。
延伸解读
环境配置的重要性
在集成 shadcn-svelte 时，正确配置环境变量至关重要。确保 .env 文件中的数据库和管理员密码设置正确，可以避免后续开发中出现连接问题。
路径别名的设置
创建 jsconfig.json 文件并在 svelte.config.js 中设置路径别名，可以提高代码的可读性和维护性。合理使用别名可以简化导入路径，减少错误发生的可能性。
Prettier 版本兼容性
安装与项目兼容的 Prettier 版本是解决依赖警告的关键。确保在 package.json 中正确配置 npm 脚本，以便在格式化代码时使用合适的 Prettier 版本，避免潜在的格式化问题。
延伸问答
如何克隆 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 将按钮组件添加到项目中。
