vue3-components-template
v1.0.4
Published
Vue组件库模板
Maintainers
yujun-npmReadme
🚀 vue3-components-template
desc：这是一个 VUE3 的原子组件库模板，提供组件打包能力和发布能力
组件库源代码相关
# 安装所有目录依赖
pnpm i
# 打包组件库
pnpm run build
# 发布组件库
pnpm run publish:core
# 发布组件库（beta 版本）
pnpm run publish:core:beta
# 本地启动
pnpm run dev:core
# 自动化发布 Vue 组件库，使用 Changesets 工具自动处理版本号管理、生成变更日志，将包发布到 npm registry（或配置的其他包管理平台）
pnpm run ci:publish📦 安装
使用该组件库之前，请确保已经安装了 Vue3 项目并引入了 ElementPlusX 组件库。
# NPM
npm install vue3-components-template
# PNPM（推荐）
pnpm install vue3-components-template
# Yarn
yarn install vue3-components-template📚 使用案例
- 按需引入
<script>
import { CpnA, CpnB } from 'vue3-components-template';
function handleStart() {
console.log('start');
}
function handleFinish() {
console.log('finish');
}
function handleEnd() {
console.log('end');
}
</script>
<template>
<div style="display: flex; flex-direction: column; height: 230px; justify-content: space-between;">
<CpnA />
<CpnB propsA="自定义B" :propsB="666" propsC="bbb" @start="handleStart" @finish="handleFinish" @end="handleEnd" />
</div>
</template>- 全局引入
// main.ts
import { createApp } from 'vue'
import Vue3ComponentsTemplate from 'vue3-components-template';
import App from './App.vue'
import 'element-plus/dist/index.css'
const app = createApp(App);
app.use(Vue3ComponentsTemplate);
app.mount('#app');- CDN 引入
<!-- CDN 引入 -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 引入 Vue 3 -->
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<!-- 引入 Element Plus -->
<link href="https://unpkg.com/element-plus/dist/index.css" rel="stylesheet">
<script src="https://unpkg.com/element-plus/dist/index.full.js"></script>
<!-- 引入组件库 -->
<script src="https://unpkg.com/[email protected]/dist/umd/index.js"></script>
</head>
<body>
<div id="app">
<!-- 尝试使用 kebab-case 形式的组件名 -->
<cpn-a></cpn-a>
<cpn-b props-a="自定义B" :props-b="666" props-c="bbb" @start="handleStart" @finish="handleFinish" @end="handleEnd"></cpn-b>
</div>
<script>
const { createApp } = Vue
const app = createApp({
setup() {
function handleStart() {
console.log('start');
}
function handleFinish() {
console.log('finish');
}
function handleEnd() {
console.log('end');
}
return {
handleStart,
handleFinish,
handleEnd
}
}
})
app.component('cpn-a', window.VueComponents.CpnA);
app.component('cpn-b', window.VueComponents.CpnB);
app.mount('#app')
</script>
</body>
</html>开发计划
- 1.*.*：组件库打包
- 2.*.*：组件库文档、组件预览页面