演示库初始化

组件演示库是开发者在组件开发和调试过程中的得力助手,它能够直观展示组件库的实际效果。

步骤 1：初始化演示库

由于之前已经创建好了 play 目录,现在使用 Vite 脚手架来构建演示库项目,只需在命令行中输入以下命令：

1pnpm create vite@latest play

步骤 2：选择开发框架

接下来,脚手架会提示您选择一个开发框架。请使用方向键选择,并按回车键确认：

1? Select a framework: › - Use arrow-keys. Return to submit.
2    Vanilla
3❯   Vue
4    React
5    Preact
6    Lit
7    Svelte
8    Solid
9    Qwik
10    Angular
11    Others

步骤 3：选择开发技术

然后,选择您的开发技术,同样使用方向键选择,并按回车键确认：

1? Select a variant: › - Use arrow-keys. Return to submit.
2❯   TypeScript
3    JavaScript
4    Customize with create-vue ↗
5    Nuxt ↗

步骤 4：完成构建

一旦构建完成,您将看到 Done 的提示。请按照指示继续操作：

Done. Now run:

  cd play
  pnpm install
  pnpm run dev

步骤 5：进入演示库目录

1cd play

步骤 6：安装依赖

1pnpm install

步骤 7：运行演示库

1pnpm run dev

现在,您已经成功构建并运行了组件演示库,后续就开始您的组件开发和调试工作了。

演示库初始化#

演示库初始化