侧边栏壁纸
博主头像
落叶人生博主等级

走进秋风,寻找秋天的落叶

  • 累计撰写 130555 篇文章
  • 累计创建 28 个标签
  • 累计收到 9 条评论
标签搜索

目 录CONTENT

文章目录

初探老街锦利国际点击 vue 插件开发

2023-11-21 星期二 / 0 评论 / 0 点赞 / 12 阅读 / 2766 字

锦利国际网投132/0883/2606开户过程如下: 1. 初始化项目 vue init webpack-simple projectName 运转项目: cd projectName npm ins

锦利国际网投132/0883/2606开户过程如下:

1. 初始化项目

vue init webpack-simple projectName

运转项目:

cd projectName npm install npm run dev

2. 写插件

在 src 文件夹下面建 lib 文件夹,用于寄存插件。lib 文件夹下再建 toast.js 和 toast.vue 两个文件。整个项目目录如下所示:

toast.vue 的内容如下:

 

{{msg}}

toast.vue 是做一个 弹出提示,其间传入的参数有两个:toastMsg 和 isSHowToast,别离表明 提示音讯以及是否显现提示。

toast.js 中写 install 方法,内容如下:

import VueToastPlugin from './toast.vue' const toastPlugin = { install: function(Vue) {        Vue.component(VueToastPlugin.name, VueToastPlugin)    }} // global 情况下 自动装置 if (typeof window !== 'undefined' && window.Vue) { window.Vue.use(toastPlugin)} // 导出模块 export default toastPlugin

3. 本地测验

本插件的功用就这么多,由于咱们尚未发布,所以先进行本地测验。

3.1 将 App.vue 剩余代码删去。

3.2 在 main.js 中引进 

import Vue from 'vue' import App from './App.vue' import Toast from './lib/toast.js' Vue.use(Toast) new Vue({ el: '#app', render: h => h(App)})

3.3 在 App.vue 中运用 toast (别忘记需求传递的参数)

 

3.4 本地测验的成果,如图,是所希望的

4. 装备打包

本地测验没有问题往后,咱们就可以预备一下修正装备,为打包发布做预备。

4.1 修正 webpack.config.js

关于 library 的详解。

4.2 修正 package.json

4.3 修正 .gitignore 文件

去掉 dist。

4.4 修正 index.html文件

 

4.5 项目打包

npm run build

5. 在npm上发布

5.1 注册npm账号

移步 npm 官网。

5.2 本地控制台登录 npm 账号

npm adduser

5.3 发布

npm publish

广告 广告

评论区