Heim  >  Artikel  >  Web-Frontend  >  Eine unverzichtbare Kurzanleitung zur Entwicklung für VUE3-Anfänger

Eine unverzichtbare Kurzanleitung zur Entwicklung für VUE3-Anfänger

WBOY
WBOYOriginal
2023-06-15 16:38:052021Durchsuche

VUE3 Ein unverzichtbarer Leitfaden für die schnelle Entwicklung für Anfänger.

Vue ist ein beliebtes JavaScript-Framework. Aufgrund seiner Benutzerfreundlichkeit, seines hohen Anpassungsgrads und seines schnellen Entwicklungsmodus ist es in der Front-End-Entwicklung beliebt. Das neueste Vue3 führt leistungsstärkere Funktionen ein, darunter Leistungsoptimierung, TypeScript-Unterstützung, Composition API, bessere benutzerdefinierte Renderer usw. Dieser Artikel bietet eine kurze Entwicklungsanleitung für Vue3-Anfänger, die Ihnen den schnellen Einstieg in die Vue3-Entwicklung erleichtert.

  1. Vue3 installieren

Bevor wir mit der Vue3-Entwicklung beginnen, müssen wir zunächst Vue3 installieren. Sie können Vue3 über den folgenden Befehl im Projekt installieren:

npm install vue@next

Wenn Sie CDN verwenden, um Vue3 einzuführen, müssen Sie den folgenden Code verwenden:

<script src="https://unpkg.com/vue@next"></script>
  1. Erstellen Sie eine Vue3-Anwendung

Nach der Installation von Vue3 können wir beginnen Erstellen der Anwendung. Vue3 bietet Vue-CLI-Tools, die uns helfen, Vue3-Anwendungen schnell zu erstellen und zu konfigurieren.

Um Vue CLI zu installieren, können Sie den folgenden Befehl verwenden:

npm install -g @vue/cli

Der Befehl zum Erstellen eines neuen Projekts lautet wie folgt:

vue create my-project
  1. Verwendung von Vue3-Komponenten

Vue3 verwendet einen komplett neu geschriebenen Renderer, Sie müssen also bezahlen Achten Sie bei der Verwendung von Vue3-Komponenten auf etwas. Das Folgende ist ein Beispiel für eine Vue3-Komponente:

// HelloWorld.vue
<template>
  <div>
    <h1>Hello world!</h1>
  </div>
</template>

<script>
import { defineComponent } from 'vue';

export default defineComponent({
  name: 'HelloWorld',
});
</script>

Es ist erwähnenswert, dass die Funktion defineComponent verwendet werden muss, um die Komponente in Vue3 zu definieren, anstatt das Vue.extend in Vue2. defineComponent函数来定义组件,而非Vue2中的Vue.extend

  1. 使用Composition API

Composition API是Vue3中新增的一项功能,它可以让我们更好地组织和重用组件逻辑代码。以下是一个例子:

// HelloWorld.vue
<template>
  <div>
    <h1>Hello world!</h1>
    <p>Current count is: {{ count }}</p>
    <button @click="incrementCount">Increment Count</button>
  </div>
</template>

<script>
import { defineComponent, ref } from 'vue';

export default defineComponent({
  name: 'HelloWorld',
  setup() {
    const count = ref(0);

    const incrementCount = () => {
      count.value++;
    };

    return {
      count,
      incrementCount,
    };
  },
});
</script>

可以看到,在Composition API中,我们可以将逻辑代码放在setup函数中,然后将变量和函数通过return语句暴露给模板。

  1. 使用Vue3路由

Vue3的路由器包含了一些新的功能和改动,以下是一个例子:

// router/index.js
import { createRouter, createWebHistory } from 'vue-router';
import Home from '../views/Home.vue';
import About from '../views/About.vue';

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home,
  },
  {
    path: '/about',
    name: 'About',
    component: About,
  },
];

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes,
});

export default router;

与Vue2中的路由器相比,Vue3中的路由器的使用方式略有改变。需要使用createRoutercreateWebHistory函数来创建路由器。

  1. 使用Vue3状态管理

Vue3中的状态管理也有所改变,以下是一个例子:

// store/index.js
import { createStore } from 'vuex';

export default createStore({
  state() {
    return {
      count: 0,
    };
  },
  mutations: {
    increment(state) {
      state.count++;
    },
  },
  actions: {
    increment(context) {
      context.commit('increment');
    },
  },
  getters: {
    count(state) {
      return state.count;
    },
  },
});

可以看到,在Vue3中,我们需要使用createStore函数来创建一个新的状态管理实例。同时,需要在actions中使用context参数来调用mutations

    Composition API verwenden
    1. Composition API ist eine neue Funktion in Vue3, die es uns ermöglicht, Komponentenlogikcode besser zu organisieren und wiederzuverwenden. Das Folgende ist ein Beispiel:
    rrreee

    Sie können sehen, dass wir in der Composition API den Logikcode in die Funktion setup einfügen und dann die Variablen und Funktionen über return-Anweisung Der Vorlage zugänglich gemacht.

      🎜Verwendung von Vue3-Routing🎜🎜🎜Der Router von Vue3 enthält einige neue Funktionen und Änderungen, hier ist ein Beispiel: 🎜rrreee🎜Verwendung von Routern in Vue3 im Vergleich zu Routern in Vue2 Der Ansatz hat sich leicht geändert. Sie müssen die Funktionen createRouter und createWebHistory verwenden, um einen Router zu erstellen. 🎜
        🎜Vue3-Zustandsverwaltung verwenden🎜🎜🎜Die Zustandsverwaltung in Vue3 hat sich ebenfalls geändert. Das Folgende ist ein Beispiel: 🎜rrreee🎜Wie Sie sehen können, müssen wir in Vue3 verwenden createStore-Funktion zum Erstellen einer neuen Statusverwaltungsinstanz. Gleichzeitig müssen Sie den Parameter <code>context in actions verwenden, um mutations aufzurufen. 🎜🎜🎜Zusammenfassung🎜🎜🎜Vue3 ist ein leistungsstarkes und benutzerfreundliches JavaScript-Framework, mit dem webbasierte Anwendungen sehr schnell entwickelt werden können. Durch die Installation von Vue3, die Erstellung von Vue3-Anwendungen, die Verwendung von Vue3-Komponenten, der Composition API, dem Vue3-Routing und der Vue3-Statusverwaltung können wir die Eigenschaften und praktischen Anwendungsmethoden von Vue3 besser verstehen und wertvolle Erfahrungen und Kenntnisse für das weitere Erlernen der Vue3-Entwicklung sammeln. 🎜

Das obige ist der detaillierte Inhalt vonEine unverzichtbare Kurzanleitung zur Entwicklung für VUE3-Anfänger. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn