前言
最近几个人合作完成了一个项目，发现有一些公用的基础业务组件，可以提取出来，不仅方便大家在各自模块直接引用，也可以在以后的项目中使用。想到了可不可以自己动手把组件打包发布到内部的npm上，避免以后小伙伴们的重复工作呢？于是乎，说干就干，在这里操练一下，写个todo-list的vue组件案例。案例源码：https://github.com/wuwhs/todoList
建立npm项目
1. 初始化npm项目
建一个文件夹（todoList），在这个文件夹路径下打开cmd窗口，输入指令npm init，前提是已经装好了node（自带npm）。
$ npm initThis utility will walk you through creating a package.json file.It only covers the most common items, and tries to guess sensible defaults.See `npm help json` for definitive documentation on these fieldsand exactly what they do.Use `npm install <pkg>` afterwards to install a package andsave it as a dependency in the package.json file.Press ^C at any time to quit.package name: (todolist)提示输入项目包名称，这里的名称将作为发布到npm上这个包的名称，以后别人使用就可以直接import或require到项目中使用。
package name: (todolist) todolistversion: (1.0.0)接下来提示输入版本，这里的版本将作为发布到npm上这个包版本控制号，每次发布必须要改一下版本号，才允许发布，在这里作为第一个版本可以直接回车，默认是1.0.0。
version: (1.0.0)description:然后提示输入描述信息，描述一下这个包的功能作用。于是输入：
description: a vue component of todolistentry point:(webpack.config.js)再者，提示整个项目的入口文件，这里是我们打包后的文件，打包后文件都放到dist目录下，先设定生成的文件是todoList.min.js，于是：
entry point:(webpack.config.js) ./dist/todoList.min.jstest command:git repository:接下来提示输入测试命令、git仓库，先不管，后面再详细写，回车默认空。
再提示输入关键字，便于其他人在npm上搜索得到你写的包，最后就是作者和认证，根据自己实际情况填。
keywords: todolist vueauthor: wuwhslicense: (ISC)About to write to D:\WampServer\wamp\ponents: { TodoList }}</script>再次运行npm run dev，刷新浏览器，一切正常，good。
总结
至此，打包、发布和使用自己写的vue组件就完成了。总结一下这几条需要关注：
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
最新文章
热门文章
猜你喜欢
