So erstellen Sie ein Front-End-Projekt vue

Da der Trend der Front-End- und Back-End-Trennung immer offensichtlicher wird, gibt es immer mehr Front-End-Frameworks. Unter diesen ist Vue.js ein relativ einfaches und benutzerfreundliches Framework, das von vielen Front-End-Ingenieuren begrüßt wird. In diesem Artikel stellen wir vor, wie man mit Vue.js ein Front-End-Projekt erstellt.

1. Erstellen Sie ein Projekt

Verwenden Sie Vue CLI, um schnell ein Vue-Projekt zu erstellen. Vue CLI ist ein Befehlszeilentool, mit dem wir schnell eine Vue.js-Projektstruktur erstellen können. Wir können ein neues Vue-Projekt erstellen, indem wir den folgenden Befehl ausführen:

vue create my-project

Anschließend konfigurieren Sie das Projekt entsprechend den Optionen. Darunter müssen wir die Plug-Ins und zugehörigen Konfigurationen auswählen, die eingeführt werden müssen. Beispielsweise werden wir gefragt, welche Plug-Ins wir installieren müssen, z. B. Router (vue-router), vuex (State Manager), CSS-Präprozessor usw. Nach der Konfiguration erstellt Vue CLI automatisch die Projektstruktur basierend auf unserer Auswahl.

2. Komponenten schreiben

Die Kernidee von Vue.js ist die Idee der Komponentisierung, und alles ist komponentisiert. Daher müssen wir Komponenten schreiben, um Vue-Projekte zu erstellen. Komponenten sind wiederverwendbare Codeblöcke, was die Coderedundanz erheblich reduziert und die Wiederverwendbarkeit des Codes verbessert.

Wir können eine Komponente im Ordner /src/components erstellen, beispielsweise eine Komponente 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

Dies ist eine sehr einfache Vue.js-Komponente. Die Vorlage verwendet Vorlagensyntax, einschließlich Interpolationsausdrücken, Anweisungen usw., und enthält auch entsprechenden JavaScript-Code.

3. Komponenten verwenden

Eine Komponente ist eine Vue-Instanz, die in den Vorlagen anderer Vue-Instanzen „verwendet“ werden kann. In Vue können wir diese Komponente über das Tag <template> verwenden.

Die gerade erstellte HelloWorld-Komponente kann in App.vue eingeführt werden.

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
    }
  ]
})

Im obigen Code müssen wir zuerst die Komponente einführen und diese Komponente in der Vorlage verwenden.

4. Vuex-Statusverwaltung

Vuex ist eine Bibliothek, die speziell zum Verwalten des Status (Daten) in Vue.js-Anwendungen verwendet wird. Wenn in einem komplexeren Projekt zu viele Zustände vorhanden sind, wird die Verwaltung sehr problematisch. Durch die Verwendung von Vuex zur Statusverwaltung können wir diesen Status besser verwalten und zwischen verschiedenen Komponenten teilen. #🎜🎜##🎜🎜#Wir müssen Vuex im Projekt installieren: #🎜🎜#

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

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

#🎜🎜#Als nächstes erstellen Sie eine store.js-Datei: #🎜🎜#rrreee#🎜🎜# Dies ist ein einfacher Vuex-Speicher (Status), einschließlich Status (Status), Mutation, Aktion und Getter, die jeweils der Datenspeicherung, Datenänderung, asynchronen Operation, Datenerfassung und anderen Operationen entsprechen. #🎜🎜##🎜🎜#Nachdem wir die Datei store.js erstellt haben, müssen wir sie in die Vue-Instanz einfügen: #🎜🎜#rrreee#🎜🎜#Zu diesem Zeitpunkt können wir sie hinzufügen zur Komponente Greifen Sie auf den Status in Vuex zu. #🎜🎜##🎜🎜# 5. Routing verwenden #🎜🎜##🎜🎜#In Vue.js können wir Vue-Router verwenden, um das Routing zu verwalten. Wir können eine index.js-Datei im Ordner /src/router erstellen, um das Routing zu verwalten. #🎜🎜##🎜🎜#Wir müssen den Vue-Router im Projekt installieren: #🎜🎜#rrreee#🎜🎜#Als nächstes schreiben Sie die Route: #🎜🎜#rrreee#🎜🎜#Führen Sie dann die obige Route in die Instanz ein von Vue Medium: #🎜🎜#rrreee#🎜🎜#Auf diese Weise können wir Routing im Projekt verwenden. #🎜🎜##🎜🎜#6. Zusammenfassung#🎜🎜##🎜🎜#In diesem Artikel wird erläutert, wie Sie mit Vue.js schnell ein Front-End-Projekt erstellen. Schritte wie das Erstellen einer Projektstruktur, das Schreiben von Komponenten, die Verwendung von Vuex zum Verwalten des Status und die Verwendung von Vue-Router zum Verwalten des Routings über die Vue-CLI bieten Anfängern einen relativ klaren Prozess zum Erstellen eines Projekts. Dies ist natürlich nur eine Einführung in Vue.js. In der tatsächlichen Projektentwicklung müssen noch viele Kenntnisse und Fähigkeiten beherrscht werden. Ich hoffe, dieser Artikel kann Ihnen beim Einstieg in Vue.js helfen und ich hoffe, dass er Ihnen dabei helfen kann, Vue.js besser zu verstehen. #🎜🎜#

Das obige ist der detaillierte Inhalt vonSo erstellen Sie ein Front-End-Projekt vue. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!