svelte生態(tài)的組件庫比較少并且良莠不齊,因?yàn)榧夹g(shù)選型的原因得用,只能在前人的基礎(chǔ)上繼續(xù)前進(jìn).
svelma-pro
基于開源項(xiàng)目svelma 擴(kuò)展和修改, 所以在此感謝原作者c0bra以及bulma,svelte等團(tuán)隊(duì).
原項(xiàng)目組件比較少,存在一些小bug,所以我在在原有的組件庫的基礎(chǔ)上凿将，擴(kuò)展了一些常見的組件(例如時(shí)間,日期選擇器,仿antd的layout布局,分頁,等等),并對(duì)發(fā)現(xiàn)的一些bug進(jìn)行了修改瓶籽，對(duì)原有的組件功能,事件以及用戶配置進(jìn)行更人性化的修改和擴(kuò)展霍衫。
文檔
快速開始
1. 通過template創(chuàng)建svelte應(yīng)用(或者sapper應(yīng)用)
https://github.com/sveltejs/template 是一個(gè)svelte的初始化模板. degit這個(gè)腳手架可以幫你獲取它:(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
因?yàn)榻M件使用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組件
<!-- main.js or client.js(sapper) -->
<script>
import 'bulma/css/bulma.css'
</script>
5. 引入 Font Awesome 圖標(biāo):
在你的主HTML配置CDN頁面:
<link rel="stylesheet" ></link>
...或者通過npm包:
$ npm install --save @fortawesome/fontawesome-free
<!-- main.js or client.js(sapper) -->
<script>
import 'bulma/css/bulma.css'
import '@fortawesome/fontawesome-free/css/all.css'
</script>
