vue css3loadding插件的开发以及npm包的发布管理

lijinke666 发布于2019-08-22 18:03 / 926人阅读

摘要：插件开发的话建议使用脚手架开发如果提示执行全局安装在次执行上面的命令完成之后可以看到这样的目录在下面添加

插件开发的话建议使用vue-gitment脚手架开发

vue init webpack-simple vue-gitment

如果提示

执行cnpm install vue-cli -g 全局安装

cnpm install vue-cli -g

在次执行上面的命令完成之后可以看到这样的目录

在src下面添加component loadding.js loadding.vue
loadding.vue

loadding.js

import loadding from "./loadding.vue"

const Loadding ={
  install:function (Vue) {
    Vue.component("Loadding",loadding)
  }
};
// 这里的判断很重要
if (typeof window !== "undefined" && window.Vue) {
  window.Vue.use(Loadding)
}
export default Loadding

然后修改webpack.config.js文件

entry：webpack打包的入口文件
output:webpack打包的出口文件里面的是一些配置
library:模块名字这里是Loadding
libraryTarget:"umd"//写插件的时候需要umd
umdNamedDefine:true //对umd的模块命名表示负责
然后npm run build一下
emmmm这个时候出现了一坨东西表示成功了

确认没问题之后就再次修改package.json文件
我的是这样子

{
  "name": "cssloadding-jie",
  "description": "A Vue.js project",
  "version": "1.0.0",
  "author": "Livejie <18312173568@163.com>",
  "license": "MIT",
  "private": false,
  "main":"loadding/js/loadding.js",
  "keywords": [
    "vue",
    "css3loadding",
    "ajax loadding"
  ],
  "scripts": {
    "dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot",
    "build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
  },
  "dependencies": {
    "vue": "^2.5.11"
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not ie <= 8"
  ],
  "devDependencies": {
    "babel-core": "^6.26.0",
    "babel-loader": "^7.1.2",
    "babel-preset-env": "^1.6.0",
    "babel-preset-stage-3": "^6.24.1",
    "cross-env": "^5.0.5",
    "css-loader": "^0.28.7",
    "file-loader": "^1.1.4",
    "vue-loader": "^13.0.5",
    "vue-template-compiler": "^2.4.4",
    "webpack": "^3.6.0",
    "webpack-dev-server": "^2.9.1"
  }
}
![图片描述][5]

name:插件的名字
description：提示
version:版本号
author:作者
main:加入main入口文件
keywords:添加关键词
然后把不要的删除掉
目录结构变成这样子

然后登陆npm

npm login

输入用户名密码邮箱登陆
没有的话去这里注册https://www.npmjs.com/
发布

npm publish

发布成功

更新的话再次publish但是需要修改下version版本
一定要修改version版本不然会报错
再次npm publish

再次打开一个新的项目

npm install  cssloadding-jie

main.js下

import Loadding from "cssloadding-jie"
Vue.use(Loadding);

vue文件下使用

npm run dev 打开浏览器查看

成功引入
成功发布并使用。

项目地址https://gitee.com/ljj1996/npm...

云服务器 GPU云服务器 vue插件 NPM包管理器 python包的安装 linux包的关系

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/95438.html

手把手发布一个npm包及相关注意事项

摘要：前言这里是发布包的具体步骤，手把手教会，相关原理在其他文章下面有原理好文章指路分钟教你快速开发一个插件并发布手把手教你封装一个发布之前，需要注册一个账号这里注册具体步骤新建项目如需安装代码下面新建一个文件夹。前言这里是发布npm包的具体步骤，手把手教会，相关原理在其他文章下面有原理好文章指路10分钟教你快速开发一个vue插件并发布npm 手把手教你封装一个 vue componen...

ZoomQuiet 2019-08-23 12:36 评论0 收藏0
基于webpack4的VUE多页脚手架

摘要：另外备注一部分参数的说明折叠有助于文档树中文本节点的空白区域对进行压缩默认默认按照不同文件的依赖关系来排序。敲黑板讲重点的当然目前这部分的文档在官网还不是很全，所以这里我们参考了印记中文的说明文档，指优化模块。链接写在前面为什么要自己手写一个脚手架？如何去思考遇到的问题？正文链接原文链接 github whale-vue ——写在前面 1、为什么要自己手写...

张金宝 2019-08-23 18:40 评论0 收藏0
仿美团城市选择器的 Vue 插件开发实例

摘要：本文是讲一个基于的仿美团城市选择器的插件开发实例，目前关于城市选择器的插件比较少，在自己做项目的时候一直没有找到合适的城市选择器插件，所以自己开发了一个。本文是讲一个基于 Vue 的仿美团城市选择器的插件开发实例，目前关于城市选择器的插件比较少，在自己做项目的时候一直没有找到合适的城市选择器插件，所以自己开发了一个。同时也想把这个插件分享给出来，供同样有所需的前端同学学习使用。本项...

bladefury 2019-08-02 15:29 评论0 收藏0
仿美团城市选择器的 Vue 插件开发实例

摘要：本文是讲一个基于的仿美团城市选择器的插件开发实例，目前关于城市选择器的插件比较少，在自己做项目的时候一直没有找到合适的城市选择器插件，所以自己开发了一个。本文是讲一个基于 Vue 的仿美团城市选择器的插件开发实例，目前关于城市选择器的插件比较少，在自己做项目的时候一直没有找到合适的城市选择器插件，所以自己开发了一个。同时也想把这个插件分享给出来，供同样有所需的前端同学学习使用。本项...

idealcn 2019-08-26 13:59 评论0 收藏0
基于vue模块化开发后台系统——构建项目

摘要：构建完成，那么就开始撸代码了文章项目效果预览地址项目开源代码基于模块化开发后台系统准备工作基于模块化开发后台系统构建项目基于模块化开发后台系统权限控制文章目录如下：项目效果预览地址项目开源代码基于vue模块化开发后台系统——准备工作基于vue模块化开发后台系统——构建项目基于vue模块化开发后台系统——权限控制前言在熟悉上一篇说到准备工具之后，现在开始构建属于自己的项目，这是一个...

joyqi 2019-08-30 14:18 评论0 收藏0