脚手架创建vue项目 vue create projec

一、首先需要创建一个目录，用来存放需要打包的组件

比如：

微信图片_20220922103511.png

二、开发组件

之前在src下面已经创建了一个 oldComponents 目录，用来存放组件,现在新建了a,b组件用于测试。微信图片_20220922105210.png

代码如下：

<template>
  <div>11111111</div>
</template>

<script>
export default {
  name: "appA",
  data() {
    return {};
  },
};
</script>

<style scoped>
</style>

<template>
  <div>22222222</div>
</template>

<script>
export default {
  name: "appB",
  data() {
    return {};
  },
};
</script>

<style scoped>
</style>

编辑 oldComponents/index.js 文件，实现组件的全局注册，和局部调用

import appA from './a'
import appB from './b'
// 以数组的结构保存组件，便于遍历
const components = [
    appA,
    appB,
]
// 局部引入install
let obj = {}
for (const item of components) {
    obj[item.name] = {
        install: (Vue) => {
            Vue.component(item.name, item)
        }
    }
}

// 全局引入install
const install = function (Vue) {
    Vue.component(appA.name, appA)
    Vue.component(appB.name, appB)
}
export default Object.assign({install},obj)

到这里组件就已经开发完毕

可以在 src/main.js 中引入该组件

import oldComponents from './oldComponents'
Vue.use(oldComponents.appA)
Vue.use(oldComponents.appB)

然后就能直接使用刚才开发的 appA,appB 组件,直接放在app.vue文件中测试

<template>
  <div id="app">
    <app-a/>
    <app-b/>
    <router-view />
  </div>
</template>

组件的标签就是组件内定义的的 name，大写可以使用驼峰写法使用

这时候可以 npm run serve 启动项目，测试一下组件是否有 bug

三、打包组件

vue-cli 3.x 提供了一个库文件打包命令

主要需要四个参数：

target: 默认为构建应用，改为 lib 即可启用构建库模式
name: 输出文件名
dest: 输出目录，默认为 dist，这里我们改为 lib
entry: 入口文件路径，默认为 src/App.vue，这里改为 src/oldComponents/index.js

基于此，在 package.json 里的 scripts 添加一个 lib 命令

// pageage.json

{
  "scripts": {
    "lib": "vue-cli-service build --target lib --name tag-textarea --dest lib src/oldComponents/index.js"
  }
}

然后执行 npm run lib 命令，编译组件

四、准备发布

首先需要在 package.json 添加组件信息

name: 包名，该名不能和已有的名称冲突；

version: 版本号，不能和历史版本号相同；

description: 简介；

main: 入口文件，应指向编译后的包文件；

keyword：关键字，以空格分割；

author：作者；

private：是否私有，需要修改为 false 才能发布到 npm；

license：开源协议。

{
  "name": "sssbszs",
  "version": "0.1.1",
  "description": "ceshi npm",
  "main": "lib/tag-textarea.umd.min.js",
  "license": "",
  "author": "xianfeng",
  ...

然后创建 .npmignore 文件，设置忽略文件

该文件的语法和 .gitignore 的语法一样，设置发布到 npm 时忽略哪些目录或文件

.DS_Store
node_modules/
dist/
public/
src/
jsconfig.json
vue.config.js
babel.config.js
*.map
*.html

# local env files
.env.local
.env.*.local

# Log files
npm-debug.log*
yarn-debug.log*
yarn-error.log*

# Editor directories and files
.idea
.vscode
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw*

五、发布到 npm

如果以前改过 npm 的镜像地址，比如使用了淘宝镜像，就先改回来

npm config set registry registry.npmjs.org

如果没有 npm 账户，可以通过 npm adduser 命令创建一个账户，或者到 npm 官网注册

如果在官网注册的账户，或者以前就有账户，就使用 npm login 命令登录

具体流程可以参考官方文档

在发布之前，一定要确保组件已经编译完毕，而且 package.json 中的入口文件（main）的路径正确

一切就绪，发布组件：

npm publish

六、发布踩坑问题

1.包名冲突，更改包名，vuebase已被使用，后面改成sssbszs发布成功

npm ERR! code E403 npm ERR! 403 403 Forbidden - PUT registry.npmjs.org/vuebase - You do not have permission to publish "vuebase". Are you logged in as the correct user? npm ERR! 403 In most cases, you or one of your dependencies are requesting npm ERR! 403 a package version that is forbidden by your security policy, or npm ERR! 403 on a server you do not have access to.

其他错误可以看segmentfault.com/a/119000002…

参考文章juejin.cn/post/699578…

vue-cli 快速打包上传npm组件库

脚手架创建vue项目 vue create projec