npm上传自定义组件/嫁包

​

 1.创建vue项目

 vue create measurement

执行vue create "项目名"

2.在src目录下创建page文件目录

3.新建一个组件（随便写一个组件）然后在pack下建一个index.js文件作为导出和打包的入口文件

 

​

// index.js
import hellow from './hellow/index.vue'

export default {
    install: function (Vue) {
        Vue.component('hellow', hellow)
    }
}

export {
    hellow
}

4.组件打包

在page.json中增加打包命令

"package":"vue-cli-service build --target lib ./src/page/index.js --name hellow --dest hellow"

执行 npm run package打包命令

执行完成会生成一个名为hellow的文件，这个名字是在打包命令中自定义  

5.初始化page.json

执行命令进入hellow文件

>>cd hellow

执行命令初始化创建page.json

npm init -y

Page.json中name名不能和npm官网已存在的命名重复，

Version为版本号（每次更新需要更改版本号）

6.上传npm

注册npm账号

去npm官网上注册一个账号，十分简单（记得绑定邮箱）

注册好之后
如果npm设置了taobao镜像的话先设置回来,不然无法上传

npm config set registry=https://registry.npmjs.org

Username  用户名

Password  密码

Email  邮箱

Enter one-time...  邮箱收到的验证码

执行npm publish上传组件

因为命名重复  所以换了个name

Npm官网能查到自己上传的组件

7.使用自己的组件

复制npm i “组件名”

在main.js中引入全局使用

局部引入