目录
一、认识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>
特点:
- 代码量变少
- 分散式维护变成集中式维护
2. Vue3的优势
二、 使用create-vue搭建Vue3项目
1. 认识create-vue
2. 使用create-vue创建项目
执行如下命令,这一指令将会安装并执行 create-vue
npm init vue@latest
三、 熟悉项目和关键文件
四、总结
Vue 3是Vue.js的最新版本,带来了许多新功能和改进。它在性能、开发体验和可维护性方面有很大的提升。
使用create-vue搭建Vue 3项目是一种快速开始的方法。create-vue是一个命令行工具,可以帮助我们快速创建Vue 3项目的基本结构。
关键文件指的是在Vue 3项目中最重要的文件,它们提供了项目的核心功能和配置。
在一个使用create-vue搭建的Vue 3项目中,以下是一些关键文件:
- package.json:这个文件列出了项目的依赖和脚本。我们可以使用npm或yarn来管理项目的依赖,并运行一些脚本来进行开发和构建。
- babel.config.js:这个文件是Babel的配置文件,用于将ES6+的代码转换为向后兼容的代码,以便在不同的浏览器上运行。
- src/main.js:这个文件是项目的入口文件。它负责创建Vue应用,并将它挂载到HTML文档的一个元素上。
- src/App.vue:这个文件是根组件,它是Vue应用的主要组成部分。它可以包含其他组件,并定义应用程序的整体结构和样式。
- src/router.js:这个文件是路由器的配置文件。它定义了应用程序的路由规则,并将不同的URL映射到相应的组件。
- src/components目录:这个目录包含了所有的组件文件。每个组件都可以有自己的模板、样式和逻辑,并可以在App.vue和其他组件中使用。
除了这些文件外,还可能有其他的配置文件和工具文件,用于构建、测试和部署Vue 3项目。
以上是一个简单的总结,列出了Vue 3、使用create-vue搭建Vue 3项目以及一些关键文件的基本概念和内容。在实际项目中,可能还有其他文件和配置,具体情况可以根据实际需要进行调整和扩展。