Vue3入门教程：从零开始搭建你的第一个Vue3项目-原创手记-慕课网

概述

本文详细介绍了如何从零开始搭建Vue3项目，涵盖环境搭建、基础语法、路由与状态管理以及实战应用。通过本文，你将熟悉Vue3的新特性，如Composition API和Teleport，并了解如何使用Vue CLI创建项目。此外，文章还提供了项目实战案例，帮助你更好地理解和应用Vue3的各项功能。

Vue3简介

Vue3新特性概述

Vue3在Vue2的基础上引入了许多新特性，这些特性旨在提升应用的性能、可维护性和开发效率。

Composition API：提供了更灵活的API，便于组件逻辑的组织和复用。

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

<script>
import { ref, onMounted } from 'vue';

export default {
setup() {
  const message = ref('Hello, Composition API!');

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

  return {
    message
  };
}
};
</script>

Teleport：允许将子组件渲染到DOM中的任何位置，增强了组件灵活性。

<template>
<teleport to="body">
  <div class="modal">
    <p>这是一个模态框</p>
  </div>
</teleport>
</template>

<style>
.modal {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: white;
padding: 20px;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
</style>

Fragments：允许组件返回一个以上根节点，使得HTML结构更加灵活。

<template>
<div>
  <p>Fragment示例一</p>
  <p>Fragment示例二</p>
</div>
</template>

Frigthful Reconciliation：通过更智能的DOM更新策略，提升了性能。
自定义渲染器：支持更灵活的渲染策略，如Web Components兼容等。
更好的TypeScript支持：简化了与TypeScript的集成，增强了类型检查。

Vue3与Vue2的区别

Vue3与Vue2的主要区别在于：

Composition API：在Vue3中引入了Composition API，它提供了一个更灵活的方式来组织和管理组件逻辑，使得代码更易于复用，更易于维护。而在Vue2中，逻辑管理主要依赖于Options API。
性能优化：Vue3通过优化响应式系统、提升编译器性能和改进渲染机制等方式，带来了显著的性能提升。
更好的TypeScript支持：Vue3提供了更好的TypeScript支持，使得类型安全更加容易实现。
其他特性：例如Teleport、Fragments等新特性，以及对旧特性的改进，如模板编译优化等。

开发环境搭建

安装Node.js

首先，你需要安装Node.js。你可以访问Node.js官网（https://nodejs.org/）下载最新版本。

安装Vue CLI

安装完成后，还需要安装Vue CLI。Vue CLI是一个官方CLI工具，它可以帮助你快速搭建Vue项目。首先，确保已安装最新版本的Node.js，然后在命令行中输入以下命令来安装Vue CLI：

npm install -g @vue/cli

创建Vue3项目

安装完Vue CLI后，你可以使用它来创建一个新的Vue项目。打开命令行工具，输入以下命令来创建一个新项目：

vue create my-vue3-project

在创建过程中，Vue CLI会提示你选择预设，选择“Manually select features”来选择你需要的功能。然后选择Vue 3版本，并使用默认配置继续。

Vue CLI 4.5.10
? Please pick a preset (Use arrow keys to navigate)
  Default ([default])
  Manually select features
> Manually select features

之后，CLI会询问你是否要使用Vue Router、Vuex等，根据需要选择即可。

创建完成后，进入项目文件夹并启动开发服务器：

cd my-vue3-project
npm run serve

Vue3基础语法

组件的基本使用

Vue3中的组件依然是构建应用的核心。一个简单的组件可以通过以下方式定义：

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

<script>
export default {
  data() {
    return {
      message: 'Hello, Vue3!'
    };
  }
};
</script>

你可以在其他组件中使用这个组件：

<template>
  <div>
    <my-component></my-component>
  </div>
</template>

数据绑定与响应式原理

数据绑定是Vue的核心特性之一。Vue使用v-bind指令将数据绑定到视图上：

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

<script>
export default {
  data() {
    return {
      message: 'Hello, Vue3!'
    };
  }
};
</script>

使用v-model可以实现双向数据绑定。当输入框中的值改变时，组件内部的message也会自动更新。

Vue的响应式系统通过在数据属性上设置getter和setter来监听数据的变化。每当数据变化时，Vue会触发重新渲染视图。

计算属性与方法

计算属性是基于数据重新计算的结果。它们依赖于数据中的一些值，只会在相关依赖值发生改变时才重新计算。计算属性使用computed关键字定义：

<template>
  <div>
    <p>{{ fullName }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      firstName: 'John',
      lastName: 'Doe'
    };
  },
  computed: {
    fullName() {
      return `${this.firstName} ${this.lastName}`;
    }
  }
};
</script>

方法则是在组件中定义的普通JavaScript函数，它们可以访问组件的数据和方法。方法在每次渲染时都会被调用，而计算属性则根据依赖的数据进行缓存，只有在依赖的数据发生变化时才会重新计算：

<template>
  <div>
    <p>{{ fullName() }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      firstName: 'John',
      lastName: 'Doe'
    };
  },
  methods: {
    fullName() {
      return `${this.firstName} ${this.lastName}`;
    }
  }
};
</script>

路由与状态管理

Vue Router基本使用

Vue Router是官方推荐的Vue路由库。首先，你需要安装Vue Router：

npm install vue-router@next

安装完成后，你可以创建一个路由配置文件（例如router.js），并在其中配置路由：

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

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

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

export default router;

然后在主应用文件（例如main.js）中引入并使用Vue Router：

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

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

在模板中使用<router-view>来渲染当前路由对应的组件：

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

Vuex基础入门

Vuex是一个专为Vue.js应用开发的状态管理模式。首先，你需要安装Vuex：

npm install vuex@next

然后，创建一个Vuex store文件（例如store.js），并在其中定义状态、mutation、action和getter：

import { createStore } from 'vuex';

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

在主应用文件（例如main.js）中引入并使用Vuex：

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

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

在组件中使用store：

<template>
  <div>
    <p>{{ count }}</p>
    <button @click="increment">Increment</button>
    <button @click="decrement">Decrement</button>
  </div>
</template>

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

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

项目实战：搭建个人博客首页

设计项目结构

一个典型的Vue项目结构如下：

my-vue3-project/
├── public/
│   └── index.html
├── src/
│   ├── assets/
│   ├── components/
│   │   └── Header.vue
│   │   └── Footer.vue
│   │   └── PostList.vue
│   ├── App.vue
│   ├── main.js
│   ├── router.js
│   └── store.js
└── package.json

实现路由与组件间通信

首先，在router.js中配置路由：

import { createRouter, createWebHistory } from 'vue-router';
import Home from './components/Home.vue';
import Post from './components/Post.vue';

const routes = [
  { path: '/', component: Home },
  { path: '/post/:id', component: Post }
];

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

export default router;

然后在Home.vue和Post.vue中定义组件：

Home.vue：

<template>
  <div>
    <Header />
    <PostList />
    <Footer />
  </div>
</template>

<script>
import Header from './Header.vue';
import PostList from './PostList.vue';
import Footer from './Footer.vue';
export default {
  components: {
    Header,
    PostList,
    Footer
  }
};
</script>

Post.vue：

<template>
  <div>
    <Header />
    <PostDetails />
    <Footer />
  </div>
</template>

<script>
import Header from './Header.vue';
import PostDetails from './PostDetails.vue';
import Footer from './Footer.vue';
export default {
  components: {
    Header,
    PostDetails,
    Footer
  }
};
</script>

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

PostList.vue：

<template>
  <ul>
    <li v-for="post in posts" :key="post.id" @click="selectPost(post)">
      {{ post.title }}
    </li>
  </ul>
</template>

<script>
export default {
  props: ['posts'],
  methods: {
    selectPost(post) {
      this.$emit('postSelected', post);
    }
  }
};
</script>

在父组件中监听postSelected事件：

<template>
  <div>
    <PostList :posts="posts" @postSelected="selectedPost = $event" />
    <router-link :to="{ name: 'post', params: { id: selectedPost.id } }">
      Read Post
    </router-link>
  </div>
</template>

<script>
import PostList from './PostList.vue';
export default {
  components: {
    PostList
  },
  data() {
    return {
      posts: [
        { id: 1, title: 'Post 1' },
        { id: 2, title: 'Post 2' }
      ],
      selectedPost: null
    };
  }
};
</script>

数据展示与表单操作

在PostDetails.vue中，展示选中的文章的详细信息：

<template>
  <div>
    <h1>{{ post.title }}</h1>
    <p>{{ post.content }}</p>
    <CommentList :comments="post.comments" />
    <CommentForm @commentAdded="addComment" />
  </div>
</template>

<script>
import CommentList from './CommentList.vue';
import CommentForm from './CommentForm.vue';

export default {
  components: {
    CommentList,
    CommentForm
  },
  props: ['post'],
  methods: {
    addComment(comment) {
      this.$emit('commentAdded', comment);
      this.post.comments.push(comment);
    }
  }
};
</script>

在CommentForm.vue中，收集用户输入并添加到文章评论列表：

<template>
  <form @submit.prevent="onSubmit">
    <input type="text" v-model="newComment" />
    <button type="submit">Add Comment</button>
  </form>
</template>

<script>
export default {
  data() {
    return {
      newComment: ''
    };
  },
  methods: {
    onSubmit() {
      this.$emit('commentAdded', this.newComment);
      this.newComment = '';
    }
  }
};
</script>

在父组件中监听commentAdded事件：

<template>
  <div>
    <PostDetails :post="selectedPost" @commentAdded="newComment => selectedPost.comments.push(newComment)" />
  </div>
</template>

<script>
import PostDetails from './PostDetails.vue';
export default {
  components: {
    PostDetails
  },
  data() {
    return {
      posts: [
        {
          id: 1,
          title: 'Post 1',
          content: 'Content 1',
          comments: []
        },
        {
          id: 2,
          title: 'Post 2',
          content: 'Content 2',
          comments: []
        }
      ],
      selectedPost: null
    };
  }
};
</script>

代码优化与调试技巧

使用Lint进行代码检查

Lint工具可以帮助你检查代码规范，确保代码的一致性和可维护性。Vue CLI默认支持ESLint，你可以通过以下命令安装ESLint：

npm install eslint eslint-plugin-vue

然后在项目根目录下创建.eslintrc.js配置文件：

module.exports = {
  root: true,
  env: {
    browser: true,
    node: true
  },
  parserOptions: {
    parser: 'babel-eslint'
  },
  extends: [
    'plugin:vue/essential',
    'eslint:recommended'
  ],
  rules: {
    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off'
  }
};

运行npm run lint可以检查项目代码规范。

调试Vue3应用

Vue Devtools是一个强大的调试工具，可以帮助你检查组件树、状态管理、路由等。你可以通过Chrome浏览器的扩展程序安装Vue Devtools。

在Vue应用中，你还可以使用console.log、debugger等调试工具。例如：

import { createApp } from 'vue';

const app = createApp(App);
app.config.debug = true; // 启用调试模式

app.mount('#app');

在组件中使用console.log或debugger：

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

<script>
export default {
  data() {
    return {
      message: 'Hello, Vue3!'
    };
  },
  created() {
    console.log('Component created');
    debugger;
  }
};
</script>

通过这些调试工具，你可以更好地理解Vue应用的运行机制。

总结

通过以上步骤，我们已经搭建了一个简单的Vue3项目，并介绍了Vue3的基础语法、路由与状态管理、项目实战以及代码优化与调试技巧。希望这篇教程能够帮助你快速上手Vue3，构建出更强大、更灵活的Vue应用。如果你想学习更多Vue的相关内容，可以参考慕课网上的教程，那里有更多丰富的学习资源。