雅荷心语博客以前做过几次组件, 但是今天想到要再发布一个小组件的时候,居然一下子想不起来了,简单做个记录吧
首先 本地需要安装 vue, 若是第一次使用, 应该还需要安装
npm install -g @vue/cli-service-global
首先, 初始化一个目录, npm init
一路按 确定 即可
init 完成之后,
我们本地新建一个.vue 文件, 然后使用 vue serve index.vue 启动文件
在文件里正常编写我们的代码即可, 例如我写了一个提示用户进行微信分享的小组件
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 |
<style scoped> ..... </style> <template> <div class="friday"> <div class="guide-board"> <div class="flex-board guide-info"> <div class="left-board"> <div class="user-info"> <div class="row"> <div class="user-audio"> <div class="avater" style="background-image: url(http://rescdn.yishihui.com/longvideo/pic/c8676c592b72428e88faa4176d7baa011650023705723);"> <img src="data:image/png;CYII=" class="play-btn"> </div> </div> <span>点击右上角</span> <img class="dia" src="data:image/png;base64,iVBORw0KGgoAARrHQQi2stLuDK1IoNmeV7gjXhMQE4fAEG0Esh <div class="row"> <span>分享给「朋友」或「朋友圈」</span> </div> </div> </div> <div class="right-board"> <img class="icon-hand" src="data:image/pn" alt=""> </div> </div> <img src="https://vlogh5.piaoquantv.com/core/static/img/wx_native_share_bar.3bbdeb4.png" alt="" class="guide-img" /> </div> </div> </template> <script> /** * Created by iyahe@qq.com * Date: 2022/7/4 * Time: 2:09 下午 * Description: */ export default { name: "friday", mixins: [], data() { return {} }, computed: {}, watch: {}, components: {}, methods: {}, created() { }, mounted() { }, } </script> |
组件开发完成后, 我们第一步需要新建一个js文件
|
1 2 3 4 5 |
import tips from "./index.vue"; const install=(Vue)=>{ Vue.component(tips.name, tips) } export default install |
这里需要注意: tips.name 这里就是注册组件名称, 若是组件里没有写 name, 这里需要手动写一个名称,
完成后我们开始打包组件,
我们在 package.json 里写入打包命令
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
{ "name": "friday-tips", "version": "1.0.0", "description": "", "main": "friday/friday.umd.js", "dependencies": {}, "devDependencies": {}, "scripts": { "build": "vue build --target lib ./index.js --dest friday --name friday" }, "author": "", "license": "ISC" } |
其中的 friday 是目录名称, 我们打包到这个目录, 执行编译后, 我们可以看到
什么是 umd ?
commonJS、requireJS 都是用来处理JS模块化的，其中 commonJS 用来给 nodejs 使用（使用了 module.exports 的用法）。后来使用 import/export 来导出/引入模块。umd 是统一模块定义方法，可以兼容所有其他的模块定义方法。
将 生成的 xx.umd.js 写入到 package.json 的 main 入口;
打包完成后, 我们开始上传到 npm
这里需要注意, 若是使用过 npm, yarn 等, 建议安装一个 nrm ,手动切换到 npm 服务器
SM xxx-mobile % nrm ls
npm ———- https://registry.npmjs.org/
yarn ——— https://registry.yarnpkg.com/
tencent —— https://mirrors.cloud.tencent.com/npm/
cnpm ——— https://r.cnpmjs.org/
taobao ——- https://registry.npmmirror.com/
npmMirror —- https://skimdb.npmjs.com/registry/
jd ———– http://registry.m.jd.com/
SM xx-mobile %
切换过去后, 直接登陆就可以了, npm login
登陆成功后, 执行 npm publish 开始发布
若不出意外, 发布成功后可以在 npm 官网个人中心看到了!
偶尔遇到报错提示发布失败, 实际发布成功!
发布成功后, 我们随便找一个项目, 安装我们的组件库看看
直接 npm install xxx
安装完成后, 我们先全局注册一个看看效果!
|
1 2 3 |
import friday from 'friday-tips' import 'friday-tips/friday/friday.css' // 引入样式文件 Vue.use(friday) |
注意要把 css 引入进来, 然后我们组件里直接使用 <friday /> 就可以了!
若要在实际项目里调试, 还有一个小技巧!
我们直接在组件目录打包完成后, 将
直接拷贝到我们已安装过 组件的项目的 node_modules 目录里可以直接看到效果,
我们可以打开 node_modules 目录, 找到我们的插件目录 friday-tips , 然后直接拷贝覆盖就可以了!
2024 年 2 月 22 日更新:
直接抛出组件
|
1 2 |
import tips from "./index.vue"; export const friday = tips; |
直接引入到文件内使用
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.7.1/vue.min.js"></script> <script type="text/javascript" src="./friday/friday.umd.js"></script> <link rel="stylesheet" href="./friday/friday.css"> </head> <body> <div id="app"> <div class="p"> <p>你好啊</p> <div class="last"> <div id="end"></div> </div> </div> </div> <script type="text/javascript"> setTimeout(_=> { const app = new Vue({ el: '#end', components: { 'myComponent': window.friday.friday }, template: '<myComponent></myComponent>' }); }, 1000) </script> </body> </html> |
