首頁手記 Vue3入門教程：輕松搭建你的第一個Vue3應用

Vue3入門教程：輕松搭建你的第一個Vue3應用

標簽：

Vue.js

概述

本文全面介绍了如何使用Vue3搭建你的第一个Vue3应用，包括Vue3的主要特点、环境搭建、安装步骤以及项目创建过程。文章还详细讲解了Vue3的基本语法、组件化开发、路由管理和常见问题解决方法。通过实战演练，你将学会从零开始构建一个简单的CRUD应用，并集成第三方库与API调用。

Vue3入门教程：轻松搭建你的第一个Vue3应用

Vue3简介与安装

Vue3的主要特点

Vue.js 是一个用于构建用户界面的渐进式框架。Vue3是Vue.js的最新版本，具有许多改进和新增特性，主要包括：

性能优化：Vue3通过重构编译器、优化虚拟DOM等手段提升了应用的执行速度。
TypeScript兼容性：Vue3提供了更好的TypeScript支持，包括TypeScript类型推断和更丰富的类型定义。
Composition API：Vue3引入了Composition API，提供了一种更灵活的方式来组织逻辑。
更好的错误处理：Vue3改进了错误处理机制，提供了更详细的错误信息和堆栈跟踪。
Tree-shaking友好的API：Vue3的API设计更加模块化，有利于代码树摇动（tree-shaking），以减少打包文件的大小。

环境搭建与安装步骤

安装Vue3之前，你需要确保已经安装了Node.js。Node.js的最新版本可以在其官方网站上下载。本教程将使用Vue CLI 4.x版本来快速搭建Vue3项目。

步骤1：安装Node.js

访问Node.js的官方下载页面，下载并安装最新版本的Node.js。
安装完成后，可以通过命令行验证安装是否成功：

node -v
npm -v

如果输出了版本号，说明安装成功。

步骤2：安装Vue CLI

Vue CLI是Vue.js的官方脚手架，用于快速搭建Vue项目。使用npm命令安装Vue CLI：

npm install -g @vue/cli

安装完成后，可以通过命令行验证安装是否成功：

vue --version

输出版本号代表安装成功。

步骤3：创建Vue3项目

使用Vue CLI创建一个新的Vue3项目。首先，创建一个项目目录，然后使用vue create命令创建项目：

mkdir my-vue3-project
cd my-vue3-project
vue create . --preset vue3

这里使用了--preset vue3参数来指定使用Vue3版本的模板。

创建第一个Vue3项目

创建项目后，Vue CLI会自动安装依赖并生成项目结构。项目目录结构如下：

my-vue3-project/
├── node_modules/
├── public/
├── src/
│   ├── assets/
│   ├── components/
│   ├── App.vue
│   ├── main.js
├── .browserslistrc
├── .editorconfig
├── .gitignore
├── babel.config.js
├── package.json
├── README.md
├── tsconfig.json
└── vue.config.js

接下来，我们可以通过运行以下命令来启动开发服务器：

npm run serve

这将会启动一个本地开发服务器，访问http://localhost:8080就可以看到默认的Vue应用。

Vue3的基本语法

数据绑定与响应式系统

在Vue3中，响应式系统是核心功能之一，它允许开发者在数据发生变化时自动更新视图。以下是一些基本概念：

响应式数据

为了使数据变得响应式，你可以使用ref或reactive函数来声明响应式数据。

import { ref } from 'vue'

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

<template>
  <div>
    <p>{{ count }}</p>
    <button @click="count++">Increment</button>
  </div>
</template>

监听数据变化

使用watch函数来监听数据的变化：

import { ref, watch } from 'vue'

export default {
  setup() {
    const count = ref(0)
    watch(count, (newValue, oldValue) => {
      console.log(`count changed from ${oldValue} to ${newValue}`)
    })
    return { count }
  }
}

计算属性

计算属性用于执行复杂的逻辑处理，它基于它们的相关依赖进行缓存，只有依赖发生变化时才会重新计算。

import { computed } from 'vue'

export default {
  setup() {
    const a = ref(1)
    const b = ref(2)
    const sum = computed(() => a.value + b.value)
    return { sum }
  }
}

监听器

监听器用于监听数据的变化，并执行相应的操作。

import { ref, watch } from 'vue'

export default {
  setup() {
    const count = ref(0)
    watch(count, (newValue, oldValue) => {
      console.log(`count changed from ${oldValue} to ${newValue}`)
    })
    return { count }
  }
}

模板语法与指令使用

Vue的模板语法允许开发者使用HTML来定义模板，Vue会负责将这些模板渲染成实际的DOM。

基本语法

