Shulou(Shulou.com)05/31 Report--

This article mainly introduces how to encapsulate a plug-in to facilitate the use of webSQL in vue related knowledge, the content is detailed and easy to understand, simple and fast operation, with a certain reference value, I believe that everyone after reading this article on how to encapsulate a plug-in to facilitate the use of webSQL in vue will have a harvest, let's take a look at it.

Sort out your needs before you have a goal.

Initialization of database

As for the database, it is necessary to have an initialization process, first of all, to build the database and table, to add the initial data, and then to make it easy to use.

If the database is not open and the table is not created, how do you increase the data?

The place where initialization is done in vue is in main.js, while in main.js, plug-ins are generally used, such as Vuex.

Then we can also imitate the webSQL management class library into the form of plug-ins, and then send a package on npm by the way. This makes it easy to do version management.

Unified version

Because this class library is used in several projects, the unified version becomes a problem. If one place has changed, what about the rest? It's a headache for the code to disagree. So you need to send it to npm.

Since the package is to be sent on npm, the project structure needs to be changed.

Project structure

Example

Is to change src to example, well, I don't know why I want to change it like this, but that's what the clearance strategy says.

Then change the vue.config.js so that the project can start normally.

/ / vue.config.jsmodule.exports = {publicPath: process.env.NODE_ENV = = 'production'?' / vue-web-storage/':'/', / / add the examples directory to the new page pages: {index: {/ / page entry entry: 'examples/main.js', / / template source template:' public/index.html' / / output file name filename: 'index.html'}

Packages

This is the code that stores the package to be sent. Here we plan to do three kinds of operation class libraries, which are indexedDB, webSQL and localstrorage. Because each class library is relatively small, making three packages is a bit of a waste, so they are put together.

Create three separate folders, with index.js as the main function and install as the function to put the plug-in.

The index.js in the root folder wraps these three. Packaging is like packaging only one js file.

Import webSQLVue from'. / vue-webSQL/install'import webSQLHelp from'. / vue-webSQL/index'export {webSQLVue, / / plug-ins installed in main webSQLHelp / / directly use the wrapper function}

It is probably OK to do so. Two classes are made here, one is a plug-in for vue, and the other is a native wrapper class. Both are provided. You can use whichever cause is used.

.npmignore

The configuration file for npm, similar to the .gitignore file, excludes files that do not need to be sent.

.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

You need to set up various instructions for sending the package here, including package name, version, description, copyright agreement (open source agreement), author, etc.

Each release has to change the version number, the version number does not correspond to will be wrong.

{"name": "vue-web-storage", "version": "0.1.0", "description": "indexedDB and webSQL are encapsulated based on Promise to make plug-ins for vue3, which are easy to use." , "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"]}

First, sign up for an account, then verify the mailbox, and then check to see if you can repeat the name. And then there's a trip to the pit.

First, package locally, and then log in to npm to send the package.

Packing

Remember the beginning of the lib in package.json? That's for packing, so we can yarn lib it.

If all goes well, this is it:

Packing

The file generated here is the file corresponding to main in package.json.

Log in to npm

If you don't have an account, you need to register one on npmjs.com, which is quite convenient, and then log in with npm login.

Modify the warehouse

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

Publish

Npm publish

If all goes well, the release can be successful.

If you don't make a mistake, ask du Niang.

New account can only send one package, if you want to send a second package, you need to do account conversion.

This is the end of the article on "how to encapsulate a plug-in that makes it easy to use webSQL in vue". Thank you for reading! I believe that everyone has a certain understanding of "how to encapsulate a plug-in that is convenient to use webSQL in vue". If you want to learn more, you are welcome to follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.