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

在成都網(wǎng)站設(shè)計(jì)、成都做網(wǎng)站、外貿(mào)網(wǎng)站建設(shè)中從網(wǎng)站色彩、結(jié)構(gòu)布局、欄目設(shè)置、關(guān)鍵詞群組等細(xì)微處著手，突出企業(yè)的產(chǎn)品/服務(wù)/品牌，幫助企業(yè)鎖定精準(zhǔn)用戶，提高在線咨詢和轉(zhuǎn)化，使成都網(wǎng)站營銷成為有效果、有回報(bào)的無錫營銷推廣。創(chuàng)新互聯(lián)建站專業(yè)成都網(wǎng)站建設(shè)10余年了，客戶滿意度97.8%，歡迎成都創(chuàng)新互聯(lián)客戶聯(lián)系。

需求

先理清需求，而后才好有個(gè)目標(biāo)。

數(shù)據(jù)庫的初始化

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

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

那么我們也可以模仿一下，把webSQL的管理類庫做成插件的形式，而后順便在npm上面發(fā)個(gè)包。這樣便于做版本管理。

統(tǒng)一版本

由于有幾個(gè)項(xiàng)目里面都使用了這個(gè)類庫，于是統(tǒng)一版本就成了問題，一個(gè)地方改了，其余地方怎樣辦？代碼不同意是很頭疼滴。所以需要發(fā)到npm上面。

可以發(fā)包的項(xiàng)目

由于要在npm上面發(fā)包，所以項(xiàng)目結(jié)構(gòu)需要改一下。

項(xiàng)目結(jié)構(gòu)

• example
  就是把 src 改成 example，好吧，我也不知道為啥要這么改，反正通關(guān)攻略是這么寫的。
  而后要改一下vue.config.js，這樣項(xiàng)目才能正常啟動(dòng)。

// 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
  這個(gè)是存放要發(fā)包的代碼。這里打算做三種操作類庫，分別是indexedDB、webSQL和localstrorage。由于每個(gè)類庫都比較小，做成三個(gè)包有點(diǎn)白費(fèi)的感覺，所以就放在一起了。

建立三個(gè)單獨(dú)的文件夾，index.js是主函數(shù)，install是放插件的函數(shù)。

根文件夾的index.js是把這三個(gè)給包裝起來。打包如同只能對一個(gè)js文件進(jìn)行打包。

import webSQLVue from './vue-webSQL/install'import webSQLHelp from './vue-webSQL/index'export {   webSQLVue, // 在main里面安裝的插件  webSQLHelp // 直接使用封裝函數(shù)}

大概這樣做即可以。這里做了兩個(gè)類，一個(gè)是vue的插件，一個(gè)是原生的封裝類。兩個(gè)都提供，起因用哪個(gè)就用哪個(gè)吧。

• .npmignore
  npm 的配置文件，相似于 .gitignore 文件，就是排除掉不需要發(fā)包的文件。

.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
  需要在這里設(shè)置發(fā)包的各種說明，包括包名、版本、形容、版權(quán)協(xié)議（開源協(xié)議）、作者等。
  每次發(fā)布都有改一下版本號，版本號對應(yīng)不上也是會報(bào)錯(cuò)滴。

{  "name": "vue-web-storage",  "version": "0.1.0",  "description": "基于 Promise 對indexedDB、webSQL進(jìn)行封裝，做成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 上面發(fā)布項(xiàng)目

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

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

打包

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

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

打包

這里生成的文件，就是package.json 里面 main對應(yīng)的文件。

登錄 npm

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

修改倉庫

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

發(fā)布

npm publish

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

假如不順利報(bào)錯(cuò)了的話，那就問問度娘。

新賬號只能發(fā)一個(gè)包，假如想發(fā)第二個(gè)包的話，需要做賬號的轉(zhuǎn)換。

關(guān)于“如何封裝一個(gè)方便在vue里面使用webSQL的插件”這篇文章的內(nèi)容就介紹到這里，感謝各位的閱讀！相信大家對“如何封裝一個(gè)方便在vue里面使用webSQL的插件”知識都有一定的了解，大家如果還想學(xué)習(xí)更多知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。