首頁手記 Vue3入門指南：輕松搭建你的第一個Vue3項目

Vue3入門指南：輕松搭建你的第一個Vue3項目

標簽：

Vue.js

概述

本文将详细介绍Vue3的新特性、与Vue2的区别以及如何搭建和优化Vue3项目。

Vue3简介

Vue3的新特性介绍

Vue 3 是 Vue.js 的最新版本，带来了许多新特性和改进：

Composition API：这是一个新的 API 设计，允许更灵活地组织组件逻辑。
Reactivity System：Vue 3 的响应式系统进行了重构，性能大幅提升，尤其是在初始化和变更检测方面。
Teleport API：允许将元素渲染到 DOM 中的任何位置，而不仅仅是组件内部。
Fragments：在 Vue 3 中，可以返回多个根元素，而无需包裹在一个额外的元素中。
Nullable Refs：改进了 ref 的处理方式，使得在组件间传递 null 或 undefined 更为方便。
Custom Renderer API：Vue 3 提供了自定义渲染器的 API，使开发人员能够更灵活地控制渲染过程。
TypeScript Support：Vue 3 与 TypeScript 更加兼容，提供了更严格的类型检查和更好的类型支持。

Vue3与Vue2的区别

Vue 3 相较于 Vue 2 有以下几个主要区别：

性能提升：
- 渲染速度：Vue 3 通过新的编译器和优化过的响应式系统，显著提高了渲染速度。
- 变更检测：变更检测的性能得到了大幅提升，特别是在初始渲染时。
- 内存优化：Vue 3 通过更有效的内存管理和对象池技术，减少了内存占用。
API设计：
- Composition API：Vue 3 引入了 Composition API，提供了更为灵活的逻辑组织方式。
- Options API：虽然仍然支持 Options API，但 Composition API 逐渐成为推荐的方式。
- 新特性：Vue 3 增加了如 Teleport, Fragments 等新特性，提供了更多的灵活性。
兼容性与向下兼容：
- 兼容性：Vue 3 保持与 Vue 2 的大部分 API 兼容，使得迁移变得更简单。
- 向下兼容：Vue 3 提供了 vue-compat 包，允许在 Vue 2 项目中使用 Vue 3 的新特性。
TypeScript 支持：
- 类型支持：Vue 3 在 TypeScript 支持上有显著提升，提供了更好的类型注解和类型检查。

示例代码

以下是一个简单的 Vue 3 组件示例，展示了新的 Composition API：

<template>
  <div>
    <p>姓名: {{ name }}</p>
    <p>年龄: {{ age }}</p>
  </div>
</template>

<script setup>
import { ref } from 'vue';

const name = ref('张三');
const age = ref(25);
</script>

<style scoped>
/* 样式代码 */
</style>

环境搭建

安装Node.js

Vue 3 项目需要 Node.js 运行环境。以下是安装 Node.js 的步骤：

访问 Node.js 官方网站（https://nodejs.org/）。
选择适合你操作系统的安装包，并下载最新版本的 Node.js。
安装 Node.js，并确保安装过程中勾选了“Add to PATH”选项。

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

node -v
npm -v

这两个命令分别会显示 Node.js 和 npm 的版本信息。

安装Vue CLI

Vue CLI 是 Vue.js 的官方命令行工具，通过它可以快速搭建 Vue 项目。以下是安装 Vue CLI 的步骤：

打开命令行工具。
运行以下命令安装 Vue CLI：
```
npm install -g @vue/cli
```

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

vue --version

如果输出了 Vue CLI 的版本信息，说明安装成功。

使用Vue CLI创建Vue3项目

使用 Vue CLI 创建一个新的 Vue 3 项目，步骤如下：

打开命令行工具。
运行以下命令创建一个新的 Vue 3 项目：
```
vue create my-vue3-project
```

在创建项目过程中，Vue CLI 会提示选择预设配置。选择 Manually select features，然后选择 Vue 3 作为预设配置。

项目创建完成后，导航到项目目录：
```
cd my-vue3-project
```
运行项目：
```
npm run serve
```

此时，浏览器会自动打开，并显示默认的 Vue 3 项目。

示例代码