<template>
  <div>
    <h1>{{ message }}</h1>
    <p v-if="show">Hello, Vue!</p>
    <ul>
      <li v-for="item in items" :key="item.id">{{ item.text }}</li>
    </ul>
  </div>
</template>

这里使用了{{ }}语法来插入变量，v-if指令来条件渲染元素，v-for指令来循环渲染列表。

双向绑定示例

双向绑定可以实现输入框的双向数据绑定：

<template>
  <div>
    <input v-model="message" placeholder="Enter your message">
    <p>{{ message }}</p>
  </div>
</template>

<script>
export default {
  setup() {
    const message = ref('')
    return { message }
  }
}
</script>

指令

Vue提供了丰富的指令，如v-bind、v-on等。下面是一些常用的指令及其用法：

<div v-bind:class="{ active: isActive }">
  <button v-on:click="onClick">Click me</button>
</div>

事件处理

事件处理可以绑定到元素的任何事件，如点击、输入等。也可以监听自定义事件：

<button v-on:click="handleClick">Click me</button>

<div>
  <child-component @custom-event="handleCustomEvent"></child-component>
</div>

组件化开发

组件的基本概念

组件是Vue应用的基本构建块，每个组件都有自己的视图、逻辑和数据。组件化开发可以提高代码的可复用性和可维护性。

创建组件

组件通常包含一个template标签、一个script标签（用于逻辑）和一个可选的style标签（用于样式）。

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

<script>
export default {
  setup() {
    const message = ref('Hello from component')
    return { message }
  }
}
</script>

<style scoped>
h1 {
  color: #42b983;
}
</style>

注册组件

在Vue中，可以使用components选项来注册组件，或者使用setup函数中的defineComponent来定义组件：

import { createApp } from 'vue'
import MyComponent from './components/MyComponent.vue'

const app = createApp({
  components: {
    MyComponent
  }
})
app.mount('#app')

单文件组件的创建与使用

单文件组件（.vue文件）是一种组织Vue组件的方式，它将HTML、JavaScript和CSS组织在同一个文件中。

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

<script>
export default {
  setup() {
    const message = ref('Hello from single file component')
    return { message }
  }
}
</script>

<style scoped>
h1 {
  color: #42b983;
}
</style>

传值与事件传递

传值

在父组件中传递数据到子组件：

<template>
  <div>
    <child-component :message="parentMessage"></child-component>
  </div>
</template>

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

export default {
  components: {
    ChildComponent
  },
  setup() {
    const parentMessage = ref('Message from parent')
    return { parentMessage }
  }
}
</script>

事件传递

在子组件中触发事件并传递给父组件：

<template>
  <div>
    <button @click="handleClick">Click me</button>
  </div>
</template>

<script>
export default {
  setup() {
    const emit = defineEmits(['childEvent'])
    const handleClick = () => {
      emit('childEvent', 'child data')
    }
    return { handleClick }
  }
}
</script>

<template>
  <div>
    <child-component @child-event="handleChildEvent"></child-component>
  </div>
</template>

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

export default {
  components: {
    ChildComponent
  },
  setup() {
    const handleChildEvent = (data) => {
      console.log('Received data from child:', data)
    }
    return { handleChildEvent }
  }
}
</script>

路由管理

路由的基本概念

路由允许用户通过点击链接或按钮来导航不同的页面。Vue Router是Vue.js的官方路由库，用于实现路由功能。

安装与配置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

路由导航与参数传递

在组件中使用router-link标签进行导航，并使用router-view标签显示对应的组件：

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

传递参数到路由：

<router-link :to="{ name: 'about', params: { id: 123 }}">About</router-link>

接收参数：

import { useRoute } from 'vue-router'

export default {
  setup() {
    const route = useRoute()
    const id = route.params.id
    return { id }
  }
}

路由配置错误解决

如果遇到路由配置错误，可以检查以下几点：

确保路径名称与传递名称一致：

const routes = [
 { path: '/home', component: Home },
 { path: '/about', component: About, name: 'about' },
 { path: '/user/:id', component: User, name: 'user' }
]

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

错误示例：路径名称不一致导致错误。
解决方案：确保路径名称与传递名称一致。

检查路由配置文件路径是否正确：
- 确保Home、About、User组件的路径与配置文件中定义的路径一致。

常见问题解决

响应式问题排查

如果遇到响应式问题，可以检查以下几点：

确保使用了ref或reactive声明响应式数据。
检查数据传递是否正确。
确保在模板中正确使用了响应式数据。

路由配置错误解决

遇到路由配置错误，可以检查以下几点：

确保路由配置文件中路径与组件路径一致。
检查router-view标签是否正确放置。
确保路由名称与链接名称一致。

组件间通信的常见问题

解决组件间通信问题，可以考虑以下方法：

