vue插件開發詳解

版權聲明：本文爲博主原創文章，遵循 CC 4.0 BY-SA 版權協議，轉載請附上原文出處連接和本聲明。
本文連接：gudepeng.github.io/note/2020/0…

廢話很少說，直接進入正題。在開發vue的時候咱們常常會開發本身的插件以供你們使用，下面就具體介紹下怎麼開發插件。

一.建立項目

1.安裝vuecli

npm install -g @vue/cli
複製代碼

2.建立項目

vue create hello-world
複製代碼

@vue/cli 4 建立項目

3.目錄文件修改建立

• build 打包時使用的腳本程序
• examples demo項目路徑
• packages 組件目錄
• src 主程序目錄
• gitignore git上傳忽略項
• npmignore npm上傳忽略項
• vue.config.js 項目（webpack）配置文件

二.項目開發

1.在src目錄下建立index.js文件

//讀取packages目錄下的文件
const modulesFiles = require.context('../packages', true, /\.js$/)

// 定義 install 方法
const install = function(Vue) {
  if (install.installed) return
  install.installed = true
  //遍歷modulesFiles，並註冊到vue實例中，名是組件內default.name
  modulesFiles.keys().reduce((modules, modulePath) => {
    const value = modulesFiles(modulePath)
    Vue.component(value.default.name, value.default || value)
  })
}

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

export default { install }
複製代碼

這樣就會自動註冊packages下全部的組件

2.組件國際化

vue add i18n
複製代碼

在src下建立locales目錄，建立cn.js和en.js

const cn = {
  //國際化的屬性值
}
export default cn
複製代碼

3.打包命令

編輯package.json

{  
  //組件名
  "name": "hades-ui",
  //版本
  "version": "0.1.0",
  "private": false,
  "scripts": {
    //打包命令
    "lib": "vue-cli-service build --target lib --name hades-ui --dest lib src/index.js && node ./build/i18n.js"
  },
  //主程序路徑
  "main": "liib/hades-ui.umd.min.js",
  "descriptiion": "this is a vue ui",
  "license": "MIT"
}
複製代碼

編輯國際化打包程序，在build目錄下建立i18n.js，拷貝2個語言包到lib下

const fs = require('fs')
fs.mkdirSync('./lib/locales')
fs.copyFileSync('./src/locales/cn.js', './lib/locales/cn.js')
fs.copyFileSync('./src/locales/en.js', './lib/locales/en.js')
複製代碼

三.上傳項目

1.配置npm上傳忽略項

建立.npmignore文件

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

# local env files
.env.local
.env.*.local

# Log files
npm-debug.log*
yarn-debug.log*
yarn-error.log*

# Editor directories and files
.idea
.vscode
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw*
複製代碼

2.登陸帳號

npm login
複製代碼

3.上傳項目

npm publiish
複製代碼

四.插件使用

1.安裝插件

npm install hades-ui
複製代碼

2.國際化使用

在項目中對應的語言包內插入

import enLocale 'hades-ui/locales/en.js'
const en ={
    ...enLocale
}
export default en
複製代碼

參考樣例

demo項目