引言

Vue3作为新一代的Vue.js框架，以其简洁、高效的特点，受到了广泛的欢迎。本文将为你提供一份详细的Vue3入门攻略，帮助你轻松搭建个性化的UI，并通过实战案例一步步上手。

一、Vue3基础

1.1 安装Vue3

首先，你需要安装Vue3。可以通过以下命令进行安装：

npm install vue@next

1.2 创建Vue3项目

使用Vue CLI创建一个新的Vue3项目：

vue create my-vue3-project

1.3 Vue3基本结构

一个Vue3项目的结构如下：

my-vue3-project/
├── public/
│   └── index.html
├── src/
│   ├── assets/
│   ├── components/
│   ├── main.js
│   ├── App.vue
│   └── index.js
├── package.json
└── README.md

1.4 主组件App.vue

在App.vue中，你可以定义你的主组件，它是整个应用的根组件。

<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    <HelloWorld msg="Welcome to Your Vue.js App"/>
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'

export default {
  name: 'App',
  components: {
    HelloWorld
  }
}
</script>

<style>
/* 样式定义 */
</style>

二、Vue3核心概念

2.1 模板语法

Vue3的模板语法包括：

  • 插值表达式：{{ msg }}
  • 指令：v-bind:属性="value" 或 :属性="value"
  • 条件渲染：v-if、v-else-if、v-else
  • 列表渲染：v-for

2.2 组件

组件是Vue3的核心概念之一，你可以通过以下方式创建组件：

// components/HelloWorld.vue
<template>
  <div>{{ msg }}</div>
</template>

<script>
export default {
  name: 'HelloWorld',
  props: ['msg']
}
</script>

2.3 状态管理

Vue3支持使用Vuex进行状态管理。安装Vuex：

npm install vuex@4

创建Vuex store：

// store/index.js
import { createStore } from 'vuex';

export default createStore({
  state() {
    return {
      count: 0
    };
  },
  mutations: {
    increment(state) {
      state.count++;
    }
  },
  actions: {
    increment(context) {
      context.commit('increment');
    }
  },
  getters: {
    doubleCount(state) {
      return state.count * 2;
    }
  }
});

三、实战案例

3.1 创建一个简单的待办事项列表

  1. 在src/components目录下创建TodoList.vue。
<template>
  <div>
    <input v-model="newTodo" @keyup.enter="addTodo">
    <ul>
      <li v-for="(todo, index) in todos" :key="index">
        {{ todo }}
        <button @click="removeTodo(index)">Remove</button>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      newTodo: '',
      todos: []
    };
  },
  methods: {
    addTodo() {
      if (this.newTodo.trim() !== '') {
        this.todos.push(this.newTodo);
        this.newTodo = '';
      }
    },
    removeTodo(index) {
      this.todos.splice(index, 1);
    }
  }
}
</script>
  1. 在App.vue中引入并使用TodoList组件。
<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    <TodoList />
  </div>
</template>

<script>
import TodoList from './components/TodoList.vue'

export default {
  name: 'App',
  components: {
    TodoList
  }
}
</script>

3.2 使用Vuex管理待办事项列表的状态

  1. 在store/index.js中添加待办事项的状态、mutations和actions。

”`javascript // store/index.js import { createStore } from ‘vuex’;

export default createStore({ state() {

return {
  todos: []
};

}, mutations: {

addTodo(state, todo)