@abbychau/svelma 中文文档教程

Question

Svelma

Svelma 是一组 Svelte 的 UI 组件，基于 Bulma CSS框架。

Inspiration

非常感谢 Buefy 项目！ 它为 Svelma 提供了灵感和大量代码示例。如果您喜欢 Vue.js 和 Bulma，请查看。

Features

• Extremely lightweight thanks to Svelte, a compile-only javascript framework. The bundle is 50K minified, 14K gzipped.
• Components can be used independently, so a modern tree-shaking bundler will reduce the final bundle size even further.
• Svelma does not bundle Bulma, so you are free to include it in your project however you wish, themes and all.

Documentation

在此处查看文档和演示站点

Quick Start

1. Create a svelte app from the template

https://github.com/sveltejs/template< /a> 是 svelte 的模板仓库。 degit 将为您构建回购协议：

$ npx degit sveltejs/template my-svelma-project
$ cd my-svelma-project
$ npm install

注意：当然还有其他设置方式一个使用 svelte 的项目。 这只是最快的开始方式。

2. Install svelma and dependencies via npm

请注意，您需要一个用于汇总的 CSS 处理插件，以便您可以导入 css 文件。 这里我们使用 rollup-plugin-postcss。 如果你要使用 标记在您的 HTML 中，您可以跳过插件和下面步骤 #2 中的 import ... css 语句

$ npm install --save bulma svelma
$ npm install node-sass svelte-preprocess rollup-plugin-postcss --save-dev

将 postcss 插件添加到您的汇总配置中（我不要认为顺序真的很重要）：

// rollup.config.js
import postcss from 'rollup-plugin-postcss'
import preprocess from 'svelte-preprocess'

// ...

export default {
  // ...
  plugins: [
    svelte({
      // ...
      preprocess: preprocess()
    }),

    postcss(),
  }
}

3. Import Bulma's CSS and Svelma components

<!-- App.svelte -->
<script>
  import 'bulma/css/bulma.css'
  import { Button } from 'svelma'
</script>

<button type="is-primary">I'm a Button!</button>

4. Include Font Awesome icons

从 HTML 页面中的 CDN：

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css"></link>

...或者作为导入根组件的 npm 包：

$ npm install --save @fortawesome/fontawesome-free

<!-- App.svelte -->
<script>
  import 'bulma/css/bulma.css'
  import '@fortawesome/fontawesome-free/css/all.css'
</script>

SSR

如果您使用 Sapper 进行服务器端渲染，则需要导入 .svelte 文件直接让您的应用程序可以编译它们，而不是从已编译的模块中导入。

即：

import Button from 'svelma/src/components/Button.svelte'

而不是

import { Button } from 'svelma'

Development

1. Clone this repo: git clone https://github.com/c0bra/svelma.git
2. Install dependencies:
3. npm i && (cd docs; npm i)
4. npm install -g semantic-release-cli commitizen
5. Start the automated build and automated docs: npm run dev
6. Open url that console prints in your browser

Commit

$ git cz

Publish

注意：CI 应该使用 semantic-release 自动发布新版本代码

$ npm version <version>
$ npm publish

License

在 MIT 许可下发布。

版权所有 ©，布赖恩·汉恩。