Explication détaillée de la façon de compiler vue sans utiliser webpack

Dans le processus d'utilisation de vue.js, nous voyons souvent certaines opérations qui nécessitent un packaging et une compilation de webpacks, ce qui rend vue.js plus pratique à introduire et à utiliser. Cependant, certains développeurs préfèrent utiliser vue.js directement sans consacrer trop d'efforts à l'empaquetage et à la compilation. Alors, cette exigence peut-elle être satisfaite ? La réponse est oui.

1. Présentation de vue.js

Sans compiler avec webpack, nous devons introduire intuitivement vue.js dans notre projet. Cela peut être introduit via CDN Nous pouvons ajouter le code suivant directement en HTML :

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

Il est à noter que vous devez modifier le numéro de version dans le chemin d'introduction en fonction des exigences de votre projet et de la version de vue.js.

Ensuite, vous pouvez commencer à utiliser vue.js avec plaisir.

2. Utilisation de composants

Lors de l'utilisation de vue.js, nous pouvons diviser le projet en plusieurs parties réutilisables en définissant des composants. Nous pouvons également utiliser des composants sans compiler avec webpack.

Nous pouvons définir et introduire des composants directement dans le fichier html, par exemple :

<my-component></my-component>

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

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

A ce moment, nous avons défini un composant nommé mon-composant et l'avons passé via Vue.component Enregistrez-le. Dans les fichiers html, nous pouvons utiliser ce composant directement. my-component的组件，并通过Vue.component注册它。在html文件中，我们可以直接使用这个组件。

简单来说，可以在html文件中注册和使用全局组件。

3. 单组件文件

虽然在不使用webpack编译的情况下我们可以直接在html文件中定义组件，但是当项目愈发复杂，组件数量变得众多时，这样的方式不利于维护和复用。这时候，我们可以将每个组件单独写在一个vue文件中，通过<script>标签将组件引入。

例如，一个名为hello-world.vue的组件文件：

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

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

然后，我们可以通过以下方式来引入和使用这个组件：

  


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


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

即可愉快的使用这个组件。

4. CSS样式

如果你在使用单组件文件时遇到了样式问题，套用传统的<style>标签来添加样式就好了。

例如，在hello-world.vue

Fichier de composant unique🎜🎜🎜Bien que nous puissions définir directement des composants dans des fichiers html sans compiler avec webpack, lorsque le projet devient plus complexe et que le nombre de composants devient grand, cette méthode n'est pas propice à l'entretien et à la réutilisation. À ce stade, nous pouvons écrire chaque composant séparément dans un fichier vue et introduire le composant via la balise <script>. 🎜🎜Par exemple, un fichier de composant nommé hello-world.vue : 🎜

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

Copier après la connexion
🎜 Ensuite, nous pouvons introduire et utiliser ce composant de la manière suivante : 🎜rrreee🎜Vous pouvez utiliser ce composant avec plaisir . 🎜
🎜Styles CSS🎜🎜🎜Si vous rencontrez des problèmes de style lors de l'utilisation de fichiers à composant unique, utilisez simplement la balise traditionnelle <style> pour ajouter des styles. 🎜🎜Par exemple, dans le composant hello-world.vue, on peut ajouter le style suivant : 🎜rrreee🎜En bref, même si dans de nombreux tutoriels, l'utilisation de webpack sera impliquée lors de l'introduction de l'utilisation de vue.js, mais pour les développeurs, vous pouvez volontiers utiliser vue.js sans utiliser webpack. 🎜

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!