vite+vue3 script setup语法糖

学习之前我们需要先了解vite是什么？移步官网：Vite 官方中文文档

vite是一种新型前端构建工具，能够显著提升前端开发体验。它主要由两部分组成：

• 一个开发服务器，它基于 原生 ES 模块 提供了 丰富的内建功能，如速度快到惊人的 模块热更新（HMR）。

• 一套构建指令，它使用 Rollup 打包你的代码，并且它是预配置的，可输出用于生产环境的高度优化过的静态资源。

Vite 意在提供开箱即用的配置，同时它的 插件 API 和 JavaScript API 带来了高度的可扩展性，并有完整的类型支持

1、首先我们使用vite工具构建一个vue3的项目

npm init vite@latest <ProjectName> -- --template vue

值得注意的是，如果你得npm版本小于7x，<ProjectName>后面只需要两个双横线，即：

npm init vite@latest <ProjectName> --template vue

如果需要ts开发，构建命令后面的vue可写成vue-ts，即：

npm init vite@latest <ProjectName> -- --template vue-ts

yarn命令

yarn create vite <ProjectName> --template vue

或者我们可以在构建项目的时候在终端选择我们需要构建的项目类型即可：

项目构建成功后，依次执行，启动项目：

cd <ProjectName>

npm i || yarn i

npm run dev || yarn serve

你会惊奇的发现，启动本地服务的速度简直就是秒起，速度快到飞起，相比webpack来说，差距就拉开了，这也是我推荐使用vite构建项目的一个原因。

项目目录跟我们之前vue create的目录差不多，功能也都基本一致，我们主要说一说如何基于script 的setup语法糖更快速方便的开发项目。

2、值得注意的变化

• a、components组件不在需要注册即可直接使用，在 script-setup 中导入任意的组件就可以直接在template中使用

<template>
  <p>{{title}}</p>
  <HelloWorld msg="Hello Vue 3 + Vite"/>
</template>
<script setup>
  import HelloWorld from "./components/HelloWorld.vue"
</script>

b、组件直接props传值使用defineProps代替，并且可以直接不用结构即可使用

<script setup>
  // props
  const props = defineProps({
    msg: String,
  })
</script>

c、emit向父组件传递方法可以使用defineEmits代理，具体使用方法；

const emit = defineEmits(["myclick1","myclick2"])
const btnClick = ()=>{
   emit("myclick1",需要传入的参数任意类型值)
}

d、还有slots、attrs我们可以直接使用useContext

import {useContext} from "vue"
cont {alots,attrs} = useContext()

e、当然我们也可以抽离为单独的文件来管理某个复杂功能或逻辑的组件，使得开发、预览、调试更加方便，需要注意的是，在setup语法糖中没有this的概念，我们需要从vue2中data那种方式转变过来。一般来说，值得注意的就是这几个点

<script setup>
  import { ref, defineEmits, reactive, toRefs} from "vue"
  // props
  const props = defineProps({
    msg: String,
  })
  // emits
  const emit = defineEmits([])
  // 响应式变量
  const count = ref(0)
  // state-响应式公共数据，类似之前的data
  const state = reactive({
    title:"测试"
  })

  // 事件处理区
  const btnClick = ()=>{
    emit("upClick",state.title)
  }
  // 解构state
  const {title} = toRefs(state)
</script>

3、如果大家对Composition API还不了解的话，建议大家移步去官网先了解下vue3升级的重大改动

官网：介绍 | Vue.js