Vuejs2.0封装常用组件，构建生成js，发布到npm

看了网上的一些文章，一般都是把打包好的.vue格式文件发布到npm上。感觉不像是一般组件的封装形式。因此，特地写了这篇文章，希望对各位码友有所帮助。本文以封装一个分页组件为例，构建生成目标js文件，打包生成压缩包test，发布到npm。非常适合使用webpack-simple来进行项目初始化和打包vue插件。vueinitwebpack-simplevue-gitment这个命令创建我们项目的目录，创建文件夹和文件，最后的结构是这样的，lib目录是我们的插件目录，其他的默认即可。组件内容Pagination.vue内容如下：index.js用于安装组件，内容如下：importPaginationfrom'./Pagination.vue'constpagination={install:function(Vue){Vue.component('vPagination',Pagination)}};//这里的判断很重要if(typeofwindow!=='undefined'&&window.Vue){window.Vue.use(pagination)}导出默认分页配置文件package.json内容如下：{“名称”：“分页”，“描述”："AVue.jsproject","version":"1.0.0","author":"author","license":"MIT","private":false,"scripts":{"dev":"跨环境NODE_ENV=developmentwebpack-dev-server--open--hot","build":"cross-envNODE_ENV=productionwebpack--progress--hide-modules"},"directories":{"dist":"dist"},"dependencies":{"vue":"^2.4.4"},"browserslist":[">1%","last2versions","notie<=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/',文件名:'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模块。否则使用匿名定义。在构建控制台输入npmrunbuild，会生成如下文件：pack生成压缩包，修改package.json内容如下：js2.0项目异步分页","version":"0.1.0","author":"y","license":"MIT","private":false,"main":"dist/js/pagination.js","directories":{"dist":"dist"},"files":["dist","src"],"scripts":{"dev":"nodebuild/dev-server.js","start":"nodebuild/dev-server.js","build":"nodebuild/build.js"},"repository":{"type":"git","url":"git+https://github.com/yanzilingyan/vue.git"},"keywords":["vue","pagination","ajaxpagination"],"dependencies":{"vue":"^2.4.4"},"browserslist":[">1%","last2versions","notie<=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"}}在控制台输入npmpack，会看到在当前项目目录下生成了一个文件pagination-0.1.0.tgz，项目test导入另一个新建项目，vueinitwebpackvue-ptest这个命令创建我们项目的目录，创建文件夹和文件，类似如下结构：把刚刚打包好的压缩包pagination-0.1.0.tgz放到E盘目录下（的coursewhich位置很好，我只是觉得放这里比较方便）在当前vue-ptest项目目录下，打开控制台，输入npminstall--save-devE:pagination-0.1.0.tgz，安装刚才的打包文件。修改main.js文件，导入这个包，内容如下：importVuefrom'vue'importAppfrom'./App'importrouterfrom'./router'importvPaginationfrom'pagination'Vue.config.productionTip=false;Vue.use(vPagination);newVue({el:'#app',router,template:'',components:{App}});修改HelloWorld.vue文件，引入分页组件，内容如下：h1,h2{字体粗细：也不是mal;}ul{列表样式类型：无；填充：0；}li{显示：内联块；margin:010px;}a{color:#42b983;}打开控制台，输入npmrundev，开始看到界面如下：OK，分页组件正常显示。发布到npm完成测试工作后，我们就可以发布到npm了。这个比较容易看。注册一个npm账号，在你要发布的项目目录下执行npmlogin，输入账号密码和邮箱，npmpublish就发布成功了。.有关代码的更多详细信息，请参阅本文提供的项目源代码。以上就是本文的全部内容，希望能够对大家有所帮助。如果大家有更好的建议或者优化，欢迎评论~~^_^~