怎样创建前端公共vue组件库

参考文章：https://www.cnblogs.com/bien94/p/12034249.html

目前电脑上装的是vue-cli4

执行命令创建一个项目：

vue create fcom（项目名称）

看package.json文件

 

 

 private字段改为false，证明不是私有的

 

 

 

增加main字段：它代表入口文件，指向最终编译后的包文件，在这里其值设置为"./dist/fcom.js"

此外，在scripts字段中新增一个命令脚本，如："build-lib": "vue-cli-service build --target lib --name fcom ./src/index.js"；在该命令中--target属性表示构建目标，默认为应用模式，这里需要设置为lib，表示启用库模式；--name属性表示构建的名称，可以与package.json文件中的name字段的值不相同；最后一个参数表示入口文件，默认为src/App.vue，在这里我们修改为了./src/index.js。最终的修改情况如下图所示：

 

 

 接下来，我们在src目录下建立一个index.js文件，我们试着将componets/HelloWord.vue组件导出，而HelloWord.vue是构建工程时默认生成的。下面是index.js文件的内容：

import Vue from "vue"
import HelloWorld from './components/HelloWorld.vue'

const componentsLib = {
    HelloWorld
}

Object.keys(componentsLib).forEach(name =>{
    Vue.component(name,componentsLib[name])
})

export default componentsLib

在上面代码中可以看出导出的是ComponentsLib，若是还想导出其它的、自己创建的vue文件，可以类似于添加HelloWord组件一样进行添加。接着在根目录下打开cmd窗口，输入npm run build-lib命令，编译结果如下图所示：

 

 

 在根目录下会生成dist文件夹，其里面的文件如下图所示：

 

 

 到此，组件已经完成构建了。

下面是怎样将组件发布到npm的步骤

首先是注册npm：

1.官网注册
  https://www.npmjs.com/signup
2.命令行注册
  npm adduser   //按照提示输入用户名,邮箱等即可
3.注册后登陆
  npm login    //按照提示输入用户名,密码,邮箱等即可
4.登陆后查看登陆状态(可忽略)
  npm whoami

 

 

 

 

https://www.npmjs.com/?track=newUserCreated

这个密码，设置了几次，都被占用了，后来系统提示，会记录在google账号中，不用记录

这里我就记下，账号  fengqinghai    邮箱163   密码：J#n7&HzAegBsnq#

执行npm adduser

 

 

 这里的密码是隐藏的，实际已经输入了

npm login

 

 

 打包项目：是为了确认在发布之前是最新的代码，这个命令根据自己配的命令来写

npm run build-lib

发布代码到npm上：需要在邮箱验证通过后才能正常发布，等待邮箱验证邮件

npm publish --access public

也有这个命令：不知道上面好还是下面好

npm publish

 

 

 登陆npm官网查看发布代码(UI组件库创建完成)

个人头像->profile settings->package

测试组件（新建/已有项目中安装）

安装

npm install --save @username/component-name //@npm官网注册username/组件项目名 == @username/component-name

然后引入

import '@username/component-name'

使用即可

 

 

 

 

 

 

 

。