首页手记 Vue3资料：新手入门教程与实战技巧详解

Vue3资料：新手入门教程与实战技巧详解

标签：

Vue.js

本文提供了关于Vue3的核心特性和环境搭建的详细介绍，涵盖了Vue3的新特性和开发环境搭建步骤。此外，文章还深入讲解了Vue3的基本语法、响应式原理以及路由和状态管理等内容。文中还包括了Vue3的实战案例和进阶学习资源，帮助读者更好地理解和应用Vue3。

Vue3简介与环境搭建

Vue3的核心特性介绍

Vue 3 是 Vue.js 的最新版本，它在 Vue 2 的基础上带来了许多改进和新特性。以下是 Vue 3 的一些主要特性介绍：

更小的体积：Vue 3 的体积相比 Vue 2 减少了约 41%，这使得应用加载速度更快。
更快的渲染速度：Vue 3 通过在编译阶段进行静态树优化等措施，使得渲染速度提升了约 2 倍。
更好的兼容性：Vue 3 支持 TypeScript，提供了更好的类型支持。
Composition API：引入了 Composition API，这使得代码的组织变得更加灵活和强大。
更好的错误处理：Vue 3 提供了更清晰的错误信息和更好的错误处理机制。
Tree-shaking：支持模块树摇动（Tree-shaking），确保未使用的代码不会被编译到生产环境中。
Teleport 和 Fragment：新的组件 Teleport 和 Fragment 让开发者能够更灵活地处理组件挂载位置和内容。

开发环境搭建指南

以下是如何搭建 Vue 3 开发环境的基本步骤：

步骤 1：安装 Node.js 和 npm

确保你的机器上已经安装了 Node.js 和 npm。可以通过以下命令检查是否已经安装：

node -v
npm -v

如果没有安装，可以访问 Node.js 官方网站下载并安装最新的版本（https://nodejs.org/）。

步骤 2：安装 Vue CLI

Vue CLI 是一个命令行工具，用于快速搭建 Vue 项目。可以通过以下命令安装 Vue CLI：

npm install -g @vue/cli

安装完成后，可以通过以下命令检查 Vue CLI 的版本：

vue --version

步骤 3：创建 Vue 3 项目

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

vue create my-vue3-project

在创建项目的界面中，选择 Vue 3 作为默认的预设或者选择手动选择特性，然后选择 Vue 3。

步骤 4：启动开发服务器

进入项目目录并启动开发服务器，以便可以实时预览和调试：

cd my-vue3-project
npm run serve

这将启动一个本地服务器，默认端口为 8080。你可以通过浏览器访问 http://localhost:8080 查看应用。

步骤 5：使用 Vue 3 开发

在项目根目录下的 src 文件夹中，你会看到一些基本的文件结构。主要开发文件位于 src/components 和 src/views 目录中。你可以在这个项目上开始开发 Vue 3 应用了。

示例代码

创建一个简单的 Hello World 例子：

<!-- src/components/HelloWorld.vue -->
<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
  </div>
</template>

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

<style scoped>
.hello {
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

在组件中定义了一个简单的模板结构和一个数据属性 msg，并将 msg 通过 props 传入。

Vue3的基本语法

组件与模板

Vue 3 使用组件化的开发模式，一个组件通常包括 HTML 模板、JavaScript 逻辑和样式。组件是 Vue 应用的基本构建块。组件可以复用，可以嵌套在其他组件中，形成复杂的用户界面。

组件的基本结构

一个简单的 Vue 组件，通常结构如下：

<template>
  <div class="some-class">
    <h1>{{ msg }}</h1>
    <button @click="handleClick">点击我</button>
  </div>
</template>

<script>
export default {
  name: 'MyComponent',
  props: {
    msg: String
  },
  methods: {
    handleClick() {
      console.log('按钮被点击了');
    }
  }
}
</script>

<style scoped>
.some-class {
  color: #2c3e50;
  font-size: 20px;
}
</style>

组件的使用

在其他组件或页面中引用组件：

<template>
  <div id="app">
    <my-component msg="Hello Vue 3"></my-component>
  </div>
</template>

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

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

示例代码

创建一个简单的组件并使用它：

<!-- src/components/MyComponent.vue -->
<template>
  <div class="my-component">
    <h2>{{ greeting }}</h2>
    <p>{{ msg }}</p>
  </div>
</template>

<script>
export default {
  name: 'MyComponent',
  props: {
    msg: String
  },
  data() {
    return {
      greeting: 'Hello from MyComponent'
    }
  }
}
</script>

<style scoped>
.my-component {
  border: 1px solid #ccc;
  padding: 10px;
  margin: 10px;
}
</style>

在 App.vue 中使用该组件：

<!-- src/App.vue -->
<template>
  <div id="app">
    <my-component msg="Hello world"></my-component>
  </div>
</template>

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

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

生命周期钩子

Vue 组件的生命周期钩子包括 created、mounted、beforeDestroy 等，这些钩子允许你在特定阶段执行代码。

<template>
  <div>
    <h1>{{ message }}</h1>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello, Vue 3'
    }
  },
  created() {
    console.log('组件已创建');
  },
  mounted() {
    console.log('组件已挂载');
  }
}
</script>

