0.0.35 • Published 7 months ago
sf-v3-ui v0.0.35
一个 vue3 组件库
技术栈
vue3+ts+vite
快速上手
安装
npm i sf-v3-ui
yarn add sf-v3-ui
全局引入
import { createApp } from "vue";
import App from "./App.vue";
import sf-v3-ui from "sf-v3-ui";
import "sf-v3-ui/es/style.css"
import "lib-flexible";
createApp(App).use(sf-v3-ui).mount("#app");
按需引入(支持)
默认支持基于 ES modules 的 tree shaking,对于 js 部分,直接引入 import { SFButton } from 'sf-v3-ui' 就会有按需加载的效果。
vite
- 安装
vite-plugin-style-import
npm i vite-plugin-style-import -D
- vite.config.ts 添加配置
import style from "vite-plugin-style-import";
...
export default defineConfig({
...
plugins: [
style({
libs: [
// 如果没有你需要的resolve,可以在lib内直接写,也可以给我们提供PR
{
libraryName: "sf-v3-ui",
esModule: true,
resolveStyle: (name) => {
return `sf-v3-ui/es/style.css`;
},
},
],
}),
]
})
- 页面直接使用相应组件即可
import { SFButton} from 'sf-v3-ui''
webpack
- 安装
babel-plugin-import
npm install babel-plugin-import --save-dev
- 在
.babelrc
或babel.config.js
中添加配置: (随着组件库的丰富,这里的配置可能需要更新)
plugins: [
[
"import",
{
libraryName: "sf-v3-ui",
libraryDirectory: "es/packages",
camel2DashComponentName: false,
customName: (name) => {
return `sf-v3-ui/es/packages/${name.slice(1).toLowerCase()}`;
},
style: () => {
return "sf-v3-ui/es/style.css";
},
},
],
],
- 页面直接使用相应组件即可
import { SFButton} from 'sf-v3-ui''
目录结构
├── README.md
├── examples -- 运行代码
│ ├── App.vue
│ ├── assets
│ ├── components
│ ├── main.ts
│ ├── shims-vue.d.ts
│ └── vite-env.d.ts
├── index.html -- 入口文件
├── packages -- 组件库
│ ├── button -- 组件
│ │ ├── index.ts
│ │ └── src
│ │ ├── button.ts -- 组件ts定义(如果需要)
│ │ └── button.vue -- 组件
│ └── index.ts -- 组件库整体导出
├── public
│ └── favicon.ico
├── tests -- 测试用例
│ └── button.spec.ts
├── tsconfig.json
├── vite.config.ts -- 配置文件
└── yarn.lock
注意
.postcssrc.js 配置
module.exports = {
"plugins": {
"postcss-import": {},
"postcss-url": {},
"postcss-pxtorem": {
rootValue: 75, //换算基数
}
}
}
目录结构
├── README.md
├── examples -- 运行代码
│ ├── App.vue
│ ├── assets
│ ├── components
│ ├── main.ts
│ ├── shims-vue.d.ts
│ └── vite-env.d.ts
├── index.html -- 入口文件
├── packages -- 组件库
│ ├── button -- 组件
│ │ ├── index.ts
│ │ └── src
│ │ ├── button.ts -- 组件ts定义(如果需要)
│ │ └── button.vue -- 组件
│ └── index.ts -- 组件库整体导出
├── public
│ └── favicon.ico
├── tests -- 测试用例
│ └── button.spec.ts
├── tsconfig.json
├── vite.config.ts -- 配置文件
└── yarn.lock
todo
0.0.34
7 months ago
0.0.35
7 months ago
0.0.30
1 year ago
0.0.31
1 year ago
0.0.33
1 year ago
0.0.27
1 year ago
0.0.28
1 year ago
0.0.29
1 year ago
0.0.21
2 years ago
0.0.22
2 years ago
0.0.23
2 years ago
0.0.24
2 years ago
0.0.25
2 years ago
0.0.26
2 years ago
0.0.20
2 years ago
0.0.15
2 years ago
0.0.16
2 years ago
0.0.17
2 years ago
0.0.18
2 years ago
0.0.19
2 years ago
0.0.12
2 years ago
0.0.13
2 years ago
0.0.14
2 years ago
0.0.11
2 years ago
0.0.10
2 years ago
0.0.9
2 years ago
0.0.8
2 years ago
0.0.5
2 years ago
0.0.4
2 years ago
0.0.7
2 years ago
0.0.6
2 years ago
0.0.3
2 years ago
0.0.2
2 years ago
0.0.1
2 years ago