vue3.2setup语法糖，vite2创建vue3.2+ts+vue-router4项目

目录

vite2创建项目

用volar插件替换vetur插件

vite配置文件

resolve.alias配置项（路径别名使用）

1.需要安装插件来支持ts:

2.在配置文件导入node模块path并改resolve.alias

3.添加配置项

vue3.2语法糖

1.setup 语法糖

2.defineProps(自定义属性)

3.defineEmits（自定义事件）

4.useSlots和useAttrs（需引入）

 4.1.useSlots

 4. 2.useAttrs

5.defineExpose(向外暴露属性)

vue-router4

安装

1.router下的index.ts

2.main.js

---

vite2创建项目

npm create vite

用volar插件替换vetur插件

必须先禁用vetur

功能：拆分功能、语法提示

vite配置文件

resolve.alias配置项（路径别名使用）

用来配置系统文件路径别名,

 如：将src目录默认为@，将组件目录改为com

1.需要安装插件来支持ts:

    npm install --save @types/node

2.在配置文件导入node模块path并改resolve.alias

    import * as path from "path"

3.添加配置项

    resolve: {

    /* 路径别名 */

    alias: {

      "@": path.resolve(__dirname, "src"),

      "com": path.resolve(__dirname, "src/components")

    }

  }

vue3.2语法糖

1.setup 语法糖

2.defineProps(自定义属性)

在vue3.2中defineProps：就是之前props自定义属性传值的作用（宏命令不用引入），父传子

1.普通方式

2.纯类型方式（ts）

子组件：

父组件：

3.defineEmits（自定义事件）

作用：相当于之前的自定义事件进行子传父值

    1.普通声明

    2.类型声明（ts）

子组件：

父组件：

4.useSlots和useAttrs（需引入）

 4.1.useSlots

    获取父组件中的插槽和插槽中的DOM节点

    const slots = useSlots()

父组件：

子组件：

 4. 2.useAttrs

    获取父组件传给子组件的属性，除了props传的值

    const attrs = useAttrs()

父组件：

子组件：

5.defineExpose(向外暴露属性)

在vue3.x的setup语法糖中定义的变量默认不会暴露出去，这时使用definExpose({  })来暴露组件内部属性给父组件使用为了在

父组件：

vue-router4

安装

npm install vue-router@4

1.router下的index.ts

import { createRouter, createWebHashHistory, RouteRecordRaw } from 'vue-router'
import HomeView from '@/views/HomeView.vue'

// 泛型RouteRecordRaw
const routes: Array = [
  {
    path: '/',
    name: 'home',
    component: HomeView
  },
  {
    path: '/about',
    name: 'about',
    component: () => import('../views/AboutView.vue')
  }
]

const router = createRouter({
  history: createWebHashHistory(),
  routes
})

export default router

2.main.js

import router from './router'

createApp(App).use(router).mount('#app')