国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

vue css3loadding插件的開發以及npm包的發布管理

lijinke666 / 970人閱讀

摘要：插件開發的話建議使用腳手架開發如果提示執行全局安裝在次執行上面的命令完成之后可以看到這樣的目錄在下面添加

插件開發的話建議使用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"http://寫插件的時候需要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...

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/95438.html

相關文章

  • 手把手發布一個npm包及相關注意事項

    摘要：前言這里是發布包的具體步驟，手把手教會，相關原理在其他文章下面有原理好文章指路分鐘教你快速開發一個插件并發布手把手教你封裝一個發布之前，需要注冊一個賬號這里注冊具體步驟新建項目如需安裝代碼下面新建一個文件夾。 前言 這里是發布npm包的具體步驟，手把手教會，相關原理在其他文章下面有原理好文章指路10分鐘教你快速開發一個vue插件并發布npm 手把手教你封裝一個 vue componen...

    ZoomQuiet 評論0 收藏0

  • 基于webpack4的VUE多頁腳手架

    摘要：另外備注一部分參數的說明折疊有助于文檔樹中文本節點的空白區域對進行壓縮默認默認按照不同文件的依賴關系來排序。敲黑板講重點的當然目前這部分的文檔在官網還不是很全，所以這里我們參考了印記中文的說明文檔，指優化模塊。 鏈接 寫在前面 為什么要自己手寫一個腳手架？ 如何去思考遇到的問題？ 正文 鏈接 原文鏈接 github whale-vue ——寫在前面 1、為什么要自己手寫...

    張金寶 評論0 收藏0

  • 仿美團城市選擇器的 Vue 插件開發實例

    摘要：本文是講一個基于的仿美團城市選擇器的插件開發實例，目前關于城市選擇器的插件比較少，在自己做項目的時候一直沒有找到合適的城市選擇器插件，所以自己開發了一個。 本文是講一個基于 Vue 的仿美團城市選擇器的插件開發實例，目前關于城市選擇器的插件比較少，在自己做項目的時候一直沒有找到合適的城市選擇器插件，所以自己開發了一個。同時也想把這個插件分享給出來，供同樣有所需的前端同學學習使用。 本項...

    bladefury 評論0 收藏0

  • 仿美團城市選擇器的 Vue 插件開發實例

    摘要：本文是講一個基于的仿美團城市選擇器的插件開發實例，目前關于城市選擇器的插件比較少，在自己做項目的時候一直沒有找到合適的城市選擇器插件，所以自己開發了一個。 本文是講一個基于 Vue 的仿美團城市選擇器的插件開發實例，目前關于城市選擇器的插件比較少，在自己做項目的時候一直沒有找到合適的城市選擇器插件，所以自己開發了一個。同時也想把這個插件分享給出來，供同樣有所需的前端同學學習使用。 本項...

    idealcn 評論0 收藏0

  • 基于vue模塊化開發后臺系統——構建項目

    摘要：構建完成，那么就開始擼代碼了文章項目效果預覽地址項目開源代碼基于模塊化開發后臺系統準備工作基于模塊化開發后臺系統構建項目基于模塊化開發后臺系統權限控制 文章目錄如下：項目效果預覽地址項目開源代碼基于vue模塊化開發后臺系統——準備工作基于vue模塊化開發后臺系統——構建項目基于vue模塊化開發后臺系統——權限控制 前言 在熟悉上一篇說到準備工具之后，現在開始構建屬于自己的項目，這是一個...

    joyqi 評論0 收藏0

發表評論

0條評論

最新活動
閱讀需要支付1元查看
<