组件间通信

在组件间通信中，可以通过 props 和事件来传递数据和触发事件。

<!-- ParentComponent.vue -->
<template>
  <div>
    <child-component :message="parentMessage" @child-event="handleChildEvent"></child-component>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue'

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      parentMessage: 'Hello from parent'
    }
  },
  methods: {
    handleChildEvent(data) {
      console.log('来自子组件的数据:', data);
    }
  }
}
</script>

<!-- ChildComponent.vue -->
<template>
  <div>
    <button @click="sendEventToParent">发送事件</button>
  </div>
</template>

<script>
export default {
  props: {
    message: String
  },
  methods: {
    sendEventToParent() {
      this.$emit('child-event', '来自子组件的数据');
    }
  }
}
</script>

自定义指令

自定义指令允许你为 Vue 组件添加自定义行为。

<template>
  <div v-mycustom-directive="message"></div>
</template>

<script>
export default {
  directives: {
    mycustomDirective: {
      bind(el, binding, vnode) {
        el.textContent = binding.value;
      }
    }
  },
  data() {
    return {
      message: 'Hello, Vue 3'
    }
  }
}
</script>

Vue3的响应式原理

响应式系统介绍

Vue 的响应式系统是 Vue 中一个核心的概念。它使 Vue 能够在数据变化时自动更新视图。Vue 3 的响应式系统在 Vue 2 的基础上做了许多改进，使其更加强大和高效。

响应式数据

在 Vue 中，响应式数据通常通过 data 函数或 setup 函数中的 ref 和 reactive 函数来声明。ref 用于声明基本类型的数据，而 reactive 用于声明对象或数组类型的数据。

import { ref, reactive } from 'vue'

export default {
  setup() {
    const count = ref(0) // 声明一个 ref 变量
    const state = reactive({
      title: 'Vue 3',
      items: [
        { id: 1, name: 'Item 1' },
        { id: 2, name: 'Item 2' }
      ]
    }) // 声明一个 reactive 对象

    return {
      count,
      state
    }
  }
}

响应式依赖追踪

Vue 通过依赖追踪机制来知道哪些数据是需要更新的。当响应式数据发生变化时，Vue 会自动更新依赖这些数据的视图部分。

响应式数据的监听

可以使用 watch 或 computed 函数来监听响应式数据的变化。

import { ref, watch } from 'vue'

export default {
  setup() {
    const count = ref(0)

    watch(count, (newVal, oldVal) => {
      console.log(`count changed from ${oldVal} to ${newVal}`)
    })

    return {
      count
    }
  }
}

响应式数据的使用与实践

基本数据绑定

在模板中使用响应式数据：

<template>
  <div>
    <p>{{ count }}</p>
    <button @click="increment">点击我</button>
  </div>
</template>

<script>
import { ref, watch } from 'vue'

export default {
  setup() {
    const count = ref(0)

    watch(count, (newVal, oldVal) => {
      console.log(`count changed from ${oldVal} to ${newVal}`)
    })

    const increment = () => {
      count.value++
    }

    return {
      count,
      increment
    }
  }
}
</script>

计算属性和侦听器

使用 computed 针对响应式数据进行计算：

<template>
  <div>
    <p>{{ doubleCount }}</p>
    <button @click="increment">点击我</button>
  </div>
</template>

<script>
import { ref, computed } from 'vue'

export default {
  setup() {
    const count = ref(0)

    const doubleCount = computed(() => {
      return count.value * 2
    })

    const increment = () => {
      count.value++
    }

    return {
      count,
      doubleCount,
      increment
    }
  }
}
</script>

使用 watch 针对特定响应式数据进行监听：

<template>
  <div>
    <p>{{ count }}</p>
    <button @click="increment">点击我</button>
  </div>
