vue中怎么封裝一個(gè)webSQL插件

這篇文章主要講解了“vue中怎么封裝一個(gè)webSQL插件”，文中的講解內(nèi)容簡(jiǎn)單清晰，易于學(xué)習(xí)與理解，下面請(qǐng)大家跟著小編的思路慢慢深入，一起來(lái)研究和學(xué)習(xí)“vue中怎么封裝一個(gè)webSQL插件”吧！

需求

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

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

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

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

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

統(tǒng)一版本

由于有幾個(gè)項(xiàng)目里面都使用了這個(gè)類庫(kù)，于是統(tǒng)一版本就成了問(wèn)題，一個(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 目錄增加為新的頁(yè)面  pages: {    index: {      // page 的入口      entry: 'examples/main.js',      // 模板來(lái)源      template: 'public/index.html',      // 輸出文件名      filename: 'index.html'    }  }}

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

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

根文件夾的index.js是把這三個(gè)給包裝起來(lái)。打包如同只能對(duì)一個(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ā)包的各種說(shuō)明，包括包名、版本、形容、版權(quán)協(xié)議（開(kāi)源協(xié)議）、作者等。
  每次發(fā)布都有改一下版本號(hào)，版本號(hào)對(duì)應(yīng)不上也是會(huì)報(bào)錯(cuò)滴。

{  "name": "vue-web-storage",  "version": "0.1.0",  "description": "基于 Promise 對(duì)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)目

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

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

打包

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

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

打包

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

登錄 npm

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

為什么要使用Vue

Vue是一款友好的、多用途且高性能的JavaScript框架，使用vue可以創(chuàng)建可維護(hù)性和可測(cè)試性更強(qiáng)的代碼庫(kù)，Vue允許可以將一個(gè)網(wǎng)頁(yè)分割成可復(fù)用的組件，每個(gè)組件都包含屬于自己的HTML、CSS、JavaScript，以用來(lái)渲染網(wǎng)頁(yè)中相應(yīng)的地方，所以越來(lái)越多的前端開(kāi)發(fā)者使用vue。

感謝各位的閱讀，以上就是“vue中怎么封裝一個(gè)webSQL插件”的內(nèi)容了，經(jīng)過(guò)本文的學(xué)習(xí)后，相信大家對(duì)vue中怎么封裝一個(gè)webSQL插件這一問(wèn)題有了更深刻的體會(huì)，具體使用情況還需要大家實(shí)踐驗(yàn)證。這里是億速云，小編將為大家推送更多相關(guān)知識(shí)點(diǎn)的文章，歡迎關(guān)注！