项目网站制作,wordpress 菜单修改,网站建设计划书 模板下载,wordpress 联盟广告封装发布组件是前端开发中非常重要的能力#xff0c;通过对常用组件的封装可以提升团队开发的效率#xff0c;避免重复劳作且不方便维护。好的组件的抽象和封装能让组件得到更广泛和多环境兼容的应用。本文讲述了如何一步步从0到1封装发布一个常用的toast组件的过程。本文是搭…封装发布组件是前端开发中非常重要的能力通过对常用组件的封装可以提升团队开发的效率避免重复劳作且不方便维护。好的组件的抽象和封装能让组件得到更广泛和多环境兼容的应用。本文讲述了如何一步步从0到1封装发布一个常用的toast组件的过程。本文是搭配实例书写的所以理论上根据本文你可以自己成功打包发布一个自己的vue 组件。在文末有对应的项目地址可供参考。组件创建创建一个空文件mkdir ToastComponentcd ToastComponent/初始化一个package.jsonnpm init -y代码如下{name: ToastComponent,version: 1.0.0,description: ,main: index.js,scripts: {test: echo \Error: no test specified\ exit 1},keywords: [],author: ,license: ISC}新建一个src目录,里面写两个文件index.js 和 toast.vue,目录如下├── package.json└── src/└── index.js└── toast.vuetoast.vue如下一个单纯的vue文件{{msg}}export default {name: Toast,data() {return {msg: };}};.toast {position: fixed;left: 50%;top: 50%;transform: translate(-50%, -50%);width: fit-content;height: 44px;background-color: rgba(0, 0, 0);display: flex;justify-content: center;align-items: center;padding-left: 10px;padding-right: 10px;color: #fff;border-radius: 5px;}index.js代码如下import Toast from ./components/Toast.vueToast.install (Vue) {Vue.prototype.$toast (msg, duration) { //添加一个实例方法 这样全局的实例都可以调用$toast方法了 msg、duration是调用$toast时传入的两个参数if (!msg) {return;}duration duration || 1500; //如果不传toast持续时间则默认使用此时间const constroct Vue.extend(Toast) //构造器const instance new constroct(); //创建实例instance.msg msg || ; //将$toast(msg,duration)中的msg传入组件的data中const tpl instance.$mount().$el //vue实例未挂载时可这样拿到它的dom 后续可对它的dom进行操作document.querySelector(body).appendChild(tpl);setTimeout(() {document.querySelector(body).removeChild(tpl)}, duration);}}export default Toast;组件打包对组件进行编译打包这里使用webpack,在跟目录下新建webpack.config.js,配置如下// webpack.config.jsconst path require(path)const { VueLoaderPlugin } require(vue-loader)module.exports {entry: {index: path.join(__dirname, /src/index.js) // 入口文件(就是刚才用于暴露组件的index.js)},output: {path: path.join(__dirname, /dist), // 打包后的文件存放在dist文件夹publicPath: /dist/, // 设置公共路径filename: toast.js, // 打包后输出文件的文件设置为btn.jslibraryTarget: commonjs2 // 这个选项会尝试把库暴露给前使用的模块定义系统这使其和CommonJS、AMD兼容或者暴露为全局变量},module: {rules: [{test: /\.vue$/,loader: vue-loader},// 它会应用到普通的 .css 文件// 以及 .vue 文件中的 {test: /\.css$/,use: [style-loader, css-loader]},// 它会应用到普通的 .js 文件// 以及 .vue 文件中的 {test: /\.js$/,exclude: /node_modules|vue\/dist|vue-router\/|vue-loader\/|vue-hot-reload-api\//,use: {loader: babel-loader,options: {presets: [babel/preset-env]}}}]},plugins: [new VueLoaderPlugin() //这个插件是webpack打包.vue文件必须使用的 它的作用是将你定义的其他规则复制并运用到.vue文件里相应的块 如果你有一条匹配 /\.js$/ 的规则那么它会应用到 .vue 文件里的 ]}对应的package.json 修改如下{name: toast-component,version: 1.0.0,description: ,main: dist/toast.js,scripts: {build: webpack --mode production},keywords: [],author: ,license: ISC,devDependencies: {babel/core: ^7.11.5,babel/preset-env: ^7.11.5,babel-loader: ^8.1.0,css-loader: ^4.2.2,style-loader: ^1.2.1,vue-loader: ^15.9.3,vue-template-compiler: ^2.6.12,webpack: ^4.44.1,webpack-cli: ^3.3.12}}项目目录如下安装对应的依赖npm i编译生成打包文件npm run build可见打包后的文件已生成测试验证组件是否正常npm pack可在目录中看到生成了一个.tgz的压缩包如何检测这个包呢我们可以新建一个vue项目去验证。在此为了方便使用vue-cli新建一个test-toast项目.将刚才生成的压缩包放在test-toast目录的跟路径下npm i toast-component-1.0.0.tgz全局引入注册这个组件//main.jsimport Vue from vueimport App from ./App.vueimport Toast from toast-componentVue.config.productionTip false//全局注册Vue.use(Toast)new Vue({render: h h(App),}).$mount(#app)在项目中使用//App.vue点我出toastexport default {name: App,components: {},methods: {showToast() {this.$toast(hello world, 2000);}}};运行点击按钮可以出现toast如下可以自定义duration、msg至此验证该组件通过就回到组件开发项目就可以发布了。发布在组件项目中命令行运行npm publish即可发布到npm。如需要登录可以运行npm login进行登录再操作。发布成功的效果就可以在npm平台看到该组件了总结本文介绍了如何封装常用的vue toast组件的过程讲述了本地如何测试验证打包的组件以及发布npm的流程。你可以根据这样的流程去发布其他的vue组件为团队和社区贡献更多自己的力量让不凡被看见。如果这篇文章对你有用欢迎点赞你的点赞和支持可以鼓励作者持续输出好的作品哟 让我们一起快速成长~版权声明著作权归作者所有。商业转载请联系作者获得授权非商业转载请注明出处。作者: jackjieli原文链接https://juejin.im/post/6867798692460494861
