Detailed explanation of how to compile vue without using webpack

In the process of using vue.js, we often see some operations that require webpack packaging and compilation, making vue.js more convenient to be introduced and used. However, for some developers, they prefer to use vue.js directly without spending too much effort on packaging and compilation. So can this requirement be passed? The answer is yes.

1. Introducing vue.js

Without compiling with webpack, we need to intuitively introduce vue.js into our project. This can be introduced through CDN. We can add the following code directly in html:

It should be noted that you need to change the import path according to your project requirements and the version of vue.js. version number.

Then you can happily start using vue.js.

2. Use of components

When using vue.js, we can divide the project into multiple reusable parts by defining components. We can also use components without compiling with webpack.

We can define and introduce components directly in the html file, for example:

At this time, we have defined a component namedmy-component, and Register it viaVue.component. In html files, we can use this component directly.

Simply put, global components can be registered and used in html files.

3. Single component file

Although we can directly define components in html files without compiling with webpack, when the project becomes more complex, the number of components becomes Too often, this approach is not conducive to maintenance and reuse. At this time, we can write each component separately in a vue file and introduce the component through the