Vue3的最新语法，包括工程结构和单文件组件概念、工程文件之间的关系、CSS样式的导入方式以及响应式数据和setup语法糖

本文主要介绍一下Vue3的最新变化包括工程结构和单文件组件概念、工程文件之间的关系、CSS样式的导入方式、

1. 工程结构和单文件组件概念

Vue 3 仍然采用单文件组件的概念，将模板、脚本和样式放在一个文件中。工程结构也类似于Vue2，通常包含components、assets、views等目录。

Vue 3项目的工程结构如下：
src/
– components/
---- HelloWorld.vue
– views/
---- Home.vue
– App.vue

<template>
 <div>
   <h1>{{ greeting }}</h1>
   <button @click="changeGreeting">Change Greeting</button>
 </div>
</template>

2. 工程文件之间的关系

Vue 3 中，不同文件之间的关系通过import和export语法来建立，可以在需要的地方引入其他文件。

<template>
 <div>
   <Home />
 </div>
</template>

<script>
import Home from './views/Home.vue';

export default {
 components: {
   Home
 }
};
</script>

3. CSS样式的导入方式

在Vue 3 中，你可以使用普通的CSS文件，也可以在单文件组件中使用

<template>
  <div>
    <HelloWorld />
  </div>
</template>

<script>
import HelloWorld from '../components/HelloWorld.vue';

export default {
  components: {
    HelloWorld
  }
};
</script>

<style>
h1 {
  color: blue;
}
</style>

4. 响应式数据和setup语法糖

Vue 3 引入了Composition API，其中的setup函数用于替代Vue 2中的data、computed、methods等选项。在setup函数中，可以定义响应式数据、计算属性和方法，使代码更加模块化和可复用。

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

export default {
  setup() {
    const greeting = ref('Hello, Vue 3!');

    function changeGreeting() {
      greeting.value = 'Welcome to Vue 3!';
    }

    return {
      greeting,
      changeGreeting
    };
  }
};
</script>