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项目