svelte component template

Svelte 3组件模板

一个高度开放的基础，用于建筑可共享的Svelte 3组件

目录

1. 特征
2. 入门
3. 发展
4. 预处理器
5. 测试
6. 发布给NPM
7. 常见问题

特征

• 预处理
• 格式
• 覆盖
• 故事书
• 测试

入门

1. 克隆模板：

选项＃1：用GitHub的“使用此模板”选项克隆它：

选项＃2：用DEGIT克隆此存储库：

npx degit YogliB/svelte-component-template ` my-new-component `

2. 输入文件夹：

 cd my-new-component

2. 启动git：

git init

3. 安装依赖项：

npm install

3. 配置package.json ：

npm init

4. 开始编码：

code .

• 您的组件的源代码生活在src/lib/[MyComponent]/[MyComponent].svelte中。

发展

1. 启动Sveltekit：

npm run dev

2. 在src/lib中编辑组件文件，保存并观看魔术发生。

3. 将您的组件导出在src/lib/index.js中。

4. 从$ lib $中导入src/routes/index.svelte中的组件，因此您可以预览和测试。

5. 导航到Localhost：3000，可以直播您的组件。

预处理器

所有预处理都用鲜艳的预处理处理。在svelte.config.js中配置它。

测试

交互测试

这是一种简单而直观的方法，可以在柏树的帮助下通过Storybook完成。可以在此存储库中找到示例和预制测试脚本，并且可以在Storybook的文档中找到更多信息。

快照测试

在此存储库中，您会找到一个基本的工作流，该工作流程使用色彩进行快照测试。

常见问题

index.js文件是用什么？

Svelte能够从单个来源导入多个组件。

例如，它可以让用户执行：

 import { MyComponent , MyOtherComponent } from 'my-component-library' ;

而不是：

 import MyComponent from 'my-component-library/components/MyComponent.svelte' ;
import MyOtherComponent from 'my-component-library/components/MyOtherComponent' ;

我如何在组件中包括3'rd Party CSS？

有一些选择要这样做：

1. 不要包含3'rd Party CSS，而只需告诉您的用户执行此操作（可能使用PostCSS）。
2. 通过cdn包括它：这样：

 @import url ( 'https://unpkg.com/@scope/package/main.min.css' );

发布给NPM

1. 准备出版包：

npm run package

2. 发布包：

 cd package
npm run publish

• 创建和发布范围的公共套餐
• 创建和发布未指示的公共套餐