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

This article mainly shows you the "vue-cli initialization project with and without a compiler what are the differences", the content is easy to understand, clear, hope to help you solve your doubts, the following let the editor lead you to study and learn the "use vue-cli initialization project with and without a compiler what is the difference between" this article.

When initializing a project with vue-cli, choose the difference between an editor and no editor, as shown in the figure:

The first sentence in the picture is circled in a red box: Runtime+ Compiler:....

Second sentence: Runtime-only:.

From the literal meaning, you can see that during the initialization of the project, if you choose the first line, the generated vue project will have a compiler, and if you choose the second sentence, you will not have a compiler, and they are all the selected runtime versions.

First of all, let's test, if you build a project with vue-cli and select the second line when you encounter the Vue Build option, then the version of vue introduced into your project should be the version of Runtime-only without an editor. Recall the previous article, which version supports the runtime and does not include a compiler?

It can be found that it is vue.runtime.esm.js and vue.runtime.common.js. What's the difference between them?

The former follows the commonjs modularization specification, while the latter supports es6 modularization specification. The latest version of vue-cli builds the vue project using webpack2, while webpack2 supports the above two specifications. If you select the second line when initializing the project with vue-cli, the version introduced in the project is vue.runtime.esm.js or vue.runtime.common.js.

To verify, open package.json in the vue project to view the main property as follows:

If the first line is selected during initialization, the runtime comes with a compiler. Which version of vue is used in the resulting vue project?

Recall from the previous article, which of the eight files supports runtime and comes with a compiler?

You can find that both vue.esm.js and vue.common.js come with compilers and support the runtime, so whichever version you choose is fine.

Let's verify that we look at the main property in the package.json of the installation package of vue in the project generated after selecting the first line:

It turns out that the result is wrong, the main attribute is still vue.runtime.common.js, how can this be? It turns out that after initializing the project, vue-cli modified the alias imported by the vue project. When importing vue in the project, it imported the version pointed to by the alias of vue.

Where did the alias be changed? Modified in webpack.base.conf.js in build in the project, as shown in the figure:

What does that mean?

You can view the webpack document http://www.css88.com/doc/webpack/configuration/resolve/ roughly means that import vue in the project, the imported version is actually the version pointed here, here will override the main attribute in package.json, plus $for exact matching.

These are all the contents of this article entitled "what is the difference between initializing a project with and without a compiler with vue-cli". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, 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.