【Vue2+3入门到实战】（21）认识Vue3、使用create-vue搭建Vue3项目、熟悉项目和关键文件

一、认识Vue3

1. Vue2 选项式 API vs Vue3 组合式API

<script>
export default {
  data(){
    return {
      count:0
    }
  },
  methods:{
    addCount(){
      this.count++
    }
  }
}
</script>

<script setup>
import { ref } from 'vue'
const count = ref(0)
const addCount = ()=> count.value++
</script>

特点：

1. 代码量变少
2. 分散式维护变成集中式维护

2. Vue3的优势

二、 使用create-vue搭建Vue3项目

1. 认识create-vue

create-vue是Vue官方新的脚手架工具，底层切换到了 vite （下一代前端工具链），为开发提供极速响应

2. 使用create-vue创建项目

前置条件 - 已安装16.0或更高版本的Node.js

执行如下命令，这一指令将会安装并执行 create-vue

npm init vue@latest

三、 熟悉项目和关键文件

四、总结

Vue 3是Vue.js的最新版本，带来了许多新功能和改进。它在性能、开发体验和可维护性方面有很大的提升。

使用create-vue搭建Vue 3项目是一种快速开始的方法。create-vue是一个命令行工具，可以帮助我们快速创建Vue 3项目的基本结构。

关键文件指的是在Vue 3项目中最重要的文件，它们提供了项目的核心功能和配置。

在一个使用create-vue搭建的Vue 3项目中，以下是一些关键文件：

1. package.json：这个文件列出了项目的依赖和脚本。我们可以使用npm或yarn来管理项目的依赖，并运行一些脚本来进行开发和构建。
2. babel.config.js：这个文件是Babel的配置文件，用于将ES6+的代码转换为向后兼容的代码，以便在不同的浏览器上运行。
3. src/main.js：这个文件是项目的入口文件。它负责创建Vue应用，并将它挂载到HTML文档的一个元素上。
4. src/App.vue：这个文件是根组件，它是Vue应用的主要组成部分。它可以包含其他组件，并定义应用程序的整体结构和样式。
5. src/router.js：这个文件是路由器的配置文件。它定义了应用程序的路由规则，并将不同的URL映射到相应的组件。
6. src/components目录：这个目录包含了所有的组件文件。每个组件都可以有自己的模板、样式和逻辑，并可以在App.vue和其他组件中使用。

除了这些文件外，还可能有其他的配置文件和工具文件，用于构建、测试和部署Vue 3项目。

以上是一个简单的总结，列出了Vue 3、使用create-vue搭建Vue 3项目以及一些关键文件的基本概念和内容。在实际项目中，可能还有其他文件和配置，具体情况可以根据实际需要进行调整和扩展。