wu-vue3-ts-template: Vue3 + Typescript 项目模板技术栈：vue3 + ts + vite + elementPlus 规范： eslint + prettier + stylint + husky 2023.12.23创建并完善中，适合团队多人开发，符合规范，好用的vue3模板项目。

# Vue 3 + TypeScript + Vite

主要业务：电商平台后台管理系统
从0到1搭建vue3 + TypeScript + Vite工程化项目
Vue3+组合式API
Vite构建工具
element-plus
vue-router路由
pinia状态管理
axios

参考来源：尚硅谷实战硅谷甄选

## issues：

1 git commit暂不支持部分add提交，会被husky git add . 全部提交，需加入lint-staged支持，开发中...
2 table-column的scope是什么类型，在封装时ts报错，烦恼中...

This template should help get you started developing with Vue 3 and TypeScript in Vite. The template uses Vue 3 `<script setup>` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more.

## Recommended IDE Setup

- [VS Code](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur) + [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin).

## Type Support For `.vue` Imports in TS

TypeScript cannot handle type information for `.vue` imports by default, so we replace the `tsc` CLI with `vue-tsc` for type checking. In editors, we need [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin) to make the TypeScript language service aware of `.vue` types.

If the standalone TypeScript plugin doesn't feel fast enough to you, Volar has also implemented a [Take Over Mode](https://github.com/johnsoncodehk/volar/discussions/471#discussioncomment-1361669) that is more performant. You can enable it by the following steps:

1. Disable the built-in TypeScript Extension
   1. Run `Extensions: Show Built-in Extensions` from VSCode's command palette
   2. Find `TypeScript and JavaScript Language Features`, right click and select `Disable (Workspace)`
2. Reload the VSCode window by running `Developer: Reload Window` from the command palette.

# vue2/3组件间的通信

1 props 父给子传值

2 自定义事件 子给父传值

3 v-model 自定义事件 父子组件双向数据绑定

`<child v-model="pageNo">`

传递了pageNo 并绑定了@update:pageNo自定义事件

`<child v-model:pageNo="pageNo1"  v-model:pageNo2="pageNo2">`
相当于传递了多个v-model数据

4 $bus全局事件总线 全局任意组件 mitt(棒球)

5 pubsub 全局任意组件

6 vuex 全局任意组件

state,mutations,actions,getters,modules

7 pinia 全局任意组件(vue3)

选项式：state,mutations,actions,getters,persist

组合式：写法 hooks

ref(state), actions，computed(getters)

8 ref(父调子)和$parent(子调父)(vue3)

属性和方法都需要defineExpose才能被获取到

9 provide和inject 隔辈组件传递

祖先组件 provide(key,值)

子孙组件 数值 = inject(key)

10 slot：默认插槽，具名插槽，作用域插槽

slot标签 属性v-slot=xx 或者是 #xx

作用域插槽(vue3)：就是可以传递数据的插槽，子组件可以将数据回传给父，父组件可以决定这些回传的数据以何种vue结构或外观在子组件内部去展示！！！

`let data = {name: "毫哥",age:18, index: 1}`

子组件
`<slot :$rows="data" :$index="index" />`

父组件

```
<template v-slot="{$row, $index}">

< //template>
```

wuzhenhua/wu-vue3-ts-template

简介

发行版

贡献者

近期动态

wuzhenhua/wu-vue3-ts-template .gitee-modal { width: 500px !important; }

简介

发行版

贡献者

近期动态

搜索帮助

wuzhenhua/wu-vue3-ts-template