创建一个新的vue项目，我直接创建的vue2项目，因为不需要用到路由和状态机这些，就不需要自定义了，按需创建项目目录文件就行了
image.png
image.png
1、在src文件下创建lib和components文件夹
image.png
lib文件夹下的index.js用于暴露组件接口供外部使用，DashBoard.vue用于存放自定义组件源码，components文件夹用于存放组件所需的其他组件信息
image.png
2、package.json中的private改为false,因为组件包是公用的；main用于确定外部导入项目的主要文件入口，我在打包过程出现很多问题，基本都是sass-loader、css-loader、sass等版本问题不对应的问题，如果打包遇到类似问题，可以试试我用的版本
image.png
3、项目最外层创建webpack.config.js文件,内容如下，用于打包发布自定义组件。安装webpack,具体版本packjson中有圈出
'use strict'
const path = require('path');
const { VueLoaderPlugin } = require('vue-loader')
module.exports = {
mode: "production",
entry: path.resolve(__dirname, './src/lib/index.js'),
output: {
path: path.resolve(__dirname, './dist'),
publicPath: '/dist/',
filename: 'dash-board.js',
library: 'dash-board',
libraryTarget: 'umd',
umdNamedDefine: true
},
module: {
rules: [
{
test: /\.vue$/,
use: 'vue-loader',
},
{
test: /\.js$/,
use: 'babel-loader',
exclude: /node_modules/,
},
{
test: /\.css$/, //配置以css结尾的文件,
// ]
use: [
'style-loader',
'css-loader'
],
},
{
test: /\.scss$/, //用于解析scss样式
use: [
'style-loader',
'css-loader',
'sass-loader'
],
},
{
test: /\.(png|jpg|gif|svg)$/, //用于解析图片
use: [
{
loader: 'url-loader',
options: {
name: '[name].[ext]',
outputPath: 'images/',
limit: 8096 //小于4K的图片转化为base64存放到打包后的js中
}
}
]
},
{
test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/, //用于解析字体
loader: 'file-loader',
options: {
limit: 10000,
name: 'font/[name].[hash:6].[ext]'
}
}
],
},
plugins: [
// 请确保引入这个插件！
new VueLoaderPlugin()
],
externals: {
vue: {
root: 'Vue',
commonjs: 'vue',
commonjs2: 'vue',
amd: 'vue'
}
},
};
4、登录私有库，将镜像切到私有库
5、保存提交代码
6、更新版本号
npm version patch
7、打包项目
npm run build
8、打不到私有库
npm publish
