阿坝州网站建设公司

如何封装一个方便在vue里面使用webSQL的插件

这篇文章主要介绍了如何封装一个方便在vue里面使用webSQL的插件的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇如何封装一个方便在vue里面使用webSQL的插件文章都会有所收获，下面我们一起来看看吧。

在成都网站设计、成都做网站、外贸网站建设中从网站色彩、结构布局、栏目设置、关键词群组等细微处着手，突出企业的产品/服务/品牌，帮助企业锁定精准用户，提高在线咨询和转化，使成都网站营销成为有效果、有回报的无锡营销推广。创新互联建站专业成都网站建设10余年了，客户满意度97.8%，欢迎成都创新互联客户联系。

需求

先理清需求，而后才好有个目标。

数据库的初始化

数据库嘛，必然需要一个初始化的过程，首先要建库建表，增加初始数据，而后才方便使用。
假如数据库还没打开，表也没有建立，那么怎样增加数据呢？

而在vue里面时候做初始化的地方是在main.js，而在main.js里面，一般都是使用插件的形式，比方Vuex等。

那么我们也可以模仿一下，把webSQL的管理类库做成插件的形式，而后顺便在npm上面发个包。这样便于做版本管理。

统一版本

由于有几个项目里面都使用了这个类库，于是统一版本就成了问题，一个地方改了，其余地方怎样办？代码不同意是很头疼滴。所以需要发到npm上面。

可以发包的项目

由于要在npm上面发包，所以项目结构需要改一下。

如何封装一个方便在vue里面使用webSQL的插件

项目结构

  • 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 上面发布项目

首先要注册一个账号，而后验证邮箱，在而后查一下能否重名。而后就是踩坑之旅。

首先要在本地打包，而后登录npm发包。

打包

还记得 package.json 里面的那个 lib开头的吗？那个就是打包用的，所以我们可以 yarn lib 进行打包。

假如顺利的话，就是这样：

如何封装一个方便在vue里面使用webSQL的插件

打包

这里生成的文件，就是package.json 里面 main对应的文件。

登录 npm

假如没有账号的话，需要到 npmjs.com 上面注册一个，还是挺方便的，而后 用 npm  login 登录

修改仓库

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

发布

npm publish

假如一切顺利的话，即可以发布成功了。

假如不顺利报错了的话，那就问问度娘。

新账号只能发一个包，假如想发第二个包的话，需要做账号的转换。

关于“如何封装一个方便在vue里面使用webSQL的插件”这篇文章的内容就介绍到这里，感谢各位的阅读！相信大家对“如何封装一个方便在vue里面使用webSQL的插件”知识都有一定的了解，大家如果还想学习更多知识，欢迎关注创新互联行业资讯频道。


文章名称：如何封装一个方便在vue里面使用webSQL的插件
文章位置：http://azwzsj.com/article/pcgcjd.html

其他资讯