Vue3 基础技术总结二

创建 vue3+vite 项目

npm create vite@latest

setup 函数

• vue3 中 setup 执行时机比 vue2 beforeCreate 钩子还靠前。
• setup 中不存在 this 变量。
• setup 和 vue2 中的 data 、 methods 是并列同级关系。不建议和 vue2 混写。

写法如下：

<script lang="ts">
  export default{
    ...
    setup(){
      ...
      return {...}
    }
  }
</script>

setup 语法糖

写法如下：

// 语法糖简写
<script setup lang="ts" name="组件名称">
  let age = 28;
</script>

想修改组件名陈需要另外安装插件，不然文件名就是组件名。

• 安装插件 vite-plugin-vue-setup-extend

npm i vite-plugin-vue-setup-extend -D

• 修改 vite.config.ts 配置文件

# vite.config.ts
import VueSetupExtend from 'vite-plugin-vue-setup-extend'
export default defineConfig({
  plugins:[
    vue(),
    VueSetupExtend()
  ]
})