Shulou(Shulou.com)06/01 Report--

Today, I would like to share with you how to use vue-cli cdn to introduce vue module related knowledge points, the content is detailed, logic is clear, I believe most people still know too much about this knowledge, so share this article for your reference, I hope you can get something after reading this article, let's take a look at it.

First, select the cdn of vue

First of all, we introduce the vue file must be a browser version, at least need to contain the vue runtime source code, that is, we say vue.runtime.min.js this file, then you can search and download on the Internet.

So there are a lot of people asking what's the difference between the runtime source code and the full version.

Our runtime source code lacks a compiler, but the full version has a compiler, because vue-loader has been compiled after template has been compiled, so there is no need to compile again, which means that our runtime source code is even smaller, more related content can be found in the official vue documentation! And if we use bootcdn, the runtime will be smaller.

Second, where does it come from?

By creating a new vue-cli3 project, we introduce the relevant cdn into the head element of public/index.html in the project, as follows:

Vue-app

In the code, we set the crossorigin attribute in the script element. To avoid cross-domain warnings, we can use CORS settings attributes for more information. And in this project, both vue and vue-router are introduced using cdn, reducing a lot of volume.

Third, do you need to delete the import vue statement?

First of all, we do not need to delete this problem, we just need to set the unpackaged vue in webpack to use the cdn introduction module. Of course, it is OK if a partner wants to delete it, but it is generally not recommended, because if you install our project using eslint's editor, it will report errors directly, just some errors like Vue undefined. But we can use window.Vue to call, but it is not recommended here, because if we do so, we will lose syntax reminders. If you have installed typescript, then we have to write additional global types and other related content, so it is recommended not to delete it here.

Then someone will ask, how can we ignore the modules that have been introduced with cdn when they are packaged? For this, we can add the following code to the vue.config.js file:

Module.exports = {configureWebpack: {externals: {vue: 'Vue',' vue-router': 'VueRouter'}

The attribute name in the code is the module name we introduced, and the value is the variable that needs to be replaced, and this value must be the same as that provided in cdn, and this function is to use the externally introduced extension, so that when we are in build, this module, we can look up the relevant content in the webpack external extension.

Note: for the source code, we only changed the "public/index.html" file and configured vue.config.js, but did not modify other code.

IV. Packaging and testing

We packaged the dist folder without using cdn (comment out the code added by vue.config.js and test it):

$vue-cli-service build dist\ js\ chunk-vendors.c79ff8b4.js 114.63 KiB 40.43 KiB dist\ js\ app.dfdf8bae.js 4.71 KiB 2.07 KiB dist\ js\ chunk-7a70a114.6f60ed21.js 0.55 KiB 0.37 KiB dist\ css\ app.7fe16c18.css 0.49 KiB 0.25 KiB dist\ css\ chunk- 7a70a114.98f4dffc.css 0.28 KiB 0.17 KiB

And the venders in this file has 114KB, which contains webpack + vue + vur-router. Dist folder packaged in the case of cdn:

Yarn run v1.17.3 DONE Compiled successfully in 6367ms File Size Gzipped dist\ js\ chunk-vendors.7876bfa1.js 24.21 KiB 8.86 KiB dist\ js\ app.7fb99721.js 4.78 KiB 2.10 KiB dist\ js\ chunk-7a70a114.759e91f3.js 0.55 KiB 0.38 KiB dist Css\ app.7fe16c18.css 0.49 KiB 0.25 KiB dist\ css\ chunk-7a70a114.98f4dffc.css 0.28 KiB 0.17 KiB

At this time, however, venders only has 24KB, which contains only the relevant code of webpack.

These are all the contents of the article "how to introduce the vue module in vue-cli cdn". Thank you for reading! I believe you will gain a lot after reading this article. The editor will update different knowledge for you every day. If you want to learn more knowledge, please pay attention to 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.