Parlons des concepts de base de l'applet Vue

Ces dernières années, avec la popularité de l'Internet mobile et la montée en puissance des mini-programmes, de plus en plus d'entreprises ont commencé à investir dans le développement de mini-programmes. Dans le développement de petits programmes, Vue.js, en tant que framework frontal léger, est largement reconnu pour sa flexibilité et sa facilité d'apprentissage. Cet article présentera les paramètres de l'applet Vue pour aider les développeurs à mieux comprendre les concepts de base de l'applet Vue.

1. Initialisation du projet

Avant de commencer, nous devons installer Vue CLI 3, qui est un outil d'échafaudage officiellement fourni par Vue.js pour créer rapidement des projets Vue. Entrez la commande suivante dans le terminal pour installer :

npm install -g @vue/cli

Après l'installation, nous pouvons créer une applet Vue via Vue CLI 3.

1. Créer un projet

Entrez la commande suivante dans le terminal pour créer un nouveau projet d'applet Vue :

vue create my-miniapp

Après avoir entré la commande ci-dessus, vous devez sélectionner les fonctionnalités requises pour le projet en cours, telles que : Babel, Routeur , Vuex, pré-processeurs CSS, etc. Ici, nous sélectionnons les fonctionnalités par défaut et appuyons sur la touche Entrée.

2. Démarrez le projet

Exécutez la commande suivante dans le répertoire racine du projet :

npm run serve

Après avoir démarré le projet, nous pouvons accéder à l'applet Vue dans le navigateur via http://localhost:8080 Page d'accueil. 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. Structure du répertoire🎜🎜Grâce aux étapes ci-dessus, nous avons réussi à créer une applet Vue. Nous devons donc ensuite comprendre la structure des répertoires du projet d'applet Vue. 🎜🎜├── public                                                                                            using   with       using               ‐                                                vers / / Répertoire de code source
│ ├── ressources                  répertoire de fichiers                                                                                                                                                                                                  vers la boutique │ ├── // répertoire de fichiers
│ ├── vues                                                                                                                                                                                                                                         main.js // Projet fichier d'entrée 🎜🎜├── .browserslistrc // Fichier de configuration de compatibilité du navigateur
├── babel.config.js // Fichier de configuration Babel
├── package.json / / Fichier de configuration du projet
└── README.md // Fichier de description du projet 🎜🎜 3. Concepts de base 🎜🎜 Après avoir compris la structure du répertoire du projet, nous devons ensuite apprendre quelques concepts de base des applets Vue. 🎜🎜🎜Composants🎜🎜🎜Les composants de l'applet Vue peuvent être considérés comme un concept très important. Ils divisent une page en plusieurs composants fonctionnellement indépendants, ce qui rend le code plus concis et plus facile à maintenir. Dans l'applet Vue, chaque composant est composé d'une instance Vue, et une instance Vue peut contenir plusieurs composants. 🎜🎜Nous pouvons créer un nouveau composant dans le répertoire src/components, par exemple : src/components/HelloWorld.vue . Ce composant peut contenir un simple modèle et un script : 🎜

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

🎜Le modèle de ce composant contient une simple zone de texte qui affiche "Hello , World!" contenu. Le script de ce composant définit un attribut data, à savoir msg, et définit sa valeur par défaut sur "Hello, World!". 🎜🎜Afin d'introduire des composants dans une page, nous pouvons utiliser la syntaxe <hello-world></hello-world> dans la balise template de la cible. Importez le composant que vous venez de créer. 🎜🎜🎜Routing🎜🎜🎜Dans l'applet Vue, en introduisant le routage, nous pouvons donner à la page la possibilité de sauter. L'applet Vue dispose d'un plug-in Vue Router intégré, ce qui rend les paramètres de routage très simples. 🎜🎜Créez un nouveau fichier de routage dans le répertoire src/router, par exemple : src/router/index.js . Le fichier de routage contient un paramètre de routage simple : 🎜rrreee🎜Dans les paramètres de routage ci-dessus, nous mettons en place deux nœuds de routage, l'un est / (c'est à dire la page d'accueil de l'application), l'autre est /à propos. Chaque nœud de routage doit définir un attribut path, un attribut name et un attribut component. Parmi eux, l'attribut path représente l'adresse URL de la route, l'attribut name est le nom de la route et l'attribut component est le composant correspondant au nom de l'itinéraire. De plus, nous pouvons également définir la méthode de saut de routage. Dans les paramètres de routage ci-dessus, nous avons utilisé mode: 'history' pour activer le mode historique HTML5. 🎜

在 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小程序的使用和相关知识，并在实际的开发中起到指导作用。

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!