使用props从父组件向子组件传递数据。
使用emit从子组件向父组件传递数据。
使用Vue的提供/注入机制进行跨组件通信。

实战演练

从零开始构建一个简单的CRUD应用

创建项目结构

首先，使用Vue CLI创建一个新项目：

vue create my-crud-app
cd my-crud-app

添加数据模型

定义一个简单的数据模型，如用户列表：

import { ref } from 'vue'

export default {
  setup() {
    const users = ref([
      { id: 1, name: 'John Doe' },
      { id: 2, name: 'Jane Doe' }
    ])
    const addUser = (name) => {
      users.value.push({ id: users.value.length + 1, name })
    }
    return { users, addUser }
  }
}

创建组件

创建一个用户列表组件和一个用户表单组件：

<!-- UserList.vue -->
<template>
  <div>
    <ul>
      <li v-for="user in users" :key="user.id">{{ user.name }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  props: ['users']
}
</script>

<!-- UserForm.vue -->
<template>
  <div>
    <input v-model="name" placeholder="Enter name">
    <button @click="addUser">Add User</button>
  </div>
</template>

<script>
export default {
  props: ['addUser'],
  setup() {
    const name = ref('')
    return { name }
  }
}
</script>

组件组合

在父组件中组合并使用这两个组件：

<!-- App.vue -->
<template>
  <div>
    <user-form @add-user="users.push({ id: users.length + 1, name: $event })"></user-form>
    <user-list :users="users"></user-list>
  </div>
</template>

<script>
import UserForm from './components/UserForm.vue'
import UserList from './components/UserList.vue'

export default {
  components: {
    UserForm,
    UserList
  },
  setup() {
    const users = ref([])
    return { users }
  }
}
</script>

使用Vue CLI快速搭建项目

要快速搭建一个完整的Vue3项目，可以使用Vue CLI的模板选项：

vue create my-project --preset vue3

集成第三方库与API调用

集成第三方库，如Axios用于HTTP请求：

npm install axios

在组件中使用Axios调用API：

import axios from 'axios'

export default {
  setup() {
    const fetchData = async () => {
      const response = await axios.get('https://api.example.com/data')
      console.log(response.data)
    }
    return { fetchData }
  }
}

通过以上步骤，你可以从零开始构建一个简单的CRUD应用，并集成第三方库与API调用。

點擊查看更多內容

為 TA 點贊

若覺得本文不錯，就分享一下吧！

評論

評論

共同學習，寫下你的評論

評論加載中...

展開查看更多評論

作者其他優質文章

正在加載中

慕蓋茨4494581

手記
篇

粉絲

12

獲贊與收藏

29

關注作者，訂閱最新文章

閱讀免費教程

后端通用面試教程

41個小節 32074 358

網絡編程入門教程

20個小節 13213 249

Pandas 入門教程

25個小節 19595 369

推薦

評論

收藏

共同學習，寫下你的評論



感謝您的支持，我會繼續努力的～

掃碼打賞，你說多少就多少

贊賞金額會直接到老師賬戶

支付方式

打開微信掃一掃，即可進行掃碼打賞哦

今天注冊有機會得

100積分直接送

付費專欄免費學

大額優惠券免費領

立即參與放棄機會

點擊
抽獎

慕課手記新用戶專享福利

恭喜你，你的運氣太好了，居然抽中了 100個積分！

恭喜你，抽中了價值元的專欄！

太棒了，直接落到你賬戶里！

積分商城里的羅技鼠標、機械鍵盤、
Kindle 閱讀器、小米平衡車
Apple iPad （10.2英寸）、大額優惠券
在等著你去兌換了噢

作者：

免費贈送

兌換碼：1111222211 復制

優惠券可用于購買實戰課、體系課
無門檻使用

先去看看，有什么好東西馬上兌換我愛學習，選課去


亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

熱搜

最近搜索清空

Vue3入門教程：輕松搭建你的第一個Vue3應用

Vue3的主要特点

环境搭建与安装步骤

步骤1：安装Node.js

步骤2：安装Vue CLI

步骤3：创建Vue3项目

创建第一个Vue3项目

数据绑定与响应式系统

响应式数据

监听数据变化

计算属性

监听器

模板语法与指令使用

基本语法

双向绑定示例

指令

事件处理

组件的基本概念

创建组件

注册组件

单文件组件的创建与使用

传值与事件传递

传值

事件传递

路由管理

路由的基本概念

安装与配置Vue Router

路由导航与参数传递

路由配置错误解决

响应式问题排查

路由配置错误解决

组件间通信的常见问题

从零开始构建一个简单的CRUD应用

创建项目结构

添加数据模型

创建组件

组件组合

使用Vue CLI快速搭建项目

集成第三方库与API调用

閱讀免費教程