第一步：创建空白文件夹并安装依赖
创建 package.json npm init -y
安装 vue-loader npm install vue-loader
安装 webpacl webpack-cli npm install webpacl webpack-cli -D
第二步：创建 src 目录及文件
创建src目录
在src目录下创建components文件夹来存放我们的组件
在src目录下创建index.js入口文件
在components文件夹下创建testH1.vue组件
第三步：编写我们的组件 testH1.vue
<template>
<h1 class="test-h1-box">
<slot>测试文字</slot>
</h1>
</template>
<script>
export default {
name: 'testH1'
}
</script>
<style>
.test-h1-box{
background: red;
color: green;
text-align: center
}
</style>
第四步：编辑 src 目录下的入口文件 index.js
// 引入组件
import sliderVerify_vue from './components/index.vue'
// 创建 install 函数
// vue.use 会默认查找并调用 install 函数
const SliderVerify = {
install: (Vue) => {
// 注意：第一个参数是组件名称，我们在页面引用时用到
Vue.component(sliderVerify_vue.name, sliderVerify_vue)
}
}
// 暴露 install 函数
export default SliderVerify;
第五步：在 testH1 目录下创建webpack.config.js，同 package.json 同级
const path = require('path')
module.exports = {
devtool: "source-map",
// 模式
// mode: 'development', // 开发模式 生成普通 js 文件
mode: 'production', // 生产模式 生成 .min.js 压缩文件
// 入口
entry: path.join(__dirname, './src/index.js'),
// 出口
output: {
path: path.resolve(__dirname, 'dist'),
publicPath: path.resolve(__dirname, 'dist'),
// filename: 'testH1.js', // 生成的文件名 对应 开发模式
filename: 'testH1.min.js', // 生成的文件名 对应 生产模式
libraryTarget: 'umd', // 支持 ems / commontjs / requirejs 规范
// libraryTarget: 'amd' // 支持 requirejs 规范
umdNamedDefine: true
},
module: {
rules: [{
test: /\.vue$/,
loader: 'vue-loader'
}]
}
}
打包
打包命令 npx webpack
第六步：编辑 package.json 文件
{
"name": "test-h1",
"version": "1.0.0",
"description": "自定义 h1 标签",
"main": "dist/testH1.min.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [
"H1",
"标签",
"vue",
"vue插件"
],
"author": "Mr.test",
"license": "MIT",
"devDependencies": {
"vue-loader": "^14.2.4",
"webpack": "^5.21.2",
"webpack-cli": "^4.5.0"
}
}
第七步：编辑 README.md
安装
npm install testH1
引入
import testH1 from 'testH1'
全局注册
Vue.use(testH1);
页面使用
<testH1> 文字内容 </testH1>
第八步：发布至 NPM
在npm官网注册账号：用户名 邮箱 密码
npm配置的中央仓库应是npm，如不是则运行以下命令 npm config set registry https://registry.npmjs.org/
添加用户，配置
npm addUser
依次添加：userName、password 和 Email
只需添加一次即可
上传至 npm npm publish