vue制作npm插件并上传

image.png

vue.config.js相关配置

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  pages: { // 入口文件的相关配置
    index: {
      entry: 'examples/main.js', // 把src改为examples这里入口文件也要跟着改
      template: 'public/index.html',
      filename: 'index.html'
    }
  },
  chainWebpack: config => {
    config.module
      .rule('js')
      .include
      .add('/packages/') // 在根目录下加了新的文件webpack不会去打包所以要增加进去
      .end()
      .use('babel')
      .loader('babel-loader')
      .tap(options => {
        // 修改它的选项...
        return options
      })
  }
})

packages目录下文件

image.png

packages/index.js

// 导入组件
import demoComponent from './demo-component/index.js'
export default demoComponent

packages\demo-component

index.js

import demoComponent from './src/demo-component'

// 为组件提供 install 安装方法，供按需引入
demoComponent.install = function (Vue) {
  Vue.component(demoComponent.name, demoComponent)
}
// 默认导出组件
export default demoComponent

src/demo-component.vue

<template>
    <div>
        这是demo-component.vue{{ msg }}
    </div>
</template>
<script>
export default {
  name: 'demoComponent',
  props: {
    msg: {
      type: String,
      required: true
    }
  }
}
</script>

测试

examples\main.js

import demo from '../packages/index'
console.log(demo)

createApp(App).use(store).use(router).use(demo).mount('#app')

局部组件就可以引用

打包上传到npm

配置编译

package.js 中新增一条编译为库的命令

在库模式中，Vue是外置的，这意味着即使在代码中引入了 Vue，打包后的文件也是不包含Vue的。
以下我们在 scripts 中新增一条命令 npm run lib

• –target : 构建目标，默认为应用模式。这里修改为 lib 启用库模式。
• –dest : 输出目录，默认 dist 。这里我们改成 lib
• [entry] : 最后一个参数为入口文件，默认为 src/App.vue 。这里我们指定编译 packages/ 组件库目录。

"script": {
    "lib": "vue-cli-service build --target lib --name jaydemoComponent --dest lib packages/index.js"
}

包名注意事项

把包名中的标点符号去掉并与现有的包进行比较，相同则不允许发布
例如：react-native已经存在，那么诸如

reactnative
react_native
react.native
就不可以再发布了
注：包版本不一定要增量，可以是任意不曾使用过的版本号
被划了作用域的包默认是私有的，所以要通过—access=public让它变为公有的包：

npm publish --accesss=public

添加.npmignore 文件，设置忽略发布文件

我们发布到 npm 中，只有编译后的 lib 目录、package.json、README.md才是需要被发布的。所以我们需要设置忽略目录和文件。
和 .gitignore 的语法一样，具体需要提交什么文件，看各自的实际情况。

# 忽略目录
examples/
packages/
public/
 
# 忽略指定文件
vue.config.js
babel.config.js
*.map

登录到 npm

首先需要到 npm 上注册一个账号，注册过程略。
如果配置了淘宝镜像，先设置回npm镜像：

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

然后在终端执行登录命令，输入用户名、密码、邮箱即可登录。
npm login

发布到 npm
执行发布命令，发布组件到 npm
npm publish
执行后显示发布成功即可在npm官网上找到自己的包，如果没有发布成功，有可能是包名称和社区其他包重复了，改个名字即可。
被划了作用域的包默认是私有的，所以要通过—access=public让它变为公有的包

最后 引用就跟我们装其他依赖包一样了