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

這篇文章主要介紹了如何封裝一個方便在vue里面使用webSQL的插件的相關知識，內容詳細易懂，操作簡單快捷，具有一定借鑒價值，相信大家閱讀完這篇如何封裝一個方便在vue里面使用webSQL的插件文章都會有所收獲，下面我們一起來看看吧。

需求

先理清需求，而后才好有個目標。

數據庫的初始化

數據庫嘛，必然需要一個初始化的過程，首先要建庫建表，增加初始數據，而后才方便使用。
假如數據庫還沒打開，表也沒有建立，那么怎樣增加數據呢？

而在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 上面發布項目

首先要注冊一個賬號，而后驗證郵箱，在而后查一下能否重名。而后就是踩坑之旅。

首先要在本地打包，而后登錄npm發包。

打包

還記得 package.json 里面的那個 lib開頭的嗎？那個就是打包用的，所以我們可以 yarn lib 進行打包。

假如順利的話，就是這樣：

打包

這里生成的文件，就是package.json 里面 main對應的文件。

登錄 npm

假如沒有賬號的話，需要到 npmjs.com 上面注冊一個，還是挺方便的，而后 用 npm  login 登錄

修改倉庫

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

發布

npm publish

假如一切順利的話，即可以發布成功了。

假如不順利報錯了的話，那就問問度娘。

新賬號只能發一個包，假如想發第二個包的話，需要做賬號的轉換。

關于“如何封裝一個方便在vue里面使用webSQL的插件”這篇文章的內容就介紹到這里，感謝各位的閱讀！相信大家對“如何封裝一個方便在vue里面使用webSQL的插件”知識都有一定的了解，大家如果還想學習更多知識，歡迎關注億速云行業資訊頻道。