</template>

<script>
import { ref, watch } from 'vue'

export default {
  setup() {
    const count = ref(0)

    watch(count, (newVal, oldVal) => {
      console.log(`count changed from ${oldVal} to ${newVal}`)
    })

    const increment = () => {
      count.value++
    }

    return {
      count,
      increment
    }
  }
}
</script>

示例代码

创建一个简单的计数器组件，使用计算属性和监听器：

<!-- src/components/Counter.vue -->
<template>
  <div>
    <p>{{ count }}</p>
    <p>{{ doubleCount }}</p>
    <button @click="increment">点击我</button>
  </div>
</template>

<script>
import { ref, computed, watch } from 'vue'

export default {
  setup() {
    const count = ref(0)

    const doubleCount = computed(() => {
      return count.value * 2
    })

    watch(count, (newVal, oldVal) => {
      console.log(`count changed from ${oldVal} to ${newVal}`)
    })

    const increment = () => {
      count.value++
    }

    return {
      count,
      doubleCount,
      increment
    }
  }
}
</script>

<style scoped>
button {
  margin: 10px;
  padding: 10px;
  font-size: 16px;
}
</style>

在 App.vue 中使用该组件：

<!-- src/App.vue -->
<template>
  <div id="app">
    <counter />
  </div>
</template>

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

export default {
  components: {
    Counter
  }
}
</script>

Vue3的路由与状态管理

Vue Router基础

Vue Router 是 Vue.js 的官方路由库，用于实现客户端的路由功能。它可以帮助你管理应用的 URL 地址，并且在这些地址之间进行导航。

安装 Vue Router

首先，需要安装 Vue Router：

npm install vue-router@next

基本用法

创建一个路由实例，并配置路由表：

import { createRouter, createWebHistory } from 'vue-router'
import Home from './views/Home.vue'
import About from './views/About.vue'

const routes = [
  { path: '/', component: Home },
  { path: '/about', component: About }
]

const router = createRouter({
  history: createWebHistory(),
  routes
})

export default router

在 main.js 中引入并使用路由：

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'

createApp(App).use(router).mount('#app')

路由导航

在组件中通过 router-link 进行导航：

<template>
  <div>
    <router-link to="/">Home</router-link>
    <router-link to="/about">About</router-link>
    <router-view></router-view>
  </div>
</template>

示例代码

创建一个简单的路由应用：

// src/router/index.js
import { createRouter, createWebHistory } from 'vue-router'
import Home from '../views/Home.vue'
import About from '../views/About.vue'

const routes = [
  { path: '/', component: Home },
  { path: '/about', component: About }
]

const router = createRouter({
  history: createWebHistory(),
  routes
})

export default router

在 main.js 中引入并使用路由：

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'

createApp(App).use(router).mount('#app')

在组件中使用 router-link 进行导航：

<!-- src/App.vue -->
<template>
  <div id="app">
    <nav>
      <router-link to="/">Home</router-link> |
      <router-link to="/about">About</router-link>
    </nav>
    <router-view></router-view>
  </div>
</template>

创建两个简单的视图组件：

<!-- src/views/Home.vue -->
<template>
  <div>
    <h1>Home</h1>
  </div>
</template>

<!-- src/views/About.vue -->
<template>
  <div>
    <h1>About</h1>
  </div>
</template>

Vuex入门与使用

Vuex 是 Vue.js 的官方状态管理库，用于管理应用的状态。它可以集中管理应用的状态，使得状态的变化更加可预测和易于调试。

安装 Vuex

首先，需要安装 Vuex：

npm install vuex@next

基本用法

创建一个 Vuex 实例，并配置状态、getter、setter 和 action：

import { createStore } from 'vuex'

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

在 main.js 中引入并使用 Vuex：

import { createApp } from 'vue'
import App from './App.vue'
import store from './store'

createApp(App).use(store).mount('#app')

使用 Vuex

在组件中使用 Vuex 的状态、getter 和 action：

<template>
  <div>
    <p>{{ count }}</p>
    <p>{{ doubleCount }}</p>
    <button @click="increment">点击我</button>
  </div>
</template>

<script>
import { mapState, mapActions, mapGetters } from 'vuex'

export default {
  computed: {
    ...mapState(['count']),
    ...mapGetters(['doubleCount'])
  },
  methods: {
    ...mapActions(['increment'])
  }
}
</script>

示例代码

创建一个 Vuex 应用：

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

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

