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:

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.js"></script>

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:

<my-component></my-component>

<script>
Vue.component('my-component', {
  template: '<div>A custom component!</div>'
})

new Vue({
  el: '#app'
})
</script>

At this time, we have defined a component named my-component, and Register it via Vue.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 <script> tag.

For example, a component file named hello-world.vue:

<template>
  <div>Hello, {{ name }}!</div>
</template>

<script>
export default {
  data() {
    return {
      name: 'world'
    }
  }
}
</script>

Then, we can introduce and use this component in the following ways:

  


<script src="https://cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.js"></script>


<script>
new Vue({
  el: '#app'
})

can happily use this component.

4. CSS Styles

If you encounter styling issues when using a single component file, apply the traditional <style> tag to add styles Enough.

For example, in the hello-world.vue component, we can add the following style:

<style>
div {
  color: green;
}
</style>

In short, although in many tutorials, the use of vue.js is introduced The use of webpack is often involved, but for developers, you can happily use vue.js without using webpack.

The above is the detailed content of Detailed explanation of how to compile vue without using webpack. For more information, please follow other related articles on the PHP Chinese website!