以下是 Vue CLI 创建项目时生成的默认 App.vue 文件内容：

<template>
  <div id="app">
    <img alt="Vue logo" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="./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项目基础

项目结构解析

Vue 3 项目的典型结构如下：

my-vue3-project/
├── node_modules/
├── public/
│   ├── index.html
│   └── favicon.ico
├── src/
│   ├── assets/
│   │   └── logo.png
│   ├── components/
│   │   └── HelloWorld.vue
│   ├── App.vue
│   └── main.js
├── .gitignore
├── package.json
├── babel.config.js
└── vue.config.js

node_modules/：存放项目依赖的包。
public/：存放静态资源文件，如 index.html 和 favicon.ico。
src/：存放项目的源代码。
- assets/：存放静态资源，如图片。
- components/：存放组件文件。
- App.vue：项目的主组件。
- main.js：项目的入口文件。
.gitignore：Git 版本控制的忽略文件。
package.json：存放项目的依赖包和脚本配置。
babel.config.js：Babel 配置文件。
vue.config.js：Vue CLI 的配置文件。

路由配置

Vue 3 使用 Vue Router 作为路由管理器。以下是配置路由的基本步骤：

安装 Vue Router：
```
npm install vue-router@next
```

在 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;


3. 在 `main.js` 中引入并使用路由配置：
```javascript
import { createApp } from 'vue';
import App from './App.vue';
import router from './router';

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

在模板中使用 <router-view> 来展示路由组件：

<template>
<div id="app">
<router-view></router-view>
</div>
</template>

资源管理

资源管理包括静态资源（如图片、CSS 文件）和动态资源（如数据）。以下是资源管理的一些常见操作：

静态资源：

静态资源通常放在 public/ 目录下，可以直接通过路径访问。

在组件中引入静态资源：


<template>
<img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="./assets/logo.png" alt="Logo">
</template>


2. **动态资源**：
   - 动态资源通常通过网络请求获取，可以使用 Axios 或 Fetch API。
   - 使用 Axios 获取数据：
```javascript
import axios from 'axios';

export default {
  data() {
    return {
      data: []
    }
  },
  created() {
    axios.get('https://api.example.com/data')
      .then(response => {
        this.data = response.data;
      })
      .catch(error => {
        console.error(error);
      });
  }
}

组件化开发

创建第一个Vue3组件

创建 Vue 3 组件的步骤如下：

在 src/components/ 目录下创建一个新的 .vue 文件，例如 MyComponent.vue。

编写组件的模板、脚本和样式：


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

const title = ref('Hello, Vue 3');
</script>


3. 在父组件中使用新创建的组件：
```vue
<template>
  <div id="app">
    <MyComponent></MyComponent>
  </div>
</template>

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

Props和事件传递

组件之间可以通过 props 和事件进行通信：

Props：

在子组件中声明 props：


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

const props = defineProps({
message: String
});
</script>


- 在父组件中传递 props：
```vue
<template>
  <div id="app">
    <MyComponent message="Hello, World!"></MyComponent>
  </div>
</template>

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

Events：

在子组件中定义事件：


<template>
<div>
<button @click="emitEvent">Click Me</button>
</div>
</template>

const emit = defineEmits(['clickEvent']);

const emitEvent = () => {
emit('clickEvent', 'Hello, Parent!');
};
</script>


- 在父组件中监听事件：
```vue
<template>
  <div id="app">
    <MyComponent @clickEvent="handleClick"></MyComponent>
  </div>
</template>

<script setup>
import MyComponent from './components/MyComponent.vue';
const handleClick = (message) => {
  console.log(message);
}
</script>

生命周期钩子

Vue 3 中的生命周期钩子与 Vue 2 类似，但有些变化。以下是一些常用的生命周期钩子：

created：在组件实例被创建之前调用。
mounted：在组件挂载到 DOM 后调用。
beforeUnmount：在组件卸载前调用。

unmounted：在组件卸载后调用。


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

const message = ref('Hello, Lifecycle Hooks!');

onMounted(() => {
console.log('Component is mounted');
});

onBeforeUnmount(() => {
console.log('Component is about to be unmounted');
});

onUnmounted(() => {
console.log('Component is unmounted');
});
</script>


## 常见问题解决

### 常见错误与解决方法
1. **安装问题**：
   - **错误**：`npm install` 时报错。
   - **解决方法**：确保 Node.js 和 npm 已经正确安装，清理 npm 缓存并重新安装依赖：
```bash
npm cache clean --force
npm install

路由配置问题：
- 错误：路由配置不生效。
- 解决方法：确保路由配置文件 router/index.js 中的路由定义正确，并且在 main.js 中正确引入了路由配置。
组件通信问题：
- 错误：props 或事件传递失败。
- 解决方法：确保在子组件中正确声明 props 和事件，在父组件中正确传递 props 和监听事件。

性能优化技巧

懒加载：

使用 import() 进行按需加载：

const About = () => import('./views/About.vue');

虚拟 DOM 优化：

使用 key 属性优化列表渲染：


<template>
<ul>
<li v-for="(item, index) in items" :key="item.id">{{ item.title }}</li>
</ul>
</template>

const items = ref([
{ id: 1, title: 'Item 1' },
{ id: 2, title: 'Item 2' },
{ id: 3, title: 'Item 3' }
]);
</script>


3. **减少不必要的重新渲染**：
   - 使用 `v-once` 防止元素多次渲染：
```vue
<template>
  <div v-once>
    {{ staticContent }}
  </div>
</template>

<script setup>
import { ref } from 'vue';

const staticContent = ref('This content will not be updated');
</script>

小结与扩展

项目部署

将 Vue 3 项目部署到生产环境的步骤如下：

构建项目：
- 运行以下命令构建项目：
```
npm run build
```

构建完成后，会在 dist/ 目录下生成静态文件。

部署到服务器：
- 将 dist/ 目录下的文件上传到服务器。
- 配置服务器以提供静态文件服务，例如使用 Nginx 或 Apache。

Vue3社区与生态

Vue 3 拥有活跃的社区和丰富的生态资源：

官方论坛：Vue.js 官方论坛，解决技术问题和交流最佳实践（https://forum.vuejs.org/）。
GitHub：Vue.js 和 Vue CLI 的 GitHub 仓库，贡献代码和查看最新动态（https://github.com/vuejs/vue/）。
社区插件和库：Vue.js 生态中有大量插件和库，如 Vue Router、Vuex、Vue CLI 等，可以丰富项目功能。

點擊查看更多內容

為 TA 點贊

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

評論

評論

共同學習，寫下你的評論

評論加載中...

展開查看更多評論

作者其他優質文章

正在加載中

富國滬深

算法工程師

手記
篇

粉絲

41

獲贊與收藏

160

關注作者，訂閱最新文章

閱讀免費教程

后端通用面試教程

41個小節 32074 358

網絡編程入門教程

20個小節 13196 249

Pandas 入門教程

25個小節 19564 369

推薦

評論

收藏

共同學習，寫下你的評論



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

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

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

支付方式

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

今天注冊有機會得

100積分直接送

付費專欄免費學

大額優惠券免費領

立即參與放棄機會

點擊
抽獎

慕課手記新用戶專享福利

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

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

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

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

作者：

免費贈送

兌換碼：1111222211 復制

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

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

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

Vue3入門指南：輕松搭建你的第一個Vue3項目

Vue3的新特性介绍

Vue3与Vue2的区别

示例代码

安装Node.js

安装Vue CLI

使用Vue CLI创建Vue3项目

示例代码

项目结构解析

路由配置

资源管理

创建第一个Vue3组件

Props和事件传递

生命周期钩子

性能优化技巧

项目部署

推荐学习资源

Vue3社区与生态

閱讀免費教程

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

熱搜

最近搜索清空

Vue3入門指南：輕松搭建你的第一個Vue3項目

Vue3的新特性介绍

Vue3与Vue2的区别

示例代码

安装Node.js

安装Vue CLI

使用Vue CLI创建Vue3项目

示例代码

项目结构解析

路由配置

资源管理

创建第一个Vue3组件

Props和事件传递

生命周期钩子

性能优化技巧

项目部署

推荐学习资源

Vue3社区与生态

閱讀免費教程