1.首先使用vue create my_project 構建一個自己的Vue項目
2.vue.config.js和package.json配置如下，做了些修改
const path = require('path')
module.exports = {
publicPath: '/',
outputDir: 'dist',
devServer: {
port: 9981,
open: true,
overlay: {
warnings: false,
errors: true
},
// lintOnSave: false
},
productionSourceMap: false,
configureWebpack: {
performance: {
hints: false
}
},
// 修改 pages 入口
pages: {
index: {
entry: 'examples/main.js', // 入口
template: 'public/index.html', // 模板
filename: 'index.html' // 輸出文件
}
},
// 擴展 webpack 配置
chainWebpack: config => {
// @ 默認指向 src 目錄，這里要改成 examples
// 另外也可以新增一個 ~ 指向 packages
config.resolve.alias
.set('@', path.resolve('examples'))
.set('~', path.resolve('packages'))
// 把 packages 和 examples 加入編譯，因為新增的文件默認是不被 webpack 處理的
config.module
.rule('js')
.include.add(/packages/).end()
.include.add(/examples/).end()
.use('babel')
.loader('babel-loader')
.tap(options => {
// 修改它的選項...
return options
})
}
}
2.package.json：
{
"name": "shr-ui",
"version": "0.1.2",
"private": false,
"main": "lib/shr-ui.umd.js",
"style": "lib/shr-ui.css",
"files": [
"packages",
"lib",
"src"
],
"scripts": {
"dev": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint",
"docs:dev": "vuepress dev docs",
"docs:build": "vuepress build docs",
"lib": "vue-cli-service build --target lib --name shr-ui --dest lib packages/index.js"
},
"dependencies": {
"core-js": "^2.6.5",
"vue": "^2.6.10"
},
"devDependencies": {
"@vue/cli-plugin-babel": "^3.7.0",
"@vue/cli-plugin-eslint": "^3.7.0",
"@vue/cli-service": "^3.7.0",
"babel-eslint": "^10.0.1",
"babel-plugin-component": "^1.1.1",
"eslint": "^5.16.0",
"eslint-plugin-vue": "^5.0.0",
"less": "^3.9.0",
"less-loader": "^5.0.0",
"node-sass": "^5.0.0",
"sass-loader": "^10.1.0",
"vue-template-compiler": "^2.5.21",
"vuepress": "^0.14.11"
},
"eslintConfig": {
"root": true,
"env": {
"node": true
},
"extends": [
"plugin:vue/essential",
"eslint:recommended"
],
"rules": {},
"parserOptions": {
"parser": "babel-eslint"
}
},
"postcss": {
"plugins": {
"autoprefixer": {}
}
},
"browserslist": [
"> 1%",
"last 2 versions"
]
}
3.新建兩個文件夾，一個叫packages和src文件，用於后期存儲組件和公用方法
4.packages下這樣寫：index.js==>>
import ShrButton from "./button";
import { resolvingDate } from "../src/utils"
// 所有組件列表
const components = [ShrButton];
// 定義 install 方法，接收 Vue 作為參數
const install = function (Vue) {
// 判斷是否安裝，安裝過就不繼續往下執行
if (install.installed) return;
install.installed = true;
// 遍歷注冊所有組件
components.map(component => Vue.component(component.name, component));
// 下面這個寫法也可以
// components.map(component => Vue.use(component))
Vue.prototype.$resolvingDate = resolvingDate;
};
// 檢測到 Vue 才執行，畢竟我們是基於 Vue 的
if (typeof window !== "undefined" && window.Vue) {
install(window.Vue);
}
export {
install,
ShrButton,
// function
resolvingDate
}
export default {
install,
ShrButton,
};
結構如圖：
5.button/index.js==>
// 為組件提供 install 方法，供組件對外按需引入
import ShrButton from "./src/main";
ShrButton.install = Vue => {
Vue.component(ShrButton.name, ShrButton);
};
export default ShrButton;
6.src/main.vue == >
<template>
<div class="button_div">
<el-button type="primary" :loading="loadingbutton" @click="handleClick"
><slot></slot
></el-button>
</div>
</template>
<script>
export default {
name: "ShrButton",
props: {
time: {
type: Number,
default: 2000,
},
},
data() {
return {
loadingbutton: false,
};
},
methods: {
handleClick() {
if (this.loadingbutton) return;
this.loadingbutton = true;
setTimeout(() => {
this.loadingbutton = false;
}, this.time);
this.$emit("click");
},
},
};
</script>
<style lang="scss" scoped>
.button_div {
display: inline;
}
</style>
優點：這樣就分裝好了一個延時按鈕，每次點擊都會有一個防抖事件，達到不會連續點擊連續出發后台接口等
分裝好久執行 npm run lib命令就會自動打包好lib文件，最后要發到npm的。
打包好之后再執行，npm login ，然后再執行npm publish。就成功上傳到了npm上啦。我們再看看在項目中怎么使用吧。
首先npm install shr-ui就可以下載我們的組件，然后引入
這是通過Vue.use全局注冊的方法，也可以和element-ui一樣的按需引入的方法
好了，分裝組件並上傳到npm上，並下載應用到項目，就此結束。歡迎有問題的小伙伴提出提問！