简单发布vue组件到npm

简单发布vue组件到npm

• 封装打包发布到npm
• 将我们的组件定义好
• 创建index.js文件
• 引入我们的组件
• Vue的插件模式需要暴露一个install方法
• 在package.json中顶一个打包命令 vue-cli-service build --target lib ./src/common_ui/index.js --dest common_ui --name ui21
• // --target lib PATH,打包目录(入口)
• // --dest DIR 打包后的文件夹名称
• // --name NAME 打包后的文件名名称
• 运行指令打包
• 项目的任意位置创建一个packages文件，将打包出来的xx.umd.js或xx.umd.min.js赋值到packages包里面，有样式文件也一并赋复制过去
• 在packages包位置使用npm init -y初始化一个package.json文件
• "mian"属性对应的一定是我们打包好的文件.js， name就是我们的项目名字
• 发布一定要在当前packages文件下使用cmd终端发布
• 发布之前一定要将npm的源切换为官方源 可以安装npm install nrm -g 插件，可以随意切换源 nrm ls：查看源 nrm use 源 ；使用源
• npm login 进行登录 输入账号 密码 邮箱进行验证
• npm publish 发布推送
• yarn add 包 将发布的包拉取下来在mian.js中引入并Vue.use()就可以直接使用了。标签名称就是当时的@components: { name: name }(ts注解写法)
• 补充： 有样式文件，在main.js中同样的引入进来即可

import fieldSets from '../components/FieldSets.vue'

// Vue的插件模式需要暴露一个install方法
//   创建一个方法
const install = (Vue) => {
  Vue.component(fieldSets.name, fieldSets)
}

// 4.2 暴漏方法
export default install