标签：down sas vue组件 使用 esc temp false password require
总体分为2个步骤
一，先写好插件
二，发布到npm上面
一，写vue插件
vue有一个开放的方法install，在vue插件需要写在这个方法里面，在vue官网，里面说的很清楚，这个方法里面可以是全局方法，可以是指令还可以是挂载在原型的方法。
而vue在使用插件时候，需要首先use。
写好插件之后需要应用webpack打包。然后将代码统一推送到npm上面就可以了。
二，发布到npm上面
1）首选需要有个npm注册账号，这个可以直接在npm官方注册
2）在cmd上面切换路径到打包好的vue插件目录
3）在cmd上面执行 npm adduser命令，这个时候会需要输入前面申请的username和password
4）执行npm publish即可
5）每次推送需要修改package.json的版本号，每次的版本号不能与前面相同
三，具体案例
写了小案例vue-toast-zhensg
1）vue组件代码
<template>
<section class="toast-container">
<div class="toast" v-bind:class="[visible?‘fade-in‘:‘fade-out‘]">
<span>{{message}}</span>
</div>
</section>
</template>
<style lang="scss">
@keyframes fade-in {
0% {
opacity: 0;
transform: scale(0.7);
}
100% {
opacity: 1;
transform: scale(1);
}
}
@keyframes fade-out {
0% {
opacity: 1;
transform: scale(1);
}
100% {
opacity: 0;
transform: scale(0.7);
}
}
.toast-container{
position: absolute;
left: 0;
top:0;
bottom: 0;
right:0;
z-index: 2000;
display: flex;
justify-content: center;
align-items: center;
.fade-in{
animation-name: fade-in;
animation-duration: 0.5s;
animation-fill-mode: both;
}
.fade-out{
animation-name: fade-out;
animation-duration: 0.5s;
animation-fill-mode: both;
}
.toast{
width: 180px;
height: 60px;
text-align: center;
line-height: 60px;
background-color: black;
color: white;
border-radius: 13px;
}
}
</style>
<script>
export default{
data(){
return{
message:‘hello,Vue-toast‘,
visible:true
}
}
}
</script>
2）js部分，也就是插件功能部分代码
import ToastComponent from ‘./vue-toast.vue‘
//凡是vue插件一定有这个方法。目的是use使用，才能被use引用
let install = function (Vue,options) {
var opt={
duration:3000
}
for(var key in options){
opt[key]=options[key];
}
//挂载在原型上 使用的时候this.$toast
Vue.prototype.$toast = function (message,option) {
if(typeof option=="object"){
for(var key in option){
opt[key]=option[key];
}
}
//Vue.extend可以继承这个组件，然后得到一个新的组件
const ToastController = Vue.extend(ToastComponent);
//创建一个新的实例，实例挂载在一个空的div
var instance = new ToastController().$mount(document.createElement("div"));
instance.message = message;
instance.visible = true;
document.body.appendChild(instance.$el); //将div添加到dom中
setTimeout(()=>{
instance.visible = false;
setTimeout(()=>{
document.body.removeChild(instance.$el)
},500)
},6000)
}
Vue.prototype.$toast[‘show‘] = function (message,option) {
return Vue.prototype.$toast(message,option);
}
}
export default install;
3）webpack打包代码
var path = require(‘path‘);
module.exports = {
entry:‘./src/index.js‘,
output:{
path:path.join(__dirname,‘./dist‘),
filename:‘vue-toast.js‘,
libraryTarget: "umd", //一套完整的规范 cmd amd
library: ‘VueToast‘ //库的名字
},
module:{
rules:[
{
test:/\.js$/,
loader:‘babel-loader‘,
include:path.join(__dirname,‘src‘),
exclude:/node_modules/,
},
{
test:/\.vue$/,
loader:‘vue-loader‘,
include:path.join(__dirname,‘src‘),
exclude:/node_modules/,
options:{
loaders:{
scss:‘style-loader!css-loader!postcss-loader!sass-loader‘
},
}
}
]
},
plugins: [
]
}
4）package.json代码 main的路径必须是打包好的路径
{
"name": "vue-toast-zhensg",
"version": "1.0.5",
"description": "",
"main": "dist/vue-toast.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"dependencies": {
"vue": "^2.3.4",
"webpack": "^3.1.0"
},
"devDependencies": {
"autoprefixer": "^9.3.1",
"babel-core": "^6.25.0",
"babel-loader": "^7.1.1",
"babel-preset-env": "^1.6.0",
"css-loader": "^0.28.11",
"node-sass": "^4.5.3",
"postcss": "^6.0.6",
"postcss-loader": "^2.0.6",
"postcss-modules-local-by-default": "^1.2.0",
"sass-loader": "^6.0.6",
"style-loader": "^0.18.2",
"uglifyjs-webpack-plugin": "^0.4.6",
"vue-loader": "^13.0.0",
"vue-template-compiler": "^2.3.4"
},
"_from": "vue-toast-zhensg@1.0.5",
"_resolved": "http://registry.npm.taobao.org/vue-toast-zhensg/download/vue-toast-zhensg-1.0.0.tgz"
}
5）我发布的npm插件路径：https://www.npmjs.com/package/vue-toast-zhensg
以上很简单的一个插件。
标签：down sas vue组件 使用 esc temp false password require
原文地址：https://www.cnblogs.com/zhensg123/p/9906125.html
