JS：NPM发布一个Vue组件UI库并使用CDN引入使用
【摘要】 NPM CDN : https://www.jsdelivr.com/
一、发布一个Vue组件
1、使用webpack-simple 模板项目初始化
vue init webpack-simple moment-ui
cd moment-ui
cnpm i
12345
2、新建组件
将新建的组件放在plugin文件夹中
src/plugin/Button...
NPM CDN : https://www.jsdelivr.com/
一、发布一个Vue组件
1、使用webpack-simple 模板项目初始化
vue init webpack-simple moment-ui
cd moment-ui
cnpm i
- 1
- 2
- 3
- 4
- 5
2、新建组件
将新建的组件放在plugin文件夹中
src/plugin/Button.vue
<template>
<div>Button</div>
</template>
<script>
export default {
name: "MoButton",
};
</script>
<style lang="scss" scoped>
</style>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
3、注册组件
src/plugin/index.js
import Button from "./Button.vue";
const components = [Button];
// 注册组件
const install = function (Vue, options) {
components.forEach((component) => { Vue.component(component.name, component);
});
};
/* 支持使用标签的方式引入 Vue是全局变量时，自动install */
if (typeof window !== "undefined" && window.Vue) {
install(window.Vue);
}
export default {
install,
...components,
};
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
4、修改配置项
webpack.config.js
module.exports = {
// 根据不同的执行环境配置不同的入口
entry: process.env.NODE_ENV == "development" ? "./src/main.js" : "./src/plugin/index.js", output: { path: path.resolve(__dirname, "./dist"), publicPath: "/dist/", filename: "moment-ui.js", library: 'moment-ui', // 指定的就是你使用require时的模块名 // CMD只能在 Node 环境执行，AMD 只能在浏览器端执行，UMD 同时支持两种执行环境 libraryTarget: 'umd', // 指定输出格式 umdNamedDefine: true // 会对 UMD 的构建过程中的 AMD 模块进行命名。否则就使用匿名的 define
}, // 此处省略其他默认配置
}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
5、修改package.json
// 设置为公开包
"private": false,
// 检索路径
"main": "dist/moment-ui.js",
- 1
- 2
- 3
- 4
- 5
6、发布到npm
如果没有账号注册 https://www.npmjs.com/
# 登录
npm login
# 发布
npm publish
- 1
- 2
- 3
- 4
- 5
主页：https://www.npmjs.com/package/moment-ui
二、使用示例
1、CDN方式使用
<html lang="en">
<head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/moment-ui@1.0.2/dist/moment-ui.js"></script>
</head> <body> <div id="app"> <mo-button></mo-button> </div> <script> new Vue({ el: "#app", }); </script>
</body>
</html>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
2、Vue项目中使用
# 创建测试项目
vue init webpack-simple vue-demo-test
cd vue-demo-test
cnpm -i
# 下载测试, 淘宝等镜像可能没有及时同步，使用npm地址
npm install moment-ui --save
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
src/main.js
// src/main.js
import Vue from 'vue'
import MomentUI from 'moment-ui'
import App from './App.vue'
// 注册
Vue.use(MomentUI)
new Vue({
el: '#app',
render: h => h(App)
})
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
src/App.vue
<template>
<div id="app"> <mo-button />
</div>
</template>
<script>
export default {
name: "app",
};
</script>
<style>
</style>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
文章来源: pengshiyu.blog.csdn.net，作者：彭世瑜，版权归原作者所有，如需转载，请联系作者。
原文链接：pengshiyu.blog.csdn.net/article/details/109677479
【版权声明】本文为华为云社区用户转载文章，如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱：
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
评论（0）