Lassen Sie uns über die Kernkonzepte des Vue-Applets sprechen

Mit der Popularität des mobilen Internets und dem Aufkommen von Miniprogrammen haben in den letzten Jahren immer mehr Unternehmen begonnen, in die Entwicklung von Miniprogrammen zu investieren. Bei der Entwicklung kleiner Programme ist Vue.js als leichtgewichtiges Frontend-Framework weithin für seine Flexibilität und einfache Erlernbarkeit bekannt. In diesem Artikel werden die Einstellungen des Vue-Applets vorgestellt, um Entwicklern ein besseres Verständnis der Kernkonzepte des Vue-Applets zu ermöglichen.

1. Projektinitialisierung

Bevor wir beginnen, müssen wir Vue CLI 3 installieren, ein offiziell von Vue.js bereitgestelltes Gerüsttool zum schnellen Erstellen von Vue-Projekten. Geben Sie zur Installation den folgenden Befehl im Terminal ein:

npm install -g @vue/cli

Nach der Installation können wir über Vue CLI 3 ein Vue-Applet erstellen.

1. Projekt erstellen

Geben Sie den folgenden Befehl im Terminal ein, um ein neues Vue-Applet-Projekt zu erstellen:

vue create my-miniapp

Nachdem Sie den obigen Befehl eingegeben haben, müssen Sie die für das aktuelle Projekt erforderlichen Funktionen auswählen, z. B. Babel, Router, Vuex, CSS-Präprozessoren usw. Hier wählen wir die Standardfunktionen aus und drücken die Eingabetaste.

2. Projekt starten

Führen Sie den folgenden Befehl im Projektstammverzeichnis aus:

npm run serve

Nach dem Start des Projekts können wir über http://localhost:8080 im Browser auf die Homepage des Vue-Applets zugreifen. http://localhost:8080 来访问Vue小程序的首页。

二、目录结构

通过以上步骤，我们已经成功地创建了一个Vue小程序。那么，接下来我们需要了解一下Vue小程序项目的目录结构。

├── public              // 静态资源文件目录
│   ├── favicon.ico    // 网站图标
│   └── index.html     // 首页入口文件

├── src                 // 源代码目录
│   ├── assets          // 资源文件目录
│   ├── components      // 组件文件目录
│   ├── router          // 路由文件目录
│   ├── store           // Vuex的store文件目录
│   ├── views           // 页面文件目录
│   ├── App.vue         // App入口文件
│   └── main.js         // 项目入口文件

├── .browserslistrc      // 浏览器兼容性配置文件
├── babel.config.js      // Babel配置文件
├── package.json         // 项目配置文件
└── README.md            // 项目说明文件

三、核心概念

在了解了项目目录结构之后，接下来我们需要学习一些Vue小程序的核心概念。

1. 组件

Vue小程序中的组件可以说是一个非常重要的概念，它将一个页面拆分成若干个功能独立的组件，使得代码更加简洁、易于维护。在Vue小程序中，每个组件由一个Vue实例构成，一个Vue实例可以包含若干个组件。

我们可以在 src/components 目录下创建一个新的组件，例如： src/components/HelloWorld.vue 。该组件可以包含一个简单的 template 和 script ：

<template>
  <div>{{ msg }}</div>
</template>

<script>
export default {
  data() {
    return {
      msg: 'Hello, World!'
    }
  }
}
</script>

这个组件的 template 中包含一个简单的文本框，显示 "Hello, World!" 的内容。这个组件的 script 中定义了一个 data 属性，即 msg ，并将它的默认值设置为 "Hello, World!" 。

为了在一个页面中引入组件，我们可以在目标页面的 template 标签中使用 <hello-world></hello-world> 的语法来引入刚刚创建的组件。

2. 路由

在Vue小程序中，通过引入路由，我们可以使得页面具有跳转的能力。Vue小程序内置了Vue Router 插件，使得路由设置变得非常简单。

在 src/router 目录下创建一个新的路由文件，例如： src/router/index.js 。该路由文件中包含了一个简单的路由设置：

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: 'home',
    component: () => import('@/views/Home.vue')
  },
  {
    path: '/about',
    name: 'about',
    component: () => import('@/views/About.vue')
  }
]

const router = new VueRouter({
  mode: 'history',
  routes
})

export default router

上面的路由设置中，我们设置了两个路由节点，一个是 / (即应用的首页)，另一个是 /about 。每个路由节点都需要设置一个 path 属性、一个 name 属性和一个 component 属性。其中，path 属性表示该路由的 URL 地址，name 属性则是该路由的名称，component 属性则是该路由对应的组件名称。除此之外，我们还可以设置路由的跳转方式。在上面的路由设置中，我们使用了 mode: 'history'

2. Verzeichnisstruktur #🎜🎜##🎜🎜#Durch die oben genannten Schritte haben wir erfolgreich ein Vue-Applet erstellt. Als nächstes müssen wir die Verzeichnisstruktur des Vue-Applet-Projekts verstehen. #🎜🎜 ## ├#├ ─ ─ public // Statisches Ressourcendateiverzeichnis
│ ├ ─ Favicon.ico // Website-Symbol
│ └ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ —— 🎜🎜##🎜🎜#├── src                                                                                                                                                                                              . ──Router                                                                                                                                                                                                        zu  / App-Eintragsdatei
│ └── main.js // Projekteintragsdatei #🎜🎜##🎜🎜#├── .browserslistrc // Browserkompatibilitätskonfigurationsdatei
├── babel config.js // Babel-Konfigurationsdatei
├── package.json // Projektkonfigurationsdatei
└── README.md // Projektbeschreibungsdatei#🎜🎜##🎜🎜# 3. Kernkonzepte #🎜🎜##🎜🎜# Nachdem wir die Projektverzeichnisstruktur verstanden haben, müssen wir einige Kernkonzepte des Vue-Applets lernen. #🎜🎜##🎜🎜##🎜🎜#Komponente#🎜🎜##🎜🎜##🎜🎜#Man kann sagen, dass die Komponente im Vue-Applet ein sehr wichtiges Konzept ist, sie teilt eine Seite in mehrere Funktionen auf. Unabhängige Komponenten Machen Sie den Code prägnanter und einfacher zu warten. Im Vue-Applet besteht jede Komponente aus einer Vue-Instanz, und eine Vue-Instanz kann mehrere Komponenten enthalten. #🎜🎜##🎜🎜#Wir können eine neue Komponente im Verzeichnis src/components erstellen, zum Beispiel: src/components/HelloWorld.vue . Diese Komponente kann eine einfache Vorlage und ein Skript enthalten: #🎜🎜#

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const state = {
  count: 0
}

const mutations = {
  increment(state) {
    state.count++
  },
  decrement(state) {
    state.count--
  }
}

const actions = {
  increment({ commit }) {
    commit('increment')
  },
  decrement({ commit }) {
    commit('decrement')
  }
}

const store = new Vuex.Store({
  state,
  mutations,
  actions
})

export default store

#🎜🎜#Die Vorlage dieser Komponente enthält ein einfaches Textfeld, das angezeigt wird der Inhalt von „Hello, World!“ Das script dieser Komponente definiert ein data-Attribut, nämlich msg, und setzt seinen Standardwert auf „Hello, World!“. #🎜🎜##🎜🎜#Um Komponenten in eine Seite einzuführen, können wir <hello-world></hello-world>template-Tag der verwenden Zielseite. /code>-Syntax, um die gerade erstellte Komponente vorzustellen. #🎜🎜##🎜🎜##🎜🎜#routing#🎜🎜##🎜🎜##🎜🎜#Im Vue-Applet können wir durch die Einführung von Routing dafür sorgen, dass die Seite springen kann. Das Vue-Applet verfügt über ein integriertes Vue-Router-Plug-in, das Routing-Einstellungen sehr einfach macht. #🎜🎜##🎜🎜#Erstellen Sie eine neue Routing-Datei im Verzeichnis src/router, zum Beispiel: src/router/index.js. Die Routing-Datei enthält eine einfache Routing-Einstellung: #🎜🎜#rrreee#🎜🎜#In den Routing-Einstellungen oben richten wir zwei Routing-Knoten ein, einer ist / (d. h. die Homepage des application ), und das andere ist /about. Jeder Routing-Knoten muss ein path-Attribut, ein name-Attribut und ein component-Attribut festlegen. Unter diesen stellt das Attribut path die URL-Adresse der Route dar, das Attribut name ist der Name der Route und das Attribut component ist die Komponente, die dem Routennamen entspricht. Darüber hinaus können wir auch die Routing-Sprungmethode festlegen. In den Routing-Einstellungen oben haben wir mode: 'history' verwendet, um den HTML5-Verlaufsmodus zu aktivieren. #🎜🎜#

在 src/views 目录下可以创建与 router 配套的视图文件，例如： src/views/Home.vue 和 src/views/About.vue 。这两个文件分别对应上面路由设置的首页和关于页面。

3. Vuex

Vuex是一个专为Vue.js应用程序开发的状态管理模式。状态共享是指多个组件共享同一个状态，这种设计模式使得在全局上管理应用程序的状态非常容易，从而提高代码的可维护性和代码的复用性。

在 src/store 目录下可以创建一个新的Vuex store文件，例如： `src/store/index.js'。该文件中包含一些基本的Vuex state 属性、Vuex mutations 和 Vuex actions 。

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const state = {
  count: 0
}

const mutations = {
  increment(state) {
    state.count++
  },
  decrement(state) {
    state.count--
  }
}

const actions = {
  increment({ commit }) {
    commit('increment')
  },
  decrement({ commit }) {
    commit('decrement')
  }
}

const store = new Vuex.Store({
  state,
  mutations,
  actions
})

export default store

上述代码包含以下三个关键的属性：

• state：表示组件中的数据状态。
• mutations：表示一些方法，用于改变 state 中的状态。
• actions：表示一些异步方法，用于执行复杂的逻辑代码。

在代码中，我们定义了一个 count 状态，并在 mutations 中定义了一个 increment 函数和一个 decrement 函数，用于改变 count的值。我们还在 actions 中实现了操作 mutations 中函数的方法，分别是 increment 和 decrement。

四、总结

本文介绍了Vue小程序的设置，包括了项目的初始化，目录结构，以及Vue小程序的核心概念：组件、路由和Vuex。

在实际的开发中，使用Vue小程序可以显著提高开发效率，简化代码结构。希望通过本文的介绍，读者可以更好地了解Vue小程序的使用和相关知识，并在实际的开发中起到指导作用。

Das obige ist der detaillierte Inhalt vonLassen Sie uns über die Kernkonzepte des Vue-Applets sprechen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!