建设svelte生态靠大家

svelte生态的组件库比较少并且良莠不齐,因为技术选型的原因得用,只能在前人的基础上继续前进.

svelma-pro

基于开源项目svelma 扩展和修改, 所以在此感谢原作者c0bra以及bulma,svelte等团队.

原项目组件比较少,存在一些小bug,所以我在在原有的组件库的基础上，扩展了一些常见的组件(例如时间,日期选择器,仿antd的layout布局,分页,等等),并对发现的一些bug进行了修改，对原有的组件功能,事件以及用户配置进行更人性化的修改和扩展。

文档

文档及Demo

快速开始

1. 通过template创建svelte应用(或者sapper应用)

https://github.com/sveltejs/template 是一个svelte的初始化模板. degit这个脚手架可以帮你获取它:(PS: Rich-Harris大神被称为前端轮子哥果然是有有道理的,svelte,rollup,degit都是他的手笔)

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

2. 引入bulma样式及svelma-pro组件等依赖

bulma and svelma-pro

$ npm install --save bulma svelma-pro

scss

因为组件使用sass模板,所以也集成一下sass的编译.

 $ npm install --save-dev svelte-preprocess autoprefixer node-sass sass

3. config

在你的rollup或者webpack配置文件中添加scss支持:

// rollup配置  rollup.config.js
import sveltePreprocess from 'svelte-preprocess';

// ...

const preprocess = sveltePreprocess({
  scss: {
    includePaths: ['src'],
  },
  postcss: {
    plugins: [require('autoprefixer')],
  },
});

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

// webpack配置  webpack.config.js
import sveltePreprocess from 'svelte-preprocess';

// ...
const preprocess = sveltePreprocess({
  scss: {
    includePaths: ['src'],
  },
  postcss: {
    plugins: [require('autoprefixer')],
  },
});

module.export = {
  // ... 
  module: {
    rules: [
      {
        test: /.(svelte|html)$/,
        use: {
          loader: 'svelte-loader',
          options: {
            preprocess, 
            // ...
          }
        }
      },
    ]
  },
  ]
}

4. 引入Bulma的CSS样式和svelma-pro组件

5. 引入 Font Awesome 图标:

在你的主HTML配置CDN页面:

...或者通过npm包:

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

• 项目地址