摘要:网上看了一些文章,一般都是把封装好的格式的文件发布到,感觉不太像一般组件的封装形式,故特意书写此文,希望能帮助到各位码友。本文以封装一个分页组件为例,把它生成目标文件,生成压缩包测试,并发布到。修改输出文件到下,生成文件名为。
网上看了一些文章,一般都是把封装好的.vue格式的文件发布到npm,感觉不太像一般组件的封装形式,故特意书写此文,希望能帮助到各位码友。
本文以封装一个分页组件为例,把它build生成目标js文件,pack生成压缩包测试,并发布到npm。
项目初始化
封装vue的插件用webpack-simple很合适,vue init webpack-simple vue-gitment 此命令创建我们的项目的目录,创建文件夹和文件,最后结构是这样的
lib目录是我们的插件目录,其他的默认就好。
组件内容
Pagination.vue 的内容如下:
index.js 用来安装组件,内容如下:
import Pagination from "./Pagination.vue" const pagination={ install:function (Vue) { Vue.component("vPagination",Pagination) } }; // 这里的判断很重要 if (typeof window !== "undefined" && window.Vue) { window.Vue.use(pagination) } export default pagination
配置文件
package.json 内容如下:
{ "name": "pagination", "description": "A Vue.js project", "version": "1.0.0", "author": "author", "license": "MIT", "private": false, "scripts": { "dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot", "build": "cross-env NODE_ENV=production webpack --progress --hide-modules" }, "directories": { "dist": "dist" }, "dependencies": { "vue": "^2.4.4" }, "browserslist": [ "> 1%", "last 2 versions", "not ie <= 8" ], "devDependencies": { "babel-core": "^6.26.0", "babel-loader": "^7.1.2", "babel-preset-env": "^1.6.0", "babel-preset-stage-3": "^6.24.1", "cross-env": "^5.0.5", "css-loader": "^0.28.7", "file-loader": "^1.1.4", "vue-loader": "^13.0.5", "vue-template-compiler": "^2.4.4", "webpack": "^3.6.0", "webpack-dev-server": "^2.9.1" } }
webpack.config.js 内容如下:
module.exports = { entry: "./src/lib/index.js", output: { path: path.resolve(__dirname, "./dist/js"), publicPath: "/dist/", filename: "pagination.js", library: "pagination", libraryTarget: "umd", umdNamedDefine: true } // 其余默认就好 };
entry:修改打包的入口文件。
output:修改输出文件到 dist/js下,生成文件名为pagination.js。
library:指定的就是你使用require时的模块名,这里便是require("pagination")。
libraryTarget:会生成不同umd的代码,可以只是commonjs标准的,也可以是指amd标准的,也可以只是通过script标签引入的。
umdNamedDefine:会对 UMD 的构建过程中的 AMD 模块进行命名。否则就使用匿名的 define。
build
控制台输入 npm run build,会生成下列文件:
pack打包生成压缩包
修改package.json 内容如下:
{ "name": "pagination", "description": "A vue.js 2.0 project on asynchronous paging ", "version": "0.1.0", "author": "y", "license": "MIT", "private": false, "main": "dist/js/pagination.js", "directories": { "dist": "dist" }, "files": [ "dist", "src" ], "scripts": { "dev": "node build/dev-server.js", "start": "node build/dev-server.js", "build": "node build/build.js" }, "repository": { "type": "git", "url": "git+https://github.com/yanzilingyan/vue.git" }, "keywords": [ "vue", "pagination", "ajax pagination" ], "dependencies": { "vue": "^2.4.4" }, "browserslist": [ "> 1%", "last 2 versions", "not ie <= 8" ], "devDependencies": { "babel-core": "^6.26.0", "babel-loader": "^7.1.2", "babel-preset-env": "^1.6.0", "babel-preset-stage-3": "^6.24.1", "cross-env": "^5.0.5", "css-loader": "^0.28.7", "file-loader": "^1.1.4", "vue-loader": "^13.0.5", "vue-template-compiler": "^2.4.4", "webpack": "^3.6.0", "webpack-dev-server": "^2.9.1" } }
控制台输入 npm pack,会看到在当前工程目录下生成了一个文件 pagination-0.1.0.tgz
项目测试引入
另外新建一个工程项目,vue init webpack vue-ptest 此命令创建我们的项目的目录,创建文件夹和文件,类似如下结构:
把刚才打包好的 pagination-0.1.0.tgz 这个压缩包放到E盘目录下(当然哪个位置都行,这里个人只是觉得方便些)。在当前 vue-ptest 这个工程目录下,打开控制台,输入 npm install --save-dev E:pagination-0.1.0.tgz , 安装刚才打包好的文件包。
修改main.js文件,引入此包,内容如下:
import Vue from "vue" import App from "./App" import router from "./router" import vPagination from "pagination" Vue.config.productionTip = false; Vue.use(vPagination); new Vue({ el: "#app", router, template: "", components: { App } });
修改HelloWorld.vue文件,引入分页组件,内容如下:
{{ msg }}
Essential Links
打开控制台,输入 npm run dev ,启动。
看到界面如下显示:
OK,分页组件显示正常。
发布到npm
完成测试工作后我们就可以发布到npm了,这个就比较见到了,注册个npm账号,在你要发布的项目目录执行npm login,输入账号密码和邮箱,然后npm publish就发布成功了。
代码更多的详细信息请查看 此文提供的项目源码。
以上就是本文的全部内容,希望能对大家有所帮助。如果有更好的建议或优化,欢迎大家多多评论~~ ^_^ ~
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/51549.html
摘要:网上看了一些文章,一般都是把封装好的格式的文件发布到,感觉不太像一般组件的封装形式,故特意书写此文,希望能帮助到各位码友。本文以封装一个分页组件为例,把它生成目标文件,生成压缩包测试,并发布到。修改输出文件到下,生成文件名为。 网上看了一些文章,一般都是把封装好的.vue格式的文件发布到npm,感觉不太像一般组件的封装形式,故特意书写此文,希望能帮助到各位码友。 本文以封装一个分页...
摘要:网上看了一些文章,一般都是把封装好的格式的文件发布到,感觉不太像一般组件的封装形式,故特意书写此文,希望能帮助到各位码友。本文以封装一个分页组件为例,把它生成目标文件,生成压缩包测试,并发布到。修改输出文件到下,生成文件名为。 网上看了一些文章,一般都是把封装好的.vue格式的文件发布到npm,感觉不太像一般组件的封装形式,故特意书写此文,希望能帮助到各位码友。 本文以封装一个分页...
摘要:起初,项目使用的是,其提供的方法用着比较爽,由于项目的很多数据来自豆瓣的,直接上简单方便,跨域什么的不考虑。跨域问题,上面已经介绍,在不能操控的豆瓣数据上,使用的是。 项目地址 在线演示 不识庐山真面目,只缘身在此山中。 大概一个月前,开源了Vue重构豆瓣移动端的项目,效果还可以,收到了很多小伙伴的反馈,话说是要写一些文章的,但迟迟没有动笔,估计小伙伴们等的花都谢了,拖延症是病,需要治...
摘要:我发布了我的第一个组件,一个基于的标签云组件。然后将这个编译命令写到里,如下那么以后要编译下面的代码,只需要执行现在我们已经有编译好的代码了,接下来就可以发布到供其他人使用了。 我发布了我的第一个 npm 组件,一个基于 react 的 3d 标签云组件。在这途中我也是遇到了很多的坑,花在完善整个发布流程的时间远多于写这个组件本身的时间,所以我记录下我觉得一个正常的 react 组件的...
阅读 3395·2021-11-19 09:40
阅读 1276·2021-10-11 11:07
阅读 4788·2021-09-22 15:07
阅读 2862·2021-09-02 15:15
阅读 1939·2019-08-30 15:55
阅读 500·2019-08-30 15:43
阅读 849·2019-08-30 11:13
阅读 1419·2019-08-29 15:36