Bei der Verwendung von vue.js sehen wir häufig einige Vorgänge, die das Packen und Kompilieren von Webpacks erfordern, wodurch die Einführung und Verwendung von vue.js bequemer wird. Einige Entwickler ziehen es jedoch vor, vue.js direkt zu verwenden, ohne zu viel Aufwand für die Verpackung und Kompilierung aufzuwenden. Kann diese Anforderung also erfüllt werden? Die Antwort ist ja.
Ohne mit Webpack zu kompilieren, müssen wir vue.js intuitiv in unser Projekt einführen. Dies kann über CDN eingeführt werden. Wir können den folgenden Code direkt in HTML hinzufügen:
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.js"></script>
Es ist zu beachten, dass Sie die Versionsnummer im Einführungspfad entsprechend Ihren Projektanforderungen und der Version von vue.js ändern müssen.
Dann können Sie vue.js problemlos nutzen.
Bei der Verwendung von vue.js können wir das Projekt durch die Definition von Komponenten in mehrere wiederverwendbare Teile aufteilen. Wir können Komponenten auch ohne Kompilierung mit Webpack verwenden.
Wir können Komponenten direkt in der HTML-Datei definieren und einführen, zum Beispiel:
<my-component></my-component>
<script>
Vue.component('my-component', {
template: '<div>A custom component!</div>'
})
new Vue({
el: '#app'
})
</script>Zu diesem Zeitpunkt haben wir eine Komponente namens my-component definiert und sie über Vue.component übergeben Registrieren Sie es. In HTML-Dateien können wir diese Komponente direkt verwenden. my-component的组件，并通过Vue.component注册它。在html文件中，我们可以直接使用这个组件。
简单来说，可以在html文件中注册和使用全局组件。
虽然在不使用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' })
即可愉快的使用这个组件。
如果你在使用单组件文件时遇到了样式问题，套用传统的<style>标签来添加样式就好了。
例如，在hello-world.vue
<script> einführen. 🎜🎜Zum Beispiel eine Komponentendatei mit dem Namen hello-world.vue: 🎜<style>
div {
color: green;
}
</style><style>-Tag, um Stile hinzuzufügen. 🎜🎜Zum Beispiel können wir in der Komponente hello-world.vue den folgenden Stil hinzufügen: 🎜rrreee🎜Kurz gesagt, obwohl in vielen Tutorials die Verwendung von Webpack in die Einführung einbezogen wird von vue.js, aber für Entwickler können Sie vue.js problemlos verwenden, ohne Webpack zu verwenden. 🎜Das obige ist der detaillierte Inhalt vonDetaillierte Erklärung zum Kompilieren von Vue ohne Verwendung von Webpack. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
