# vue3-summary

**Repository Path**: topazur/vue3-summary

## Basic Information

- **Project Name**: vue3-summary
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2020-12-18
- **Last Updated**: 2021-01-26

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# [vue3-canvas](https://vue3js.cn/)

## git's type
用于说明本次commit的类别，只允许使用下面7个标识

- feat：新功能（feature）
- fix：修补bug
- docs：文档（documentation）
- style： 格式（不影响代码运行的变动）
- refactor：重构（即不是新增功能，也不是修改bug的代码变动）
- test：增加测试
- chore：构建过程或辅助工具的变动

### 开发时，对于本地的项目中修改不做保存操作（或代码改崩），可以用到Git pull的强制覆盖，具体代码如下：
```bash
$ git fetch --all #git fetch 指令是下载远程仓库最新内容，不做合并
$ git reset --hard origin/master #git reset 指令把HEAD指向master最新版本
$ git pull #可以省略
```

## Started
```bash
# 直接进入操作栏选择 或 直接在命令行指定项目名称和使用模板
$ npm init @vitejs/app [name] --template vue
$ yarn create @vitejs/app [name] --template vue

# 预设模板[@vitejs/create-app](https://github.com/vitejs/vite/tree/main/packages/create-app): vue、vue-ts、react、react-ts

# 项目创建完毕
cd [name]
npm install (or `yarn`)
npm run dev (or `yarn dev`)
```

## VueDX插件
[Vite文檔](https://vitejs.dev/guide/features.html) | [Vue3文檔](https://v3.vuejs.org/)

<p>
  推荐设置:
  <a style="color: #42B983;" href="https://code.visualstudio.com/" target="_blank">VSCode</a>
  +
  <a style="color: #42B983;"
  href="https://marketplace.visualstudio.com/items?itemName=octref.vetur"
  target="_blank"
  >Vetur</a>
  +
  <a style="color: #42B983;"
  href="https://marketplace.visualstudio.com/items?itemName=znck.vue-language-features"
  target="_blank"
  >Vue DX</a>
</p>

<p>
  確保使用工作區版本的TypeScript通過<a style="color: #42B983;"
href="https://github.com/znck/vue-developer-experience"
>@vuedx</a>獲得更好的支持。
注意@vuedx仍處於試驗階段，此設置用於早期反饋。
</p>

## tailwindcss
```bash
# normalize.css

# `Vue3和Vite暂不支持PostCSS 8`; 因此，您需要立即安装[Tailwind CSS v2.0 PostCSS 7兼容性版本]
# [docs](https://tailwindcss.com/docs/installation#post-css-7-compatibility-build)
# [issue](https://github.com/tailwindlabs/tailwindcss/discussions/2854)
$ yarn add -D tailwindcss@npm:@tailwindcss/postcss7-compat @tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9

# Created config file: `tailwind.config.js`和`postcss.config.js`
$ npx tailwindcss init -p
```

## 组件命名规范
> PascalCase 是最通用的声明约定而 kebab-case 是最通用的使用约定。

## throttle-debounce package

<hr>


# 外链
[简书](https://www.jianshu.com/p/687a393e788a)

[RFC](https://vue-composition-api-rfc.netlify.app/zh)

[Vue Composition API RFC](https://vue-composition-api-rfc.netlify.app/zh/api.html) —— Vue Composition API介绍

[Vue Compostion Repository](https://github.com/vuejs/composition-api) —— Vue Composition API Github仓库

[求值策略](https://zh.wikipedia.org/wiki/%E6%B1%82%E5%80%BC%E7%AD%96%E7%95%A5) —— 引用传递、值传递介绍


[vue-socket-io](https://my.oschina.net/javanx/blog/3079331)

[vuepress-plugin-yuque](https://github.com/ulivz/vuepress-plugin-yuque)


http://www.zhufengpeixun.com/jg-vue/opt/note.html


[百度AI审核: Baidu TextCensor For Comments](https://ai.baidu.com/tech/textcensoring)
[文本审核-还包括图片视频语音](https://ai.baidu.com/ai-doc/ANTIPORN/Vk3h6xaga)

[一言网(Hitokoto.cn)--经典语录](https://v1.hitokoto.cn/?encode=json)

### Customize configuration
See [Configuration Reference](https://cli.vuejs.org/config/).

<hr>

js库: https://segmentfault.com/a/1190000038589634
ui工具: https://segmentfault.com/a/1190000038686448
ts: https://segmentfault.com/a/1190000031793196
性能优化: https://segmentfault.com/a/1190000022014372?utm_source=sf-related
大文件上传: https://juejin.cn/post/6844903860327186445
伪元素: https://segmentfault.com/a/1190000015468617
flexbox构建header: https://segmentfault.com/a/1190000023908399

```
import { ThemeSymbol, ThemeSymbolRef, MittSymbol } from "@/utils/constant";
import mitt, { Emitter } from 'mitt';
const emitter: Emitter = mitt();
provide(MittSymbol, emitter);

<!-- 子组件 -->
const instance = getCurrentInstance();
const { ctx, proxy } = instance;
onMounted(() => {
  console.log("instance", instance);
  console.log("ctx", ctx);
  console.log("proxy", proxy);
});

const $mitt = inject(MittSymbol);
console.log($mitt);
```