在 main.js 中引入并使用 Vuex：

// src/main.js
import { createApp } from 'vue'
import App from './App.vue'
import store from './store'

createApp(App).use(store).mount('#app')

在组件中使用 Vuex：

<!-- src/components/Counter.vue -->
<template>
  <div>
    <p>{{ count }}</p>
    <p>{{ doubleCount }}</p>
    <button @click="increment">点击我</button>
  </div>
</template>

<script>
import { mapState, mapActions, mapGetters } from 'vuex'

export default {
  computed: {
    ...mapState(['count']),
    ...mapGetters(['doubleCount'])
  },
  methods: {
    ...mapActions(['increment'])
  }
}
</script>

<style scoped>
button {
  margin: 10px;
  padding: 10px;
  font-size: 16px;
}
</style>

在 App.vue 中使用该组件：

<!-- src/App.vue -->
<template>
  <div id="app">
    <counter />
  </div>
</template>

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

export default {
  components: {
    Counter
  }
}
</script>

Vue3的项目实战

创建一个简单的待办事项应用

创建一个简单的待办事项应用，可以添加、删除和编辑待办事项。

项目结构

创建一个新的项目，并设置基本的项目结构：

vue create todo-app
cd todo-app
npm install

Vue Router

使用 Vue Router 实现多个页面的导航：

<!-- src/router/index.js -->
import { createRouter, createWebHistory } from 'vue-router'
import Home from '../views/Home.vue'

const routes = [
  { path: '/', component: Home }
]

const router = createRouter({
  history: createWebHistory(),
  routes
})

export default router

在 main.js 中引入并使用路由：

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'

createApp(App).use(router).mount('#app')

Vuex

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

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

export default createStore({
  state: {
    todos: [
      { id: 1, text: '学习 Vue 3', completed: false },
      { id: 2, text: '写教程', completed: false }
    ]
  },
  mutations: {
    addTodo(state, todo) {
      state.todos.push(todo)
    },
    toggleTodo(state, id) {
      const todo = state.todos.find(t => t.id === id)
      if (todo) {
        todo.completed = !todo.completed
      }
    },
    removeTodo(state, id) {
      state.todos = state.todos.filter(t => t.id !== id)
    }
  },
  actions: {
    addTodo({ commit }, todo) {
      commit('addTodo', todo)
    },
    toggleTodo({ commit }, id) {
      commit('toggleTodo', id)
    },
    removeTodo({ commit }, id) {
      commit('removeTodo', id)
    }
  },
  getters: {
    allTodos: state => state.todos,
    completedTodos: state => state.todos.filter(t => t.completed),
    activeTodos: state => state.todos.filter(t => !t.completed)
  }
})

在 main.js 中引入并使用 Vuex：

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

createApp(App).use(router).use(store).mount('#app')

添加、删除和编辑待办事项

在组件中使用 Vuex 来添加、删除和编辑待办事项：

<!-- src/components/TodoList.vue -->
<template>
  <div>
    <ul>
      <li v-for="todo in todos" :key="todo.id">
        <input type="checkbox" v-model="todo.completed" @change="toggleTodo(todo.id)" />
        <span :class="{ completed: todo.completed }">{{ todo.text }}</span>
        <button @click="removeTodo(todo.id)">删除</button>
      </li>
    </ul>
    <input v-model="newTodo" placeholder="添加一个新的待办事项" />
    <button @click="addTodo">添加</button>
  </div>
</template>

<script>
import { mapState, mapActions } from 'vuex'

export default {
  computed: {
    ...mapState(['todos', 'newTodo'])
  },
  methods: {
    ...mapActions(['addTodo', 'toggleTodo', 'removeTodo'])
  }
}
</script>

<style scoped>
.completed {
  text-decoration: line-through;
}
</style>

在 App.vue 中使用该组件：

<!-- src/App.vue -->
<template>
  <div id="app">
    <todo-list />
  </div>
</template>

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

export default {
  components: {
    TodoList
  }
}
</script>

示例代码

创建一个完整的待办事项应用：

<!-- src/router/index.js -->
import { createRouter, createWebHistory } from 'vue-router'
import Home from '../views/Home.vue'

const routes = [
  { path: '/', component: Home }
]

const router = createRouter({
  history: createWebHistory(),
  routes
})

export default router

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

