一、创建项目
1、vue create xxx (使用的版本是3.1.0)
2、把src目录名称改为examples
3、新建文件夹packages 用来存放组件
4、比如：新建Button组件
index.vue是用来编写组件的文件，index.js是对外引用，导出文件：
import Button from './index.vue'; /* istanbul ignore next */
Button.install = function(Vue) {
Vue.component(Button.name, Button);
}; export default Button;
5、在examples文件夹中新建index.js用来整合所有的组件，形成组件库对外导出。
import Button from '../packages/Button/index.js' // 存储组件列表
const components = [
Button
] // 定义 install 方法，接收 Vue 作为参数。如果使用 use 注册插件，则所有的组件都将被注册
const install = function (Vue) {
// 判断是否安装
if (install.installed) return
// 遍历注册全局组件
components.map(component => Vue.component(component.name, component))
} // 判断是否是直接引入文件
if (typeof window !== 'undefined' && window.Vue) {
install(window.Vue)
} export default {
// 导出的对象必须具有 install，才能被 Vue.use() 方法安装
install,
// 以下是具体的组件列表
Button
}
二、修改配置文件
1、新建vue.config.js文件：
const path = require('path')
function resolve(dir) {
return path.join(__dirname, dir)
}
module.exports = {
// 修改 src 为 examples
pages: {
index: {
entry: "examples/main.js", //入口文件
template: "public/index.html",
filename: "index.html"
}
},
// 组件样式内联
css: {
extract: false
},
// 扩展 webpack 配置，使 packages 加入编译
chainWebpack: config => {
config.resolve.alias
.set('@', resolve('examples'))
.set('~', resolve('packages'))
config.module
.rule('eslint')
.exclude.add(path.resolve('lib'))
.end()
.exclude.add(path.resolve('examples/docs'))
.end()
config.module
.rule('js')
.include
.add('/packages/')
.end()
.include.add(/examples/)
.end()
.use('babel')
.loader('babel-loader')
.tap(options => {
// 修改它的选项...
return options
})
}
};
2、修改package.json
"private": false,//开源
"main": "lib/vcolorpicker.umd.min.js",//入口文件
在script中添加npm run lib命令
"lib": "vue-cli-service build --target lib --name vbutton --dest lib examples/index.js"
–target: 构建目标，默认为应用模式。这里修改为 lib 启用库模式。
–dest : 输出目录，默认 dist。这里我们改成 lib
[entry]: 最后一个参数为入口文件，默认为 src/App.vue。这里我们指定编译 examples/ index.js组件库目录。
执行编译库命令
$ npm run lib
3、根目录新建.npmignore 文件，设置忽略发布文件
我们发布到 npm 中，只有编译后的 lib 目录、package.json、README.md才是需要被发布的。所以我们需要设置忽略目录和文件。
和 .gitignore 的语法一样，具体需要提交什么文件，看各自的实际情况。
#目录
examples/
packages/
public/
#文件
vue.config.js
babel.config.js
*.map
三、登录npm
$ npm login
成功后执行 npm publish
在上传中可能报错，一般为：
1、包名称冲突，修改package.json 下的name，可在npm上验证是否存在
2、使用淘宝镜像源的要切换回npm 仓库
成功后可在项目中安装改ui库，进行使用 npm install xxx -S进行使用
在main.js 进行全局引入
import 'xx' from 'xx-xx'
Vue.use(xx)
--------------------------------------------------------------------------------------------- 简陋的分割线 --------------------------------------------------------------------------------------------------
到此就结束了