免费视频淫片aa毛片_日韩高清在线亚洲专区vr_日韩大片免费观看视频播放_亚洲欧美国产精品完整版

1 前 言

平時(shí)我們?cè)陂_發(fā)的時(shí)候經(jīng)常使用 npm 安裝各種組件。

今天我們就來嘗試下制作一個(gè)自己的組件發(fā)布到 npm 上。

這里我以自己剛發(fā)布的一個(gè) Vue 組件來介紹。感興趣的可以來下載玩玩。

k-progress

安 裝

npm install -S k-progress

使 用

// main.jsimport 'k-progress';import 'k-progress/dist/k-progress.css';

2 開 發(fā)

2.1 新建項(xiàng)目

新建一個(gè) Vue ，熟悉的可以直接略過哈。

這里我使用的是 @vue/cli。

npm install -g @vue/cli# ORyarn global add @vue/cli

執(zhí)行該命令，可檢查是否安裝成功。

vue --version

我經(jīng)常使用 vue ui 來新建項(xiàng)目，這個(gè)命令會(huì)生成一個(gè)可視化操作頁面，特別方便。

我的項(xiàng)目用到了 scss，新建的時(shí)候勾選上。

至此項(xiàng)目新建完成。

2.2 開發(fā)功能

默認(rèn)新建的項(xiàng)目有個(gè) HelloWorld.vue 的例子，我們可以在這個(gè)頁面，引用我們的組件來檢測(cè)開發(fā)效果。

在 src/components 中，我們新建一個(gè) progress.vue，該文件名稱隨意。

具體的插件功能在此頁面編寫。

在同級(jí)目錄下新建一個(gè) index.scss 文件用來保存插件使用的樣式文件。

在同級(jí)目錄下新建一個(gè) index.js 文件來注冊(cè) Vue 組件。

這里以我為例。

import Vue from 'vue';import kProgress from './progress.vue';import './index.scss';const Components = {    kProgress};Object.keys(Components).forEach(name => {    Vue.component(name, Components[name]);});export default Components;

同時(shí)我們可以在 HelloWorld.vue 文件中來調(diào)用我們的組件查看效果。

3 構(gòu) 建

構(gòu)建主要是對(duì) package.json 文件進(jìn)行更改。以我的為例。

"name": "k-progress","version": "1.0.0","main": "./dist/k-progress.common.js","files": [    "dist"],"private": false,"scripts": {    "serve": "vue-cli-service serve",    "build": "vue-cli-service build",    "package": "vue-cli-service build --target lib --k-progress main ./src/components/index.js"},

• name : 插件名稱；
• version : 版本號(hào)，每次 npm publish 都需要進(jìn)行更改；
• main : 插件的主文件路徑；
• files : 發(fā)布保留的文件；
• private : 這里要改成 false ;
• scripts : 執(zhí)行命令；

執(zhí)行 yarn package 進(jìn)行構(gòu)建命令，不熟悉 yarn 的可以執(zhí)行 npm run package，不過真心推薦 yarn。

4 發(fā) 布

4.1 注冊(cè)賬號(hào)

NPM

4.2 登 錄

在自己的項(xiàng)目中，執(zhí)行 npm login，會(huì)提示讓你輸入 npm 賬號(hào)密碼。

可以通過 npm whoami 來檢查自己是否登錄成功。

4.3 發(fā) 布

npm publish

這里列出可能出現(xiàn)的 2 個(gè)錯(cuò)誤。

1. "private": true 會(huì)報(bào)錯(cuò)
2. version ：publish 過一次后，相同版本的無法再次發(fā)布

5 后 記

感謝支持。

若不足之處，歡迎大家指出，共勉。

如果覺得不錯(cuò)，記得 點(diǎn)贊，謝謝大家 ???

歡迎關(guān)注。

• GitHub
• 掘 金
• 簡(jiǎn) 書

5.1 原文地址

https://xrkffgg.github.io/Knotes/blog/13.html