Let’s talk about the core concepts of Vue applet

In recent years, with the popularity of mobile Internet and the rise of mini programs, more and more companies have begun to invest in the development of mini programs. In the development of small programs, Vue.js, as a lightweight front-end framework, is widely recognized for its flexibility and ease of learning. This article will introduce the settings of Vue applet to help developers better understand the core concepts of Vue applet.

1. Project initialization

Before we start, we need to install Vue CLI 3, which is a scaffolding tool officially provided by Vue.js to quickly create Vue projects. Enter the following command in the terminal to install:

npm install -g @vue/cli

After installation, we can create a Vue applet through Vue CLI 3.

1. Create project

Enter the following command in the terminal to create a new Vue applet project:

vue create my-miniapp

After entering the above command, you need to select the current Features required by the project, such as: Babel, Router, Vuex, CSS Pre-processors, etc. Here we select the default features and press the Enter key.

2. Start the project

Run the following command in the project root directory:

npm run serve

After starting the project, we can pass in the browser http://localhost:8080 to access the homepage of the Vue applet.

2. Directory structure

Through the above steps, we have successfully created a Vue applet. So, next we need to understand the directory structure of the Vue applet project.

├── public                                                                                                                                                                     using ‐             out         out’ ’ ’ ’s ’ way out’s ’ out’s ’ using ‐   ‐   ‐   ‐                                                         to  #├── src                                                                                                                                                                                                                                                                  ​## │ s ──STORE // Vuex's store file directory
│ ├ ─ ─ Views // Page file Directory
│ ├ ─ ─ App.Vue // app entrance file

│ ─ ─ Main ─ Main .js // Project entry file

├── .browserslistrc // Browser compatibility configuration file
├── babel.config.js // Babel configuration file
├── package. json // Project configuration file
└── README.md //Project description file

3. Core concepts

After understanding the project directory structure, next we need to learn some The core concept of Vue applet.

Component

The component in the Vue applet can be said to be a very important concept. It splits a page into several functionally independent components, making the code More concise and easier to maintain. In the Vue applet, each component is composed of a Vue instance, and a Vue instance can contain several components.

We can create a new component in the

src/components

directory, for example:
1. src/components/HelloWorld.vue
. This component can contain a simple

template

and

script

: <pre class="brush:php;toolbar:false">&lt;template&gt;   &lt;div&gt;{{ msg }}&lt;/div&gt; &lt;/template&gt; &lt;script&gt; export default {   data() {     return {       msg: 'Hello, World!'     }   } } &lt;/script&gt;</pre>This component's template contains a simple text box that displays " Hello, World!" content. This component's script defines a data attribute, namely

msg

, and sets its default value to "Hello, World!". In order to introduce components into a page, we can use <hello-world></hello-world> in the template tag of the target page syntax to introduce the component you just created.

Routing

In the Vue applet, by introducing routing, we can make the page have the ability to jump. The Vue applet has a built-in Vue Router plug-in, which makes routing settings very simple. Create a new routing file in the

src/router

directory, for example:
2. src/router/index.js
. The routing file contains a simple routing setting:

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

In the above routing setting, we set up two routing nodes, one is

/

(that is, the home page of the application), and the other is One is /about. Each routing node needs to set a path attribute, a

name

attribute and a component attribute. Among them, the path attribute represents the URL address of the route, the name attribute is the name of the route, and the component attribute is the name of the component corresponding to the route. In addition, we can also set the routing jump method. In the routing settings above, we used mode: 'history' to enable HTML5 history mode. <p>在 <code>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小程序的使用和相关知识，并在实际的开发中起到指导作用。

The above is the detailed content of Let’s talk about the core concepts of Vue applet. For more information, please follow other related articles on the PHP Chinese website!