1.使用Vue-cli搭建项目
npm install -g @vue/cli
vue create vue-demo
cd vue-demo
npm run serve
2.创建存放组件的文件夹
比如在src目录下创建了my-unicorn-ui文件夹，也有人习惯将这个文件夹放在src同级目录
3.在my-unicorn-ui目录下创建packpages文件夹，用来存放组件文件
比如封装了一个Button组件
注意： 自己封装的组件里面一定要有name属性，作为在其他项目中install这个组件库后，在页面中使用的具体组件名，类似elementUI库中的<el-button>、<el-form>
Button/Button.vue
<template>
<div>
<el-button>{{ msg }}</el-button>
<!-- <div>{{ msg }}</div> -->
</div>
</template>
<script>
export default {
name: "UnButton", // 注意： 自己封装的组件里面一定要有name属性，为后期install node包后 在页面使用的组件名
props: {
msg: String,
},
};
</script>
<style scoped>
</style>
Button/index.js
需要将组件导出并提供install方法
import UnButton from './button.vue'
UnButton.install = function (Vue) {
Vue.component(UnButton.name, UnButton)
}
export default UnButton
4.在packages文件夹创建index.js，用于统一导出所有组件
packages/index.js
/**
* 统一导出组件
*/
import Button from './Button'
// import Input from './Input'
// 组件集合用于遍历
const components = [Button]
// 定义install方法
const install = function (Vue) {
if (install.installed) return
// 遍历注册全局组件
components.map(component => Vue.component(component.name, component))
}
// 判断是否存在全局的Vue对象，是的话代表是CDN方式使用，那么自动进行注册
if (typeof window !== "undefined" && window.Vue) {
install(window.Vue)
}
export default {
version: '1.0.0',
install,
Button
}
以上代码就是将封装好的组件注册为全局组件，用到了Vue.component()方法，当使用Vue.use()时，install方法便会执行
5.在项目的package.json文件中，配置打包命令
"package": "vue-cli-service build --target lib ./src/my-unicorn-ui/packages/index.js --name my-unicorn-ui --dest ./src/my-unicorn-ui/lib"
打包命令解释：
--target lib 关键字 指定打包的目录
--name 打包后的文件名字
--dest 打包后的文件夹的名称
6.执行打包命令
去到my-unicorn-ui目录下，执行打包命令
npm run package
打包执行完成后项目my-unicorn-ui目录下就会多出一个lib文件夹，存放的是打包后的文件
7.执行以下命令，在my-unicorn-ui文件夹下初始化一个package.json文件， 注意和项目的package.json不是同一个文件！
cd my-unicorn-ui
npm init -y
my-unicorn-ui/package.json
{
"name": "my-unicorn-ui",
"version": "1.0.0",
"description": "npm install my-unicorn-ui --save",
"main": "lib/my-unicorn-ui.common.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC"
}
8.新增 README.md文档，方便其他用户使用
# my-unicorn-ui
## 安装
npm install my-unicorn-ui --save
## 引入
import myUnicornUi from '@test/my-unicorn-ui'
<!-- import '@test/my-unicorn-ui/my-unicorn-ui.css' -->
## 全局注册
Vue.use(myUnicornUi)
## 页面使用
<UnButton msg="999"/>
9.发布到npm仓库
9.1注册账号
想要发布到npm仓库，先要有一个账号，去npm官网注册一个账号，注意记住用户名、密码和邮箱，发布的时候会用到。
9.2设置npm镜像源
有些可能本地的npm镜像源采用的是淘宝镜像源或者其它的，如果想要发布npm包，先把npm源切换为官方得源，命令如下
npm config set registry=https://registry.npmjs.org
9.3添加npm用户
进入my-unicorn-ui目录，添加npm用户，执行命令
npm adduser
填写用户名、密码、邮箱，然后会收到一封邮件，邮件里面有个类似于验证码的东西，如果之前设置过即可跳过此步。
9.4发布npm
在my-unicorn-ui目录下执行命令
npm publish
10.从npm安装使用
npm install my-unicorn-ui --save
main.js中引用注册
import MyUnicornUI from 'my-unicorn-ui'
Vue.use(MyUnicornUI)
页面使用
在项目的某页面中使用即可，注意使用的标签名是上面开发的组件的name，以下两种写法均可
<UnButton msg="888"/>
<un-button msg="888"/>
11.组件未发布npm可在本地引入测试
<template>
<div id="app">
<UnButton msg="88888" />
</div>
</template>
<script>
import UnButton from "./my-unicorn-ui/packages/Button/index";
export default {
name: "App",
components: {
UnButton,
},
};
</script>
<style>
</style>
