프런트엔드 프로젝트 뷰를 구축하는 방법

프런트엔드와 백엔드를 분리하는 추세가 점점 더 분명해짐에 따라 프런트엔드 프레임워크가 점점 더 많아지고 있습니다. 그 중 Vue.js는 비교적 간단하고 사용하기 쉬운 프레임워크로 많은 프런트엔드 엔지니어들에게 환영을 받고 있습니다. 이번 글에서는 Vue.js를 이용해 프론트엔드 프로젝트를 구축하는 방법을 소개하겠습니다.

1. 프로젝트 생성

Vue CLI를 사용하여 Vue 프로젝트를 빠르게 생성하세요. Vue CLI는 Vue.js 프로젝트 구조를 빠르게 구축하는 데 도움이 되는 명령줄 도구입니다. 다음 명령을 실행하여 새 Vue 프로젝트를 생성할 수 있습니다:

vue create my-project

그런 다음 옵션에 따라 프로젝트를 구성합니다. 그 중에서 도입해야 할 플러그인과 관련 구성을 선택해야 합니다. 예를 들어, 라우터(vue-router), vuex(상태 관리자), CSS 전처리기 등과 같이 어떤 플러그인을 설치해야 하는지 묻는 메시지가 표시됩니다. 일단 구성되면 Vue CLI는 선택 사항에 따라 프로젝트 구조를 자동으로 생성합니다.

2. 구성 요소 작성

Vue.js의 핵심 아이디어는 구성 요소화라는 아이디어이며, 모든 것이 구성 요소화되어 있습니다. 따라서 Vue 프로젝트를 빌드하려면 구성 요소를 작성해야 합니다. 구성 요소는 재사용 가능한 코드 블록으로, 코드 중복성을 크게 줄이고 코드 재사용성을 향상시킵니다.

/src/comComponents 폴더 아래에 구성 요소를 만들 수 있습니다. 예를 들어 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

이 템플릿은 보간 표현식, 지침 등을 포함한 템플릿 구문을 사용하고 해당 JavaScript 코드도 포함하는 매우 간단한 Vue.js 구성 요소입니다.

3. 컴포넌트 사용

직접 말하면 컴포넌트는 Vue 인스턴스입니다. 이 Vue 인스턴스는 다른 Vue 인스턴스의 템플릿에서 "사용"될 수 있습니다. Vue에서는 <template> 태그를 통해 이 구성 요소를 사용할 수 있습니다.

App.vue에서 방금 생성한 HelloWorld 구성 요소를 소개할 수 있습니다.

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

위 코드에서는 먼저 컴포넌트를 소개하고 템플릿에서 이 컴포넌트를 사용해야 합니다.

4. Vuex 상태 관리

Vuex는 Vue.js 애플리케이션에서 상태(데이터)를 관리하는 데 특별히 사용되는 라이브러리입니다. 보다 복잡한 프로젝트에서는 상태가 너무 많으면 관리가 매우 어려워집니다. Vuex를 사용하여 상태를 관리하면 이 상태를 더 잘 유지하고 다른 구성 요소 간에 공유할 수 있습니다. 🎜🎜프로젝트에 Vuex를 설치해야 합니다. 🎜

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

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

🎜 다음으로 store.js 파일을 만듭니다. 🎜rrreee🎜이것은 간단한 Vuex 스토어(상태)입니다. 상태(state), mutation, 액션과 게터는 각각 데이터 저장, 데이터 수정, 비동기 작업, 데이터 수집 및 기타 작업에 해당합니다. 🎜🎜store.js 파일을 생성한 후 이를 Vue 인스턴스에 삽입해야 합니다. 🎜rrreee🎜이제 구성 요소에서 Vuex의 상태에 액세스할 수 있습니다. 🎜🎜5. 라우팅 사용🎜🎜Vue.js에서는 vue-router를 사용하여 라우팅을 관리할 수 있습니다. /src/router 폴더에 index.js 파일을 생성하여 라우팅을 관리할 수 있습니다. 🎜🎜프로젝트에 vue-router를 설치해야 합니다: 🎜rrreee🎜다음으로 경로를 작성합니다: 🎜rrreee🎜그런 다음 위 경로를 Vue 인스턴스에 도입합니다: 🎜rrreee🎜이런 방식으로 프로젝트에서 라우팅을 사용할 수 있습니다. . 🎜🎜6. 요약🎜🎜이 글에서는 Vue.js를 사용하여 프런트엔드 프로젝트를 빠르게 구축하는 방법을 소개합니다. 프로젝트 구조 생성, 컴포넌트 작성, Vuex를 사용하여 상태 관리, vue-router를 사용하여 Vue CLI를 통한 라우팅 관리와 같은 단계는 초보자에게 프로젝트 구축을 위한 비교적 명확한 프로세스를 제공합니다. 물론 이는 Vue.js에 대한 소개일 뿐입니다. 실제 프로젝트 개발에서는 아직 숙달해야 할 지식과 기술이 많이 있습니다. 이 글이 Vue.js를 시작하는 데 도움이 되기를 바라며, 또한 Vue.js를 더 깊이 이해하는 데 도움이 되기를 바랍니다. 🎜

위 내용은 프런트엔드 프로젝트 뷰를 구축하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!