npm發佈Vue-CLI3插件

npm發佈Vue-CLI3插件

一.新建vue項目

目錄結構:

二.修改項目文件夾

1.創建一個packages文件夾(用於存放編寫的組件)

2.把src修改爲examples

3.新建一個vue.config.js文件,並修改

由於修改了src文件夾,啓動vue項目後,找不到入口(main.js)會報錯,所以需要重新指定啓動入口

module.exports = {
  // 將 examples 目錄添加爲新的頁面
  pages: {
    index: {
      // page 的入口
      entry: 'examples/main.js',
      // 模板來源
      template: 'public/index.html',
      // 輸出文件名
      filename: 'index.html'
    }
  }
}

4.目錄結構

三.編寫組件

1.目錄(我寫了2個組件)

2.結構和代碼分析

A. YoungForm***是一個文件夾,下面有***dynamicForm.vue***和***index

B. ***dynamicForm.vue***是組件

  export default {
    name:"yForm", //注意:組件必須聲明 name，這個 name 就是引用組件時的標籤
    .....

C. ***index.js***是組件導出文件

import yForm from './dynamicForm.vue'
// 爲組件添加 install 方法，用於按需引入
yForm.install = function (Vue) {
    Vue.component(yForm.name, yForm)
}
export default yForm

3.整合所有組件,修改packages下的index.js

// 導入各個組件
import yForm from './YoungForm/index'
import yTable from './YoungTable/index'

// 把組件保存到一個數組中
const components = [
    yForm,
    yTable
]

// 定義 install 方法
const install = function (Vue) {
    if (install.installed) return
    install.installed = true
    // 遍歷組件列表並註冊全局組件
    components.map(component => {
        Vue.component(component.name, component) //component.name 此處使用到組件vue文件中的 name 屬性
    })
}

if (typeof window !== 'undefined' && window.Vue) {
    install(window.Vue)
}

export default {
    // 導出的對象必須具備一個 install 方法
    install,
    // 組件列表
    ...components
}

四.測試組件是否正常

1.在main.js引入組件

import yForm from '../packages/index'
Vue.use(yForm)

2.在頁面上使用組件(標籤名就是之前定義的組件的name)

3.運行項目,如果沒有bug就可以打包發佈了.有bug,自己寫的組件自己解決!

五.打包組件

1.修改package.json文件

在script中加上一句話, “lib”: “vue-cli-service build --target lib --name young-form --dest lib packages/index.js”

"scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint",
    "lib": "vue-cli-service build --target lib --name young-form --dest lib packages/index.js"
  }

主要需要四個參數：

• target: 默認爲構建應用，改爲 lib 即可啓用構建庫模式

• name: 輸出文件名

• dest: 輸出目錄，默認爲 dist，這裏我們改爲 lib

• entry: 入口文件路徑，默認爲 src/App.vue，這裏改爲 packages/index.js

2.執行命令,編譯組件 npm run lib會生成一個 lib文件夾

六.修改一系列配置

1.修改 package.json

"name": "young-form",
"version": "1.0.8",
"description": "這是一個動態組件",
"main": "lib/young-form.umd.min.js",
"keyword":"",
"private": false,
"license": "MIT",
"author": "yuanxiaotian",
 ......

name: 包名，該名不能和已有的名稱衝突

version: 版本號，不能和歷史版本號相同

description: 簡介

main: 入口文件，應指向編譯後的包文件

**keyword：**關鍵字，以空格分割

**author：**作者

**private：**是否私有，需要修改爲 false 才能發佈到 npm

**license：**開源協議

2.創建發佈忽略文件**.npmignore**

.DS_Store
node_modules/
examples/
packages/
public/
vue.config.js
babel.config.js
*.map
*.html

# 本地開發文件
.env.local
.env.*.local

# 日誌文件
npm-debug.log*
yarn-debug.log*
yarn-error.log*

# 編輯器文件
.idea
.vscode
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw*

七.發佈組件到npm

1.執行命令修改npm源

npm config set registry http://registry.npmjs.org

2.npm login登錄你的npm賬號(如果沒有,請去npm官網註冊一個)

3.發佈組件

npm publish

發佈之前請確認,執行 npm run lib編譯了組件;每次發佈版本號必須要不一樣喲!