From cd8f7c3b860056de1f85667178e04d0a39c8ac19 Mon Sep 17 00:00:00 2001 From: KeiferJu Date: Sun, 22 Mar 2020 12:01:16 +0800 Subject: [PATCH] =?UTF-8?q?=E6=9B=B4=E7=BB=86=E4=BD=A0=E6=96=87=E6=A1=A3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 2 + README_cn.md | 128 ++++++++++++++++++++++++++++++++++++++++++++++ docs/README.md | 6 ++- docs/README_cn.md | 128 ++++++++++++++++++++++++++++++++++++++++++++++ 4 files changed, 262 insertions(+), 2 deletions(-) create mode 100644 README_cn.md create mode 100644 docs/README_cn.md diff --git a/README.md b/README.md index fcbb022..238f54d 100644 --- a/README.md +++ b/README.md @@ -3,6 +3,8 @@ # svelma-pro +* [中文文档](README_cn.md) + Based on [svelma](https://github.com/c0bra/svelma) project extension and modification, thanks to the original author components such as c0bra and bulma Based on the original component library, some common components and bug fixes are extended, and the functions of some components are modified. diff --git a/README_cn.md b/README_cn.md new file mode 100644 index 0000000..3167480 --- /dev/null +++ b/README_cn.md @@ -0,0 +1,128 @@ + + + +# svelma-pro + +基于开源项目[svelma](https://github.com/c0bra/svelma) 扩展和修改, 所以在此感谢原作者`c0bra`以及`bulma`,`svelte`等团队. + +原项目组件比较少,存在一些小bug,所以我在在原有的组件库的基础上，扩展了一些常见的组件(例如时间,日期选择器,仿antd的layout布局,分页,等等),并对发现的一些bug进行了修改，对原有的组件功能,事件以及用户配置进行更人性化的修改和扩展。 + + +# 文档 + +[文档及Demo]](http://www.myllcn.com/smx-svelma/) + +# 快速开始 + +### 1. 通过template创建svelte应用(或者sapper应用) + +[https://github.com/sveltejs/template](sveltejs/template) 是一个svelte的初始化模板. [degit](https://www.npmjs.com/package/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 smx-svelma + +#### scss + + $ npm install --save-dev svelte-preprocess autoprefixer node-sass sass + + +### 3. config +在你的rollup或者webpack配置文件中添加scss支持: + +```js +// 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, + }) + ] +} +``` + +```js +// 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组件 + +```html + + + +``` + +### 5. 引入 [Font Awesome](https://fontawesome.com/) 图标: + +在你的主HTML配置CDN页面: + +```html + +``` + +...或者通过npm包: + + $ npm install --save @fortawesome/fontawesome-free + +```html + + +``` diff --git a/docs/README.md b/docs/README.md index 35cc680..238f54d 100644 --- a/docs/README.md +++ b/docs/README.md @@ -3,13 +3,15 @@ # svelma-pro +* [中文文档](README_cn.md) + Based on [svelma](https://github.com/c0bra/svelma) project extension and modification, thanks to the original author components such as c0bra and bulma Based on the original component library, some common components and bug fixes are extended, and the functions of some components are modified. # Documentation -[See docs + demos site here]() +[See docs + demos site here](http://www.myllcn.com/svelma-pro/) # Quick Start @@ -124,4 +126,4 @@ From CDN in your HTML page: import 'bulma/css/bulma.css' import '@fortawesome/fontawesome-free/css/all.css' -``` \ No newline at end of file +``` diff --git a/docs/README_cn.md b/docs/README_cn.md new file mode 100644 index 0000000..3167480 --- /dev/null +++ b/docs/README_cn.md @@ -0,0 +1,128 @@ + + + +# svelma-pro + +基于开源项目[svelma](https://github.com/c0bra/svelma) 扩展和修改, 所以在此感谢原作者`c0bra`以及`bulma`,`svelte`等团队. + +原项目组件比较少,存在一些小bug,所以我在在原有的组件库的基础上，扩展了一些常见的组件(例如时间,日期选择器,仿antd的layout布局,分页,等等),并对发现的一些bug进行了修改，对原有的组件功能,事件以及用户配置进行更人性化的修改和扩展。 + + +# 文档 + +[文档及Demo]](http://www.myllcn.com/smx-svelma/) + +# 快速开始 + +### 1. 通过template创建svelte应用(或者sapper应用) + +[https://github.com/sveltejs/template](sveltejs/template) 是一个svelte的初始化模板. [degit](https://www.npmjs.com/package/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 smx-svelma + +#### scss + + $ npm install --save-dev svelte-preprocess autoprefixer node-sass sass + + +### 3. config +在你的rollup或者webpack配置文件中添加scss支持: + +```js +// 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, + }) + ] +} +``` + +```js +// 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组件 + +```html + + + +``` + +### 5. 引入 [Font Awesome](https://fontawesome.com/) 图标: + +在你的主HTML配置CDN页面: + +```html + +``` + +...或者通过npm包: + + $ npm install --save @fortawesome/fontawesome-free + +```html + + +```