Comment créer une vue de projet front-end

À mesure que la tendance à la séparation du front-end et du back-end devient de plus en plus évidente, il existe de plus en plus de frameworks front-end. Parmi eux, Vue.js est un framework relativement simple et facile à utiliser, et est bien accueilli par de nombreux ingénieurs front-end. Dans cet article, nous présenterons comment créer un projet front-end à l'aide de Vue.js.

1. Créer un projet

Utilisez Vue CLI pour créer rapidement un projet Vue. Vue CLI est un outil de ligne de commande qui peut nous aider à créer rapidement une structure de projet Vue.js. On peut créer un nouveau projet Vue en exécutant la commande suivante :

vue create my-project

puis configurer le projet selon les options. Parmi eux, nous devons sélectionner les plug-ins et les configurations associées qui doivent être introduits. Par exemple, il nous sera demandé quels plug-ins nous devons installer, comme un routeur (vue-router), une vuex (gestionnaire d'état), un préprocesseur CSS, etc. Une fois configuré, Vue CLI créera automatiquement la structure du projet en fonction de nos sélections.

2. Écrire des composants

L'idée centrale de Vue.js est l'idée de composantisation, et tout est composant. Par conséquent, nous devons écrire des composants pour créer des projets Vue. Les composants sont des blocs de code réutilisables, ce qui réduit considérablement la redondance du code et améliore la réutilisabilité du code.

Nous pouvons créer un composant sous le dossier /src/components, par exemple, créer un composant HelloWorld.vue. /src/components 文件夹下创建一个组件，比如创建一个 HelloWorld.vue 的组件。

<template>
  <div>
    <p>{{msg}}</p>
    <input v-model="text">
    <p>{{text}}</p>
    <button @click="onClick">点击</button>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        msg: 'hello world',
        text: ''
      }
    },
    methods: {
      onClick() {
        alert('clicked')
      }
    }
  }
</script>

这是一个非常简单的 Vue.js 组件，模板使用了模板语法，包括插值表达式、指令等，同时也包括对应的 JavaScript 代码。

三、使用组件

组件说白了就是 Vue 实例，这个 Vue 实例可以在其他 Vue 实例的模板中“使用”。在 Vue 中，我们可以通过 <template> 标签来使用这个组件。

可以在 App.vue 中引入我们刚刚创建的 HelloWorld 组件。

<template>
  <div id="app">
    <HelloWorld/>
  </div>
</template>

<script>
  import HelloWorld from './components/HelloWorld.vue'
  export default {
    name: 'App',
    components: {
      HelloWorld
    }
  }
</script>

在上面的代码中，我们需要先将组件引入，并且在模板中使用这个组件。

四、Vuex 状态管理

Vuex 是一个专门用来管理 Vue.js 应用中状态（数据）的库。在一个比较复杂的项目中，如果状态多了，管理就会变得非常麻烦。用 Vuex 来管理状态可以让我们更好地维护这些状态，同时也可以在不同的组件之间共享这些状态。

我们需要在项目中安装 Vuex：

npm install vuex --save

接下来创建一个 store.js 文件：

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

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment(state) {
      state.count++
    }
  },
  actions: {
    increment({commit}) {
      commit('increment')
    }
  },
  getters: {
    getCount(state) {
      return state.count
    }
  }
})

这是一个简单的 Vuex store（状态），包括 state（状态）、mutation、action 和 getters，分别对应数据存储、数据修改、异步操作、数据获取等操作。

创建好了 store.js 文件，我们需要将其注入到 Vue 实例中：

import Vue from 'vue'
import App from './App.vue'
import store from './store'

new Vue({
  store,
  render: h => h(App),
}).$mount('#app')

这个时候，我们就可以在组件中访问 Vuex 中的状态了。

五、使用路由

在 Vue.js 中，我们可以使用 vue-router 来管理路由。我们可以在 /src/router 文件夹下创建一个 index.js

npm install vue-router --save

Il s'agit d'un composant Vue.js très simple. Le modèle utilise la syntaxe du modèle, y compris les expressions d'interpolation, les instructions, etc., et inclut également le code JavaScript correspondant.

3. Utiliser des composants

Pour parler franchement, un composant est une instance de Vue peut être "utilisée" dans les modèles d'autres instances de Vue. Dans Vue, nous pouvons utiliser ce composant via la balise <template>.

Vous pouvez introduire le composant HelloWorld que nous venons de créer dans App.vue.

import Vue from 'vue'
import Router from 'vue-router'

import Home from '@/components/Home'
import About from '@/components/About'

Vue.use(Router)

export default new Router({
  mode: 'history',
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home
    },
    {
      path: '/about',
      name: 'about',
      component: About
    }
  ]
})

Dans le code ci-dessus, nous devons d'abord introduire le composant et utiliser ce composant dans le modèle.

4. Gestion de l'état Vuex

Vuex est une bibliothèque spécifiquement utilisée pour gérer l'état (données) dans les applications Vue.js. Dans un projet plus complexe, s’il y a trop d’états, la gestion deviendra très gênante. Utiliser Vuex pour gérer l'état nous permet de mieux maintenir cet état et de le partager entre différents composants. 🎜🎜Nous devons installer Vuex dans le projet : 🎜

import Vue from 'vue'
import App from './App.vue'
import router from './router'

new Vue({
  router,
  render: h => h(App),
}).$mount('#app')

🎜 Créez ensuite un fichier store.js : 🎜rrreee🎜Il s'agit d'un simple magasin Vuex (état), comprenant l'état (état), la mutation, l'action et les getters correspondent respectivement au stockage de données, à la modification de données, au fonctionnement asynchrone, à l'acquisition de données et à d'autres opérations. 🎜🎜Après avoir créé le fichier store.js, nous devons l'injecter dans l'instance Vue : 🎜rrreee🎜A ce moment, nous pouvons accéder à l'état dans Vuex dans le composant. 🎜🎜5. Utiliser le routage🎜🎜Dans Vue.js, nous pouvons utiliser vue-router pour gérer le routage. Nous pouvons créer un fichier index.js dans le dossier /src/router pour gérer le routage. 🎜🎜Nous devons installer vue-router dans le projet : 🎜rrreee🎜Ensuite, écrivez la route : 🎜rrreee🎜Puis introduisez la route ci-dessus dans l'instance de Vue : 🎜rrreee🎜De cette façon, nous pouvons utiliser le routage dans le projet . 🎜🎜6. Résumé🎜🎜Cet article explique comment utiliser Vue.js pour créer rapidement un projet front-end. Des étapes telles que la création d'une structure de projet, l'écriture de composants, l'utilisation de Vuex pour gérer le statut et l'utilisation de vue-router pour gérer le routage via Vue CLI offrent aux débutants un processus relativement clair pour créer un projet. Bien sûr, il ne s'agit que d'une introduction à Vue.js. Dans le développement de projets réels, de nombreuses connaissances et compétences doivent encore être maîtrisées. J'espère que cet article pourra vous aider à démarrer avec Vue.js, et j'espère également qu'il pourra vous aider à comprendre Vue.js plus en profondeur. 🎜

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!