制作并发布一个Vue组件npm包

创建npm账户（若是已经有账号此步可跳过）

1. 需要您在npm官网中创建一个账号并登录
   npm 账号注册

npm adduser

2. 根据提示依次填写自己的用户名、密码、邮箱

3. 成功之后，npm会把认证信息存储在~/.npmrc中，可查看npm当前使用的用户：

npm whoami

4. npm登录，可以命令方式登录或者官网登录
   4.1 命令方式，根据提示依次填写自己的用户名、密码、邮箱

npm login

4.2 官网链接登录
https://www.npmjs.com/

创建npm组件并发布到npm

1. 首先创建一个vue项目 vue create my-app
2. 进入my-app，执行npm run serve
3. 在src下创建一个package文件夹 ，以后需要上传到npm的都可以在这个下面写组件，如下图
   
   例如：
4. 创建一个pig-button的组件，创建pig-button文件夹同时在下面index.vue的组件，里面写你想写的内容即可：
   
5. 使用Vue插件模式 ， 这一步是封装组件中的重点，用到了Vue提供的一个公开方法: install。这个方法会在你使用 Vue.use(plugin)时被调用,这样使得我们的插件注册到了全局，在子组件的任何地方都可以使用。

在package文件夹创建一个index.js,代码如下

import PigButton from '../package/pig-button/index.vue';  //引入封装好的组件
const  coms = [PigButton]; //将来如果有其他逐渐，都可以写在这个数据里

//批量组件注册
const install =function(Vue){
    coms.forEach((com)=>{
        Vue.component(com.name,com);
    })
}

export default install; //这个方法以后在使用的时候可以被use调用 

5. 在my-app中package.json 的scripts下新增加 如下代码

    "package": "vue-cli-service build --target lib ./src/package/index.js --name pig-ui --dest pig-ui"
    //打包命令解释:
// ●--target lib关键字指定打包的目录
// ●--name 打包后的文件名字
// ●--dest 打包后的文件夹的名称.

6. 在my-app目录终端下执行如下命令，页面会打包生成一个pig-ui的文件夹

npm run package

7. 进入my-app下的pig-ui文件夹，执行 npm init -y ， 初始化后文件中会生成package.json文件，对于package.json中name的设定：
   提示：
   1.不要和文件名称一样
   2.我之前设定的是pig-ui，打包的时候提示我名称太简单，建议改成@作者名字/pig-uices，其中npm Name是登录npm的用户名。
8. 执行发布指令
   公开版：

npm publish --access public

个人版：npm publish

校验是否可以使用

在任意一个vue项目中，首先安装你的npm组件

npm i '@lifangxu/pig-ui'

其次在你的main.js中全局使用

import PigButton from '@lifangxu/pig-ui' //引用组件
import '@lifangxu/pig-ui/pig-ui.css'  //引用起css
createApp(App).use(PigButton).mount('#app')