header-lynn2025
v1.0.1
Published
header-lynn
Readme
My Vue Components
基于 Vue2 和 Element UI 的组件库，支持通过 npm 安装或 CDN 直接引入使用。
安装
方式一：npm 安装
npm install my-vue-components方式二：CDN 引入（推荐）
通过 jsDelivr 或 unpkg CDN 使用：
<!-- 引入 Vue2 -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<!-- 引入 Element UI CSS -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 引入 Element UI JS -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<!-- 引入组件库 -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/my-components.js"></script>或者使用 unpkg：
<script src="https://unpkg.com/[email protected]/dist/my-components.js"></script>使用
通过 CDN 使用
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>使用 CDN 组件</title>
<!-- 引入依赖 -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<!-- 引入组件库 -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/my-components.js"></script>
</head>
<body>
<div id="app">
<!-- 组件会自动注册，可以直接使用 -->
<!-- <my-button>按钮</my-button> -->
</div>
<script>
new Vue({
el: '#app',
// 组件已自动注册，无需手动调用 Vue.use()
});
</script>
</body>
</html>通过 npm 使用
import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import MyComponents from 'my-vue-components';
Vue.use(ElementUI);
Vue.use(MyComponents);
new Vue({
render: h => h(App)
}).$mount('#app');开发
本地开发
# 安装依赖
npm install
# 开发模式（监听文件变化）
npm run dev
# 构建生产版本
npm run build发布到 npm
- 确保已登录 npm：
npm login - 更新版本号（如需要）：修改
package.json中的version - 构建：
npm run build - 发布：
npm publish
发布后，可通过以下 CDN 地址访问：
- jsDelivr:
https://cdn.jsdelivr.net/npm/my-vue-components@版本/dist/my-components.js - unpkg:
https://unpkg.com/my-vue-components@版本/dist/my-components.js
添加组件
- 在
src/components/目录下创建组件文件（如MyButton.vue） - 在
src/index.js中导入并注册组件：
import MyButton from './components/MyButton.vue';
const components = {
MyButton
};- 重新构建：
npm run build
注意事项
- Vue 和 Element UI 作为外部依赖，不会被打包进组件库
- 使用 CDN 方式时，需要先引入 Vue 和 Element UI
- 组件库使用 UMD 格式，支持多种模块系统
- 通过 script 标签引入时，组件会自动注册到全局 Vue 实例
版本
当前版本：1.0.0
许可证
MIT