export default createStore({
  state: {
    todos: [
      { id: 1, text: '学习 Vue 3', completed: false },
      { id: 2, text: '写教程', completed: false }
    ]
  },
  mutations: {
    addTodo(state, todo) {
      state.todos.push(todo)
    },
    toggleTodo(state, id) {
      const todo = state.todos.find(t => t.id === id)
      if (todo) {
        todo.completed = !todo.completed
      }
    },
    removeTodo(state, id) {
      state.todos = state.todos.filter(t => t.id !== id)
    }
  },
  actions: {
    addTodo({ commit }, todo) {
      commit('addTodo', todo)
    },
    toggleTodo({ commit }, id) {
      commit('toggleTodo', id)
    },
    removeTodo({ commit }, id) {
      commit('removeTodo', id)
    }
  },
  getters: {
    allTodos: state => state.todos,
    completedTodos: state => state.todos.filter(t => t.completed),
    activeTodos: state => state.todos.filter(t => !t.completed)
  }
})

// src/main.js
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

createApp(App).use(router).use(store).mount('#app')

<!-- src/components/TodoList.vue -->
<template>
  <div>
    <ul>
      <li v-for="todo in todos" :key="todo.id">
        <input type="checkbox" v-model="todo.completed" @change="toggleTodo(todo.id)" />
        <span :class="{ completed: todo.completed }">{{ todo.text }}</span>
        <button @click="removeTodo(todo.id)">删除</button>
      </li>
    </ul>
    <input v-model="newTodo" placeholder="添加一个新的待办事项" />
    <button @click="addTodo">添加</button>
  </div>
</template>

<script>
import { mapState, mapActions } from 'vuex'

export default {
  computed: {
    ...mapState(['todos', 'newTodo'])
  },
  methods: {
    ...mapActions(['addTodo', 'toggleTodo', 'removeTodo'])
  }
}
</script>

<style scoped>
.completed {
  text-decoration: line-through;
}
</style>

<!-- src/App.vue -->
<template>
  <div id="app">
    <todo-list />
  </div>
</template>

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

export default {
  components: {
    TodoList
  }
}
</script>
``

## Vue3与后端API的交互

在 Vue 3 应用中，我们可以使用 Axios 与后端 API 进行交互。Axios 是一个强大的 HTTP 客户端，可以在浏览器和 Node.js 中使用。

### 安装 Axios

首先，安装 Axios：

```bash
npm install axios

基本用法

在组件中使用 Axios 发送请求：

<template>
  <div>
    <ul>
      <li v-for="item in items" :key="item.id">
        {{ item.name }}
      </li>
    </ul>
  </div>
</template>

<script>
import axios from 'axios'

export default {
  data() {
    return {
      items: []
    }
  },
  created() {
    axios.get('/api/items')
      .then(response => {
        this.items = response.data
      })
      .catch(error => {
        console.error(error)
      })
  }
}
</script>

示例代码

创建一个简单的 API 请求组件：

<!-- src/components/ApiRequest.vue -->
<template>
  <div>
    <ul>
      <li v-for="item in items" :key="item.id">
        {{ item.name }}
      </li>
    </ul>
  </div>
</template>

<script>
import axios from 'axios'

export default {
  data() {
    return {
      items: []
    }
  },
  created() {
    axios.get('/api/items')
      .then(response => {
        this.items = response.data
      })
      .catch(error => {
        console.error(error)
      })
  }
}
</script>

<style scoped>
li {
  list-style: none;
  padding: 10px;
  border: 1px solid #ccc;
}
</style>

在 App.vue 中使用该组件：

<!-- src/App.vue -->
<template>
  <div id="app">
    <api-request />
  </div>
</template>

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

export default {
  components: {
    ApiRequest
  }
}
</script>

示例代码

创建一个完整的 API 请求应用：

<!-- src/components/ApiRequest.vue -->
<template>
  <div>
    <ul>
      <li v-for="item in items" :key="item.id">
        {{ item.name }}
      </li>
    </ul>
  </div>
</template>

<script>
import axios from 'axios'

export default {
  data() {
    return {
      items: []
    }
  },
  created() {
    axios.get('/api/items')
      .then(response => {
        this.items = response.data
      })
      .catch(error => {
        console.error(error)
      })
  }
}
</script>

<style scoped>
li {
  list-style: none;
  padding: 10px;
  border: 1px solid #ccc;
}
</style>

<!-- src/App.vue -->
<template>
  <div id="app">
    <api-request />
  </div>
</template>

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

export default {
  components: {
    ApiRequest
  }
}
</script>

总结与进阶资源推荐

常见问题解答

1. 什么是 Composition API？

Composition API 是 Vue 3 新引入的一种 API，它提供了一种更灵活、更高效的方式来组织组件逻辑。通过 setup 函数，可以更自由地组合和重用逻辑。

2. 如何处理 Vue 3 中的类型提示？

Vue 3 支持 TypeScript，可以通过在 setup 函数中使用类型提示来确保代码的类型正确性。例如：

import { ref } from 'vue'

export default {
  setup() {
    const count = ref<number>(0)
    return { count }
  }
}

3. 如何在 Vue 3 中使用插槽？

插槽（slot）是 Vue 中用于内容分发的特性。在 Vue 3 中使用插槽的方式与 Vue 2 类似。

<template>
  <div>
    <slot></slot>
  </div>
</template>

4. 如何在 Vue 3 中使用 Teleport 和 Fragment？

Teleport 用来将组件的内容渲染到 DOM 中的任意位置，Fragment 用来包裹多个元素，使其作为一个整体渲染而不会在其外部产生多余的 DOM 元素。

<template>
  <teleport to="#some-element">
    <div>
      <fragment>
        <p>Fragment 内容</p>
      </fragment>
    </div>
  </teleport>
</template>

5. 如何使用 Vue 3 的 Tree-shaking？

Vue 3 支持 Tree-shaking，通过在编译时移除未使用的代码，可以减小项目的体积。确保在打包时使用了正确的配置。

更多学习资源推荐

基础教程

进阶教程

实践项目

Vue 3 实践项目

社区支持

开发工具

常见问题解答

Vue.js 常见问题

最佳实践

以上资源可以帮助你在 Vue 3 的学习和开发中更加高效和深入地理解这个框架。

点击查看更多内容

为 TA 点赞

若觉得本文不错，就分享一下吧！

评论

评论

共同学习，写下你的评论

评论加载中...

展开查看更多评论

作者其他优质文章

正在加载中

慕沐林林

手记
篇

粉丝

29

获赞与收藏

116

关注作者，订阅最新文章

相关文章推荐

【java入门】新手专属学习路线

少侠，请收下这份前端开发自学资料（书籍+教程）~

Docker 入门资料收集

Python学习资料与博客推荐

史上最全计算机类编程资料大集合

阅读免费教程

后端通用面试教程

41个小节 30273 342

网络编程入门教程

20个小节 12461 235

Pandas 入门教程

25个小节 18362 330

推荐

评论

收藏

共同学习，写下你的评论



感谢您的支持，我会继续努力的～

扫码打赏，你说多少就多少

赞赏金额会直接到老师账户

支付方式

打开微信扫一扫，即可进行扫码打赏哦

今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与放弃机会

点击
抽奖

慕课手记新用户专享福利

恭喜你，你的运气太好了，居然抽中了 100个积分！

恭喜你，抽中了价值元的专栏！

太棒了，直接落到你账户里！

积分商城里的罗技鼠标、机械键盘、
Kindle 阅读器、小米平衡车
Apple iPad （10.2英寸）、大额优惠券
在等着你去兑换了噢

作者：

免费赠送

兑换码：1111222211 复制

优惠券可用于购买实战课、体系课
无门槛使用

先去看看，有什么好东西马上兑换我爱学习，选课去


热搜

最近搜索清空

Vue3资料：新手入门教程与实战技巧详解

步骤 1：安装 Node.js 和 npm

步骤 2：安装 Vue CLI

步骤 3：创建 Vue 3 项目

步骤 4：启动开发服务器

步骤 5：使用 Vue 3 开发

示例代码

组件的基本结构

组件的使用

示例代码

生命周期钩子

组件间通信

自定义指令

响应式数据

响应式依赖追踪

响应式数据的监听

基本数据绑定

计算属性和侦听器

示例代码

安装 Vue Router

基本用法

路由导航

示例代码

安装 Vuex

基本用法

使用 Vuex

示例代码

项目结构

Vue Router

Vuex

添加、删除和编辑待办事项

示例代码

基本用法

示例代码

示例代码

1. 什么是 Composition API？

2. 如何处理 Vue 3 中的类型提示？

3. 如何在 Vue 3 中使用插槽？

4. 如何在 Vue 3 中使用 Teleport 和 Fragment？

5. 如何使用 Vue 3 的 Tree-shaking？

基础教程

进阶教程

实践项目

社区支持

开发工具

常见问题解答

最佳实践

相关文章推荐

阅读免费教程