Vue 애플릿의 핵심 개념에 대해 이야기해 보겠습니다.

최근에는 모바일 인터넷의 대중화와 미니 프로그램의 등장으로 미니 프로그램 개발에 투자하는 기업이 늘어나고 있습니다. 소규모 프로그램 개발에서 경량 프런트엔드 프레임워크인 Vue.js는 유연성과 학습 용이성으로 널리 알려져 있습니다. 이 기사에서는 개발자가 Vue 애플릿의 핵심 개념을 더 잘 이해할 수 있도록 Vue 애플릿의 설정을 소개합니다.

1. 프로젝트 초기화

시작하기 전에 Vue 프로젝트를 빠르게 생성하기 위해 Vue.js에서 공식적으로 제공하는 스캐폴딩 도구인 Vue CLI 3를 설치해야 합니다. 설치하려면 터미널에 다음 명령을 입력하세요.

npm install -g @vue/cli

설치 후 Vue CLI 3을 통해 Vue 애플릿을 생성할 수 있습니다.

1. Create project

새 Vue 애플릿 프로젝트를 생성하려면 터미널에 다음 명령을 입력하세요.

vue create my-miniapp

위 명령을 입력한 후 Babel, Router 등 현재 프로젝트에 필요한 기능을 선택해야 합니다. , Vuex, CSS 전처리기 등 여기서는 기본 기능을 선택하고 Enter 키를 누릅니다.

2. 프로젝트 시작

프로젝트 루트 디렉터리에서 다음 명령을 실행하세요.

npm run serve

프로젝트를 시작한 후 http://localhost:8080를 통해 브라우저에서 Vue 애플릿에 액세스할 수 있습니다. > 홈페이지. 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. 디렉토리 구조🎜🎜위의 단계를 통해 Vue 애플릿을 성공적으로 만들었습니다. 따라서 다음으로 Vue 애플릿 프로젝트의 디렉토리 구조를 이해해야 합니다. 🎜🎜├── 공개                                                                                                      with       using                                                               to / /소스 코드 카탈로그
│ ├ ─ ─ ├/////├ ─ ─ ─ ─ ─ 구성 요소 파일 // 디렉토리
│ ├ ─ 라우터 // 파일 디렉터리 라우팅
│ ├── store // Vuex 스토어 파일 디렉터리
│ ├── views                                                                        ~ >
├── babel.config.js // Babel 구성 파일
├── package.json // 프로젝트 구성 파일
└── README.md // 프로젝트 설명 파일 🎜🎜 3 . 핵심 개념 🎜🎜 프로젝트 디렉토리 구조를 이해한 후 다음으로 Vue 애플릿의 몇 가지 핵심 개념을 배워야 합니다. 🎜🎜🎜Components🎜🎜🎜Vue 애플릿의 구성 요소는 페이지를 기능적으로 독립적인 여러 구성 요소로 분할하여 코드를 더 간결하고 유지 관리하기 쉽게 만드는 매우 중요한 개념이라고 할 수 있습니다. Vue 애플릿에서 각 구성 요소는 Vue 인스턴스로 구성되며 Vue 인스턴스는 여러 구성 요소를 포함할 수 있습니다. 🎜🎜 src/comComponents 디렉터리에 새 구성 요소를 만들 수 있습니다(예: src/comComponents/HelloWorld.vue ). 이 구성 요소에는 간단한 템플릿 및 스크립트가 포함될 수 있습니다. 🎜

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

🎜이 구성 요소의 템플릿에는 "Hello , World!"를 표시하는 간단한 텍스트 상자가 포함되어 있습니다. 콘텐츠. 이 구성요소의 script는 data 속성, 즉 msg를 정의하고 기본값을 "Hello, World!"로 설정합니다. 🎜🎜페이지에 구성 요소를 소개하기 위해 대상의 template 태그에 <hello-world></hello-world> 구문을 사용할 수 있습니다. 페이지에서 방금 생성한 구성 요소를 가져옵니다. 🎜🎜🎜Routing🎜🎜🎜Vue 애플릿에서는 라우팅을 도입하여 페이지에 점프 기능을 추가할 수 있습니다. Vue 애플릿에는 Vue Router 플러그인이 내장되어 있어 라우팅 설정이 매우 간단합니다. 🎜🎜 src/router 디렉터리에 새 라우팅 파일을 만듭니다(예: src/router/index.js ). 라우팅 파일에는 간단한 라우팅 설정이 포함되어 있습니다: 🎜rrreee🎜위의 라우팅 설정에서는 두 개의 라우팅 노드를 설정했습니다. 하나는 /(즉, 애플리케이션의 홈 페이지)이고 다른 하나는 /about입니다. 각 라우팅 노드는 path 속성, name 속성 및 comment 속성을 ​​설정해야 합니다. 그 중 path 속성은 경로의 URL 주소를 나타내며, name 속성은 경로의 이름, comment 속성은 경로 이름에 해당하는 구성 요소입니다. 또한 라우팅 점프 방법도 설정할 수 있습니다. 위의 라우팅 설정에서는 mode: 'history'를 사용하여 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小程序的使用和相关知识，并在实际的开发中起到指导作用。

위 내용은 Vue 애플릿의 핵심 개념에 대해 이야기해 보겠습니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!