vue插件开发详解
2020/3/31 11:02:49
本文主要是介绍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 复制代码
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 复制代码
参考样例
这篇关于vue插件开发详解的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-10-04package.json 文件位置在哪?-icode9专业技术文章分享
- 2024-10-01Craco.js学习:从入门到实践指南
- 2024-10-01Create-React-App学习:入门与实践指南
- 2024-10-01CSS-in-JS学习:从入门到实践指南
- 2024-09-30JSX语法学习:从入门到初步掌握
- 2024-09-30Mock.js学习:入门教程与实战演练
- 2024-09-30React Hooks学习:从入门到实践
- 2024-09-30受控组件学习:React中的基础入门教程
- 2024-09-29JS定时器教程:初学者必看指南
- 2024-09-29JS对象教程:初学者的全面指南