wordpress_子网站重命名,wordpress删除仪表盘,免费的推广渠道有哪些,网络空间安全论文记录一下个人最近一次发布npm组件的过程#xff1a;
一、创建组件和工具函数
执行命令创建一个空项目#xff1a; npm create vite 创建过程稍微有些慢#xff0c;不知何故#xff1f;其中选择vue , 个人暂时使用的JS 。在 src 目录下面创建一个文件 package 存放组件和公…记录一下个人最近一次发布npm组件的过程
一、创建组件和工具函数
执行命令创建一个空项目 npm create vite 创建过程稍微有些慢不知何故其中选择vue , 个人暂时使用的JS 。在 src 目录下面创建一个文件 package 存放组件和公共的JS方法 案例中 table 是放组件的 utils 是放方法的。 table组件 里面的主要内容就是个人业务组件随便写点
templateinput typetext v-modelMyValuediv结果{{ MyValue }}/divbutton clickhandelEvent 测试按钮 /button
/templatescript setup
import { ref } from vue;
const MyValue ref();
const emit defineEmits([testBtn]);
const handelEvent () {emit(testBtn, MyValue.value);
};
/scriptscript
export default {name: eosBtn,
};
/script这里遇到一个疑问组件名称的暴露必须通过下面的方式。
export default {name: eosBtn,
}; 我最开始用的组合式api 直接暴露的竟然无法使用如有知道原因的还请赐教一下。
script setup nameeosBtn /script函数方法utils文件 也随便写一个
// indes.js
import { handleFirstUpperCase } from ./utils.js;
export default { handleFirstUpperCase };// utils.js
/*
* 首字母转大写
*/
export function handleFirstUpperCase(str) {return str.replace(/( |^)[a-z]/g, (L) L.toUpperCase());
}
开始暴露出去组件和方法在package 下的index.js 写
import eosBtn from ./table/index.vue
import EUtils from ./utils/index.jsconst components [eosBtn]
const install function (Vue) {components.map(el {Vue.component(el.name, el) // 注册组件})
}
export default { install, EUtils }本地自测还是在当前的项目下在main.js 里面引入和注册组件以及方法
import { createApp } from vue
import ./style.css
import App from ./App.vue
import testUi from ./package/index.js
const app createApp(App)app.config.globalProperties.EUtils testUi.EUtils; //公共方法
console.log(testUi);
app.use(testUi.install)
app.mount(#app)
在app.vue 中使用组件进行测试
templateeosBtn testBtntestBtn /
/templatescript setup
import { getCurrentInstance, ref, defineComponent } from vue;
const { proxy } getCurrentInstance();
const testBtn (val) {console.log(proxy.EUtils.handleFirstUpperCase(val));
};
/script二、发布组件
设置包的名称版本导出路径等相关信息 在package.json
{name: eos-tms-base,private: false,version: 0.0.5,type: module,files: [dist/*,eos-tms-base.d.js],main: dist/eos-tms-base.umd.js,module: dist/eos-tms-base.es.js,scripts: {dev: vite,build: vite build,preview: vite preview},dependencies: {vue: ^3.3.11},devDependencies: {vitejs/plugin-vue: ^4.5.2,vite: ^5.0.8}
}
设置vite.config.js
import { defineConfig } from vite
import vue from vitejs/plugin-vue// https://vitejs.dev/config/ https://juejin.cn/post/7257144279050403896
export default defineConfig({plugins: [vue()],build: {rollupOptions: {// 请确保外部化那些你的库中不需要的依赖external: [vue],output: {// 在 UMD 构建模式下为这些外部化的依赖提供一个全局变量globals: {vue: Vue,},},},lib: {entry: src/package/index.js,name: eos-tms-base,fileName: (format) eos-tms-base.${format}.js,},},
})
执行打包命令打包发布npm run build 打包后的文件 接着就是登录npm, 执行命令 npm login , 没有账户的自行注册上传失败的检查npm 代理路径是否为官方的如果是淘宝镜像需要自行切换到官方才可使用包名是否已经在插件市场存在。 设置 npm 的 registry 为官方源 npm config set registry https://registry.npmjs.org 到npm 官网查看是否发布成功。 最后就是创建一个空项目自己下载插件进行引入自测。 npm i eos-tms-base
