https://github.com/lingdu2012/ramui-svelte-bootstrap
a UI component for Svelte 一个前端UI组件
https://github.com/lingdu2012/ramui-svelte-bootstrap
Last synced: 11 months ago
JSON representation
a UI component for Svelte 一个前端UI组件
- Host: GitHub
- URL: https://github.com/lingdu2012/ramui-svelte-bootstrap
- Owner: lingdu2012
- License: apache-2.0
- Created: 2020-07-12T15:35:31.000Z (almost 6 years ago)
- Default Branch: master
- Last Pushed: 2021-02-03T07:08:17.000Z (over 5 years ago)
- Last Synced: 2025-02-23T04:43:59.229Z (over 1 year ago)
- Language: Svelte
- Homepage:
- Size: 85.9 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# ramUI-Svelte-Bootstrap
a UI component for Svelte，It will be kept up to date
> 这是一个基于Svelte和Bootstrap的UI组件封装实践
> 本项目基于Svelte3.X 和 Bootstrap 5.X，同时支持自定义主题
### 设计思考
* 非数据交互类的组件不需要封装，例如点击按钮，下拉选择按钮则可以考虑封装。
* 封装组件考虑自定义样式的配置，留给使用者一部分冗余空间，避免hack方式的样式使用。
* 坚持“适量”和“少即是多”的原则，保证灵活性的同时，降低组件复杂度。
### 主要依赖
> 安装Bootstrap5.x时需要同时安装popper
```javascript
npm install bootstrap@next
npm install --save @popperjs/core@^2.5.4
```
> 使用rollup作为打包工具
```javascript
import svelte from 'rollup-plugin-svelte';
import commonjs from '@rollup/plugin-commonjs';
import resolve from '@rollup/plugin-node-resolve';
import livereload from 'rollup-plugin-livereload';
import { terser } from 'rollup-plugin-terser';
import postcss from 'rollup-plugin-postcss';
import sveltePreprocess from 'svelte-preprocess'
```
### 与vscode开发环境相关问题
> 需要在src目录下增加svelte.config.js才可以在.svelte文件内使用scss语法样式
```javascript
const sveltePreprocess = require('svelte-preprocess');
module.exports = {
preprocess: sveltePreprocess({
scss: {
includePaths: ['src'],
},
postcss: {
plugins: [],
},
}),
};
```
### 基本使用方法
> 将RamUI文件夹内文件放入工程目录中
> 在所需要的文件中引入所需要的组件
```javascript
import 'bootstrap/dist/css/bootstrap.min.css';
import RamContainer from '../src/components/Container.svelte';
import RamRow from '../src/components/Row.svelte';
import RamCol from '../src/components/Col.svelte';
```
```javascript
```
### 基础说明
> 本文件当前处于研究尝试的一个基本路线，代码会不断完善、优化和规范。
欢迎有兴趣的人给予建议和指导。