NO4 使用vite搭建项目

• 兼容性注意：

1. node版本12.0.0以上
2. 安装vue3的volar插件
3. 禁用vue2的vetur插件

• 创建项目

1. npm init vite@latest

• 代码

<script setup lang="ts">

import { ref } from 'vue'

defineProps<{ msg: string }>()

const count = ref(0)

</script>

注意： 
1. defineProps不需要引入，vue单文件内部自动暴露的API
2. 在setup语法糖中导入组件不需要注册声明，直接在视图中使用
3. 导入vue文件必须写上后缀名.vue,否则ts无法识别vue文件

优势：
<script setup lang="ts">是单文件组件（SFC）中使用组合式API的编译时的语法糖。相对普通的语法，它具有更多的优势： 
 - 更少的样板内容，更简洁的代码，比如，省略了组件的注册声明，对象暴露return，methods
 - 能够使用纯 ts 声明props和发出事件
 - 更好的运行时性能（其模板会被编译成与其同一作用域的渲染函数，没有任何的中间代理）
 - 更好的IDE类型推断性能（减少语言服务器从代码中抽离类型的工作）
 
对比：
<script>
import { ref } from 'vue'
export default {
    props: {
        msg: String
    },
    setup() {
        const count = ref(0)
        return {
           count
        }
    }

}
</script>