1.0.4 • Published 3 years ago
wuquanwu-modal v1.0.4
VUE组件发布到npm
npm i wuquanwu-modal -S
组件中的name为 modal
所以下载使用的时候组件名要为modal
main.js中使用
import modal from "wuquanwu-modal";
import "wuquanwu-modal/ui-modal.css";
Vue.use(modal);
VUE组件发包步骤
1. vue create 项目名 package.json 打包命令,这里为 npm run ui
{
"name": "mynpm-project",
"version": "0.1.1",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint",
"ui": "vue-cli-service build --target lib ./src/ui/index.js --name ui-modal --dest dist-modal"
},
"dependencies": {
"core-js": "^3.8.3",
"vue": "^2.6.14",
"vue-router": "^3.5.1",
"vuex": "^3.6.2"
},
"devDependencies": {
"@babel/core": "^7.12.16",
"@babel/eslint-parser": "^7.12.16",
"@vue/cli-plugin-babel": "~5.0.0",
"@vue/cli-plugin-eslint": "~5.0.0",
"@vue/cli-plugin-router": "~5.0.0",
"@vue/cli-plugin-vuex": "~5.0.0",
"@vue/cli-service": "~5.0.0",
"eslint": "^7.32.0",
"eslint-config-prettier": "^8.3.0",
"eslint-plugin-prettier": "^4.0.0",
"eslint-plugin-vue": "^8.0.3",
"prettier": "^2.4.1",
"sass": "^1.32.7",
"sass-loader": "^12.0.0",
"vue-template-compiler": "^2.6.14"
}
}
2.组件所在文件夹下定义 xx.js文件,批量注册组件
import modal from "../modal/Index.vue";
const coms = [modal];
const install = function (Vue) {
console.log("Installing", modal);
coms.forEach((com) => {
Vue.component(com.name, com);
});
};
export default { install };
3.进入打包后的目录,npm init -y 生成package.json文件
我们要发布的就是这个打包后的目录
npm包名 即为package.json中的name