须知
本文部分内容参考以下链接：
步骤
1、安装 Vue-CLI
npm install -g @vue/cli# ORyarn global add @vue/cli复制代码
参考：
2、用 Vue-CLI 创建项目
定位到上级目录，创建 Vue-CLI 项目。新建或者覆盖都可以
vue create vue-cli复制代码
3、调整项目配置
Vue-CLI 在创建好项目后会自动进行安装，安装完毕的项目目录如下图
① 设定打包范围
设定输出目录为 components 文件夹
设定打包 npm 包，输出的主题内容在 src/components 目录下
编写需要输出的主文件
在 components 文件夹下创建 component.vue 文件，在 components 文件夹下创建 parts 文件夹，parts 文件夹下创建子控件 part1.vue、part2.vue, 被 component.vue 引用。更新好内容的目录如下图：
components文件夹下的任何文件，都可以引用components外的任何文件，对打包不会造成影响。
创建输出目录文件
先在 src/components 目录下创建 index.js 文件
import component from './component.vue';component.install = Vue => Vue.component(component.name, component);export default component;复制代码
以上是输出单组件的写法，输出多组件的写法参考下列代码
② 配置 package.json 文件
?name
name 表示打包出来的项目的名字，将来这个库被别的项目引用，名字决定了它在 node_modules 下文件夹的名字。
如果你希望打包出一个 npm 包库群下的一个组件，假设这个 npm 包库群的名字叫 @demo, 这个包本身的名字叫 tester, name 栏这么写:
@demo/tester复制代码
其他项目引用后，node_modules 里就会长这样：
当然前缀什么都没有的话:
"name": "tester"复制代码
其他项目引用后， node_modules 里就是光一个 tester 文件夹。
?version
版本号，从 0.1.0 开始, 每次 publish 前升级下版本号。
description
项目描述
keyword
一个字符串数组，方便别人搜索到本模块
licence
证书 说明对应的开源协议
如何选择证书，引用自 阮一峰 的repository
代码管理的地址
? main
项目入口文件地址
"main": "./dist/component.common.js"复制代码
component 这个名字和后面配置的 scripts 里面的命名有关
? files
普通项目引用这个库，实际需要的文件，是在我们打包输出的 dist 文件夹里的，但是这种输出文件放到 git 管理里又不智能，可以在 package.json 里添加这个 files,
"files": [ "dist"],复制代码
可以达到既不在 git 代码管理里存储 dist 文件夹，普通项目又能引入所需文件的目的。
? scripts
在 scripts 中添加打包指令：
"build-bundle": "vue-cli-service build --target lib --name component ./src/components/index.js"复制代码
这样每次打包只需要执行
yarn build-bundle复制代码
即可 (记得升级版本号)
private
"private": false,复制代码
如果是公司内部的 npm 包，就不需要改了
依赖
项目中会有 dependencies、devDependencies、peerDependencies
③ 配置 vue.config.js 文件
添加 css 内联配置
module.exports = { ... css: { extract: false } ...}复制代码 这样打包出来的文件会直接被内联到脚本文件里，不需要落地项目再引用一遍 css，来让样式配置生效
4、打包
在项目目录里执行
yarn build-bundle复制代码
进行打包
如果你要打包到外面的 npm 库 发布：npm publish --access public
实际发布的时候，我用的 name 是
@pimkle/tester
npm 未登录注册等报错信息，在键入 npm publish 后，terminal 都会告诉你的，按照 terminal 的提示一步步进行操作即可。
DEMO
上文提到了各个注意点，具体参考 demo 如下：
该 demo 项目未在实际项目引用测试过，有任何问题请留言或者发邮件和我联系 yeonkitt@gmail.com