vuejs2.0 封装通用组件，build生成js，并发布到npm

fevin 发布于2019-08-30 15:46 / 2151人阅读

摘要：网上看了一些文章，一般都是把封装好的格式的文件发布到，感觉不太像一般组件的封装形式，故特意书写此文，希望能帮助到各位码友。本文以封装一个分页组件为例，把它生成目标文件，生成压缩包测试，并发布到。修改输出文件到下，生成文件名为。

网上看了一些文章，一般都是把封装好的.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文件，引入分页组件，内容如下：

打开控制台，输入 npm run dev ，启动。
看到界面如下显示：

OK，分页组件显示正常。

发布到npm
完成测试工作后我们就可以发布到npm了，这个就比较见到了，注册个npm账号，在你要发布的项目目录执行npm login，输入账号密码和邮箱，然后npm publish就发布成功了。
代码更多的详细信息请查看此文提供的项目源码。

以上就是本文的全部内容，希望能对大家有所帮助。如果有更好的建议或优化，欢迎大家多多评论~~ ^_^ ~

idc机房托管私有云发布js css 代码到oss 如何封装html组件 java生成树并打印通用前端组件

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/116388.html

vuejs2.0 封装通用组件，build生成js，并发布到npm

摘要：网上看了一些文章，一般都是把封装好的格式的文件发布到，感觉不太像一般组件的封装形式，故特意书写此文，希望能帮助到各位码友。本文以封装一个分页组件为例，把它生成目标文件，生成压缩包测试，并发布到。修改输出文件到下，生成文件名为。网上看了一些文章，一般都是把封装好的.vue格式的文件发布到npm，感觉不太像一般组件的封装形式，故特意书写此文，希望能帮助到各位码友。本文以封装一个分页...

ZHAO_ 2019-08-21 17:43 评论0 收藏0
vuejs2.0 封装通用组件，build生成js，并发布到npm

摘要：网上看了一些文章，一般都是把封装好的格式的文件发布到，感觉不太像一般组件的封装形式，故特意书写此文，希望能帮助到各位码友。本文以封装一个分页组件为例，把它生成目标文件，生成压缩包测试，并发布到。修改输出文件到下，生成文件名为。网上看了一些文章，一般都是把封装好的.vue格式的文件发布到npm，感觉不太像一般组件的封装形式，故特意书写此文，希望能帮助到各位码友。本文以封装一个分页...

olle 2019-08-01 18:03 评论0 收藏0
vuejs2.0 封装通用组件，build生成js，并发布到npm

摘要：网上看了一些文章，一般都是把封装好的格式的文件发布到，感觉不太像一般组件的封装形式，故特意书写此文，希望能帮助到各位码友。本文以封装一个分页组件为例，把它生成目标文件，生成压缩包测试，并发布到。修改输出文件到下，生成文件名为。网上看了一些文章，一般都是把封装好的.vue格式的文件发布到npm，感觉不太像一般组件的封装形式，故特意书写此文，希望能帮助到各位码友。本文以封装一个分页...

cooxer 2019-08-05 12:25 评论0 收藏0
杂篇 - Vue豆瓣系列文章

摘要：起初，项目使用的是，其提供的方法用着比较爽，由于项目的很多数据来自豆瓣的，直接上简单方便，跨域什么的不考虑。跨域问题，上面已经介绍，在不能操控的豆瓣数据上，使用的是。项目地址在线演示不识庐山真面目，只缘身在此山中。大概一个月前，开源了Vue重构豆瓣移动端的项目，效果还可以，收到了很多小伙伴的反馈，话说是要写一些文章的，但迟迟没有动笔，估计小伙伴们等的花都谢了，拖延症是病，需要治...

lijinke666 2019-08-20 16:53 评论0 收藏0
发布 react 组件到 npm 上

摘要：我发布了我的第一个组件，一个基于的标签云组件。然后将这个编译命令写到里，如下那么以后要编译下面的代码，只需要执行现在我们已经有编译好的代码了，接下来就可以发布到供其他人使用了。我发布了我的第一个 npm 组件，一个基于 react 的 3d 标签云组件。在这途中我也是遇到了很多的坑，花在完善整个发布流程的时间远多于写这个组件本身的时间，所以我记录下我觉得一个正常的 react 组件的...

Yi_Zhi_Yu 2019-08-23 15:05 评论0 收藏0