0.0.1 • Published 2 years ago
cmq-plus v0.0.1
适合 vue3 的 UI 组件库
注意
- 安装 vue、ts,配置 tsconfig.json
- 创建 pnpm-workspace.yaml
- 创建项目 packages、play、docs
- play 使用 pnpm create vite 创建演示项目
- 配置 script 脚本
pnpm run -C play dev
- 创建全局类型声明目录 typings
- 组件中包含:组件 components、样式 theme-chalk、工具方法 utils、指令 directives、钩子 Hooks 等
- 每个 package 都是独立模块,其中的 package.json 修改 name,scripts
- 将每个 package 安装在根目录下
pnpm install @cmq-plus/components -w
pnpm install @cmq-plus/theme-chalk -w
pnpm install @cmq-plus/utils -w
- 创建符合 BEM 规范的方法和 mixin 样式
- 创建整合后的 cmq-plus,导入所有 components;注意 package.json 的"name": "cmq-plus"
- 组件打包
- 整个组件打包(iife,cjs,esm)
- 按需打包
特点
- monorepo
- ts
- vue3
- rollup
Usage
全部引入
pnpm add cmq-plus -S
// main.ts
import { createApp } from 'vue';
import App from './App.vue';
import cmqUI from 'cmq-plus';
const app = createApp(App);
app.use(cmqUI).mount('#app');
按需引入
借助插件babel-plugin-import
实现按需加载
// App.vue
import { button as CButton } from 'cmq-plus';
<CButton></CButton>;
cdn 引入
0.0.1
2 years ago