十年网站开发经验 + 多家企业客户 + 靠谱的建站团队
量身定制 + 运营维护+专业推广+无忧售后,网站问题一站解决
这篇文章主要介绍了如何封装一个方便在vue里面使用webSQL的插件的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇如何封装一个方便在vue里面使用webSQL的插件文章都会有所收获,下面我们一起来看看吧。
在成都网站设计、成都做网站、外贸网站建设中从网站色彩、结构布局、栏目设置、关键词群组等细微处着手,突出企业的产品/服务/品牌,帮助企业锁定精准用户,提高在线咨询和转化,使成都网站营销成为有效果、有回报的无锡营销推广。创新互联建站专业成都网站建设10余年了,客户满意度97.8%,欢迎成都创新互联客户联系。
先理清需求,而后才好有个目标。
数据库嘛,必然需要一个初始化的过程,首先要建库建表,增加初始数据,而后才方便使用。
假如数据库还没打开,表也没有建立,那么怎样增加数据呢?
而在vue里面时候做初始化的地方是在main.js,而在main.js里面,一般都是使用插件的形式,比方Vuex等。
那么我们也可以模仿一下,把webSQL的管理类库做成插件的形式,而后顺便在npm上面发个包。这样便于做版本管理。
由于有几个项目里面都使用了这个类库,于是统一版本就成了问题,一个地方改了,其余地方怎样办?代码不同意是很头疼滴。所以需要发到npm上面。
由于要在npm上面发包,所以项目结构需要改一下。
项目结构
example
就是把 src 改成 example,好吧,我也不知道为啥要这么改,反正通关攻略是这么写的。
而后要改一下vue.config.js,这样项目才能正常启动。
// vue.config.jsmodule.exports = { publicPath: process.env.NODE_ENV === 'production' ? '/vue-web-storage/' : '/', // 将 examples 目录增加为新的页面 pages: { index: { // page 的入口 entry: 'examples/main.js', // 模板来源 template: 'public/index.html', // 输出文件名 filename: 'index.html' } }}
packages
这个是存放要发包的代码。这里打算做三种操作类库,分别是indexedDB、webSQL和localstrorage。由于每个类库都比较小,做成三个包有点白费的感觉,所以就放在一起了。
建立三个单独的文件夹,index.js是主函数,install是放插件的函数。
根文件夹的index.js是把这三个给包装起来。打包如同只能对一个js文件进行打包。
import webSQLVue from './vue-webSQL/install'import webSQLHelp from './vue-webSQL/index'export { webSQLVue, // 在main里面安装的插件 webSQLHelp // 直接使用封装函数}
大概这样做即可以。这里做了两个类,一个是vue的插件,一个是原生的封装类。两个都提供,起因用哪个就用哪个吧。
.npmignore
npm 的配置文件,相似于 .gitignore 文件,就是排除掉不需要发包的文件。
.DS_Storenode_modules/examples/packages/public/.gitee/vue.config.jsbabel.config.js*.map*.htmlrun.bat# local env files.env.local.env.*.local# Log filesnpm-debug.log*yarn-debug.log*yarn-error.log*# Editor directories and files.idea.vscode*.suo*.ntvs**.njsproj*.sln*.sw*
package.json
需要在这里设置发包的各种说明,包括包名、版本、形容、版权协议(开源协议)、作者等。
每次发布都有改一下版本号,版本号对应不上也是会报错滴。
{ "name": "vue-web-storage", "version": "0.1.0", "description": "基于 Promise 对indexedDB、webSQL进行封装,做成vue3的插件,便于使用。", "main": "lib/vue-web-storage.umd.js", "private": false, "license": "MIT", "auther": "jin yang (jyk) jyk0013@163.com", "scripts": { "serve": "vue-cli-service serve", "build": "vue-cli-service build", "lib": "vue-cli-service build --target lib --name vue-web-storage --dest lib packages/index.js" }, "dependencies": { "core-js": "^3.6.5", "vue": "^3.0.0" }, "devDependencies": { "@vue/cli-plugin-babel": "~4.5.0", "@vue/cli-service": "~4.5.0", "@vue/compiler-sfc": "^3.0.0" }, "browserslist": [ "> 1%", "last 2 versions", "not dead" ]}
首先要注册一个账号,而后验证邮箱,在而后查一下能否重名。而后就是踩坑之旅。
首先要在本地打包,而后登录npm发包。
还记得 package.json 里面的那个 lib开头的吗?那个就是打包用的,所以我们可以 yarn lib
进行打包。
假如顺利的话,就是这样:
打包
这里生成的文件,就是package.json 里面 main对应的文件。
假如没有账号的话,需要到 npmjs.com 上面注册一个,还是挺方便的,而后 用 npm login 登录
npm config set registry http://registry.npmjs.org
npm publish
假如一切顺利的话,即可以发布成功了。
假如不顺利报错了的话,那就问问度娘。
新账号只能发一个包,假如想发第二个包的话,需要做账号的转换。
关于“如何封装一个方便在vue里面使用webSQL的插件”这篇文章的内容就介绍到这里,感谢各位的阅读!相信大家对“如何封装一个方便在vue里面使用webSQL的插件”知识都有一定的了解,大家如果还想学习更多知识,欢迎关注创新互联行业资讯频道。