Skip to content

Commit 332fa7b

Browse files
long36708long36708
committed
```
feat(docs): 添加架构文档和开发指南 新增中文架构文档 ARCHITECTURE.ZH.md，详细描述项目结构、代码片段分类体系及工作机制。 新增中文开发指南 DEVELOPMENT_GUIDE.ZH.md，提供片段添加流程、格式规范和贡献指南。 更新 .gitignore 忽略 .idea/ 目录。在 package.json 中指定 volta node 版本为 22.19.0。新增中文变更日志 CHANGELOG.ZH.md 和中文自述文件 README.ZH.md。```
1 parent ef6181a commit 332fa7b

File tree

7 files changed

+839
-4
lines changed

7 files changed

+839
-4
lines changed

‎.gitignore‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -75,3 +75,4 @@ jspm_packages
7575
vsc-extension-quickstart.md
7676
*.vsix
7777
.vscode
78+
/.idea/

‎CHANGELOG.ZH.md‎

Lines changed: 112 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,112 @@
1+
# 变更日志
2+
3+
"vue-vscode-snippets" 扩展的所有重要变更将在此文件中记录。
4+
5+
## 3.2.0
6+
7+
- 添加 Vue 3 的 script setup 基础块
8+
- 在 README 中更新新的代码片段信息
9+
10+
## 3.1.1
11+
12+
- 更新 README 文档
13+
14+
## 3.1.0
15+
16+
- 移除所有扩展依赖
17+
18+
## 3.0.0
19+
20+
- 从 Vetur 迁移到 Volar，扩展依赖关系变更
21+
22+
## 2.2.1
23+
24+
- 移除 Composition API 的包名引用，现在支持 Vue 3
25+
26+
## 2.2.0
27+
28+
- 添加 Nuxt axios 模块支持
29+
- 修复 emit 代码片段位置错误的问题
30+
- 更新 TypeScript 引用
31+
- 修复 README 中的拼写错误
32+
33+
## 2.1.5
34+
35+
- 修复 bug：修复 emit 中的美元符号问题
36+
37+
## 2.1.4
38+
39+
- 修复 bug：将 emit 放入模板而不是脚本中
40+
41+
## 2.1.3
42+
43+
- 添加在 Options API 中使用 Composition API 的样板代码
44+
45+
## 2.1.2
46+
47+
- 添加 Vue 3 Composition API 与 Reactive 样板脚本
48+
49+
## 2.1.1
50+
51+
- 更新 README 以反映 Vue 3 支持
52+
53+
## 2.1.0
54+
55+
- 进一步支持 Vue 3 Composition API
56+
- 添加 Emit 功能
57+
- 添加具名插槽支持
58+
- 更好的 TypeScript 支持
59+
- 移除 increment/decrement 功能
60+
- 更新 gsap 支持
61+
62+
## 2.0.0
63+
64+
- 支持 Vue 3 Composition API
65+
66+
## 1.9.0
67+
68+
- 新的 vbase 支持：LESS、SASS、Stylus、无 CSS
69+
- 修复 pug 支持
70+
- 修复 vue router 中的括号问题
71+
- 新的代码片段：Nuxt 页面片段
72+
73+
## 1.8.0
74+
75+
- 新的代码片段：Vue router
76+
- 新的代码片段：无 scss 的 vbase
77+
78+
## 1.7.1
79+
80+
- 简化 action 实现
81+
82+
## 1.7.0
83+
84+
- 添加 vue-router 代码片段
85+
- 在 vmixin 中添加尾随逗号
86+
- 添加更新后的 Vuex store 编写方式
87+
88+
## 1.6.0
89+
90+
- 修复 `vcomputed` 中的 bug
91+
- 修复 vbase 中默认使用 ts 的问题
92+
93+
## 1.5.0
94+
95+
- 支持 mapState、mapGetters、mapMutations、mapActions
96+
- 支持 vue.config.js
97+
98+
## 1.4.0
99+
100+
- 生命周期方法
101+
- Vuex 脚手架
102+
- TypeScript 支持
103+
104+
## 1.3.0
105+
106+
- 在 .gitignore 中添加 nuxt 和 dist
107+
- 添加测试代码片段
108+
- 使组件导入保持一致
109+
110+
## 1.0.0
111+
112+
- 初始版本发布

‎README.ZH.md‎

Lines changed: 218 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,218 @@
1+
# Vue VSCode 代码片段
2+
3+
![vue-snippet-hero](https://s3-us-west-2.amazonaws.com/s.cdpn.io/28963/vue-snippet-hero.gif)
4+
5+
## 描述
6+
7+
这些代码片段旨在以最无缝的方式提升您的工作流程。
8+
9+
这个仓库特别为实际使用场景而构建。它不记录API定义，而是从实际使用的角度关注开发者的使用体验。包含了我个人厌倦重复输入的内容，以及有助于快速搭建的样板代码。
10+
11+
_支持的版本：Vue 2 和 Vue 3_
12+
13+
![SnippetDemo](https://s3-us-west-2.amazonaws.com/s.cdpn.io/28963/SnippetDemo.gif)
14+
15+
## 安装
16+
17+
_方法一_
18+
19+
- 点击扩展按钮（编辑器中最下方的方块图标），搜索 "Vue VSCode Snippets"，选择由 sdras 提供的扩展
20+
21+
_方法二_
22+
23+
- 访问 [VSCode 扩展市场](https://marketplace.visualstudio.com/items?itemName=sdras.vue-vscode-snippets)
24+
25+
```javascript
26+
ext install Vue VSCode Snippets
27+
```
28+
29+
您可以启用Tab键补全（推荐），通过打开 `Code > Preferences > Settings`（在Mac上）并在您的个人设置中添加 `"editor.tabCompletion": "onlySnippets"`
30+
31+
## 代码片段
32+
33+
### Vue 组件基础
34+
35+
这些代码片段旨在为您的单文件组件（SFC）提供基础脚手架。
36+
37+
| 代码片段 | 用途 |
38+
| ----------------- | ---------------------------------------- |
39+
| `vbase-3-ss` | 使用 script setup 的 SFC 基础模板 |
40+
| `vbase-3-ss-ts` | 使用 script setup 和 TypeScript 的 SFC 基础模板 |
41+
| `vbase` | 使用 SCSS 的 SFC 基础模板 |
42+
| `vbase-3` | 使用 Composition API 和 SCSS 的 SFC 模板 |
43+
| `vbase-3-setup` | 使用 setup Composition API 和 SCSS 的 SFC 模板 |
44+
| `vbase-3-reactive`| 使用 Composition API、Reactive 和 SCSS 的 SFC 模板 |
45+
| `vbase-css` | 使用 CSS 的 SFC 基础模板 |
46+
| `vbase-pcss` | 使用 PostCSS 的 SFC 基础模板 |
47+
| `vbase-styl` | 使用 Stylus 的 SFC 基础模板 |
48+
| `vbase-ts` | 使用 TypeScript 的 SFC 基础模板 |
49+
| `vbase-ts-class` | 使用 TypeScript 类格式的 SFC 基础模板 |
50+
| `vbase-3-ts` | 使用 Composition API 和 TypeScript 的 SFC 模板 |
51+
| `vbase-3-ts-setup`| 使用 setup Composition API 和 TypeScript 的 SFC 模板 |
52+
| `vbase-ns` | 无样式的 SFC 模板 |
53+
| `vbase-sass` | 使用 SASS 的 SFC 基础模板 |
54+
| `vbase-less` | 使用 LESS 的 SFC 基础模板 |
55+
56+
### 模板相关
57+
58+
| 代码片段 | 用途 |
59+
| ----------------- | -------------------------------- |
60+
| `vfor` | v-for 指令 |
61+
| `vmodel` | 语义化的 v-model 指令 |
62+
| `vmodel-num` | 语义化的 v-model 数字指令 |
63+
| `von` | v-on 点击处理函数（带参数） |
64+
| `vslot-named` | 具名插槽 |
65+
| `vel-props` | 带 props 的组件元素 |
66+
| `vsrc` | 图片 src 绑定 |
67+
| `vstyle` | 内联样式绑定 |
68+
| `vstyle-obj` | 使用对象的 inline style 绑定 |
69+
| `vclass` | 类绑定 |
70+
| `vclass-obj` | 使用对象的类绑定 |
71+
| `vclass-obj-mult` | 多条件类绑定 |
72+
| `vanim` | 带 JS 钩子的 Transition 组件 |
73+
| `vnuxtl` | Nuxt 路由链接 |
74+
| `vroutename` | router-link 命名路由 |
75+
| `vroutenameparam` | router-link 带参数的命名路由 |
76+
| `vroutepath` | router-link 路径路由链接 |
77+
| `vemit-child` | 从子组件发出事件 |
78+
| `vemit-parent` | 向父组件发出事件 |
79+
80+
### 脚本相关
81+
82+
| 代码片段 | 用途 |
83+
| ----------------- | ----------------------------------------------------------------- |
84+
| `vdata` | 组件数据函数 |
85+
| `vmethod` | Vue 方法 |
86+
| `vcomputed` | Vue 计算属性 |
87+
| `vwatcher` | Vue 监听器（带新旧值参数） |
88+
| `vbeforecreate` | beforeCreate 生命周期方法 |
89+
| `vcreated` | created 生命周期方法 |
90+
| `vbeforemount` | beforeMount 生命周期方法 |
91+
| `vmounted` | mounted 生命周期方法 |
92+
| `vbeforeupdate` | beforeUpdate 生命周期方法 |
93+
| `vupdated` | updated 生命周期方法 |
94+
| `vbeforedestroy` | beforeDestroy 生命周期方法 |
95+
| `vdestroyed` | destroyed 生命周期方法 |
96+
| `vprops` | 带类型和默认值的 props |
97+
| `vimport` | 导入一个组件到另一个组件中 |
98+
| `vimport-dynamic` | 导入一个应该由 webpack 懒加载的组件 |
99+
| `vcomponents` | 在 export 语句中导入一个组件到另一个组件中 |
100+
| `vimport-export` | 导入一个组件并在 export 语句中使用它 |
101+
| `vmapstate` | 从 Vuex 导入 mapState 到 Vue 组件 |
102+
| `vmapgetters` | 从 Vuex 导入 mapGetters 到 Vue 组件 |
103+
| `vmapmutations` | 从 Vuex 导入 mapMutations 到 Vue 组件 |
104+
| `vmapactions` | 从 Vuex 导入 mapActions 到 Vue 组件 |
105+
| `vfilter` | Vue 过滤器 |
106+
| `vmixin` | 创建 Vue Mixin |
107+
| `vmixin-use` | 引入 mixin 到组件中使用 |
108+
| `vc-direct` | 创建自定义指令 |
109+
| `vimport-lib` | 导入库 |
110+
| `vimport-gsap` | 导入 GreenSock |
111+
| `vanimhook-js` | 在方法中使用 Transition 组件的 JS 钩子 |
112+
| `vcommit` | 在方法中提交到 Vuex store（mutation） |
113+
| `vdispatch` | 在方法中分发到 Vuex store（action） |
114+
| `vtest` | 简单的单元测试组件 |
115+
116+
### Vue Composition API
117+
118+
| 代码片段 | 用途 |
119+
| ------------------- | -------------------------------------------------- |
120+
| `v3reactive` | Vue Composition API - reactive |
121+
| `v3reactive-setup` | Vue Composition API - reactive 带 setup 样板代码 |
122+
| `v3computed` | Vue Composition API - computed |
123+
| `v3watch` | Vue Composition API - 监听单个源 |
124+
| `v3watch-array` | Vue Composition API - 数组形式的 watch |
125+
| `v3watcheffect` | Vue Composition API - watchEffect |
126+
| `v3ref` | Vue Ref |
127+
| `v3onmounted` | 生命周期钩子 - onMounted |
128+
| `v3onbeforemount` | 生命周期钩子 - onBeforeMount |
129+
| `v3onbeforeupdate` | 生命周期钩子 - onBeforeUpdate |
130+
| `v3onupdated` | 生命周期钩子 - onUpdated |
131+
| `v3onerrorcaptured` | 生命周期钩子 - onErrorCaptured |
132+
| `v3onunmounted` | 生命周期钩子 - (destroyed) onUnmounted |
133+
| `v3onbeforeunmount` | 生命周期钩子 - (beforeDestroy) onBeforeUnmount |
134+
| `v3useinoptions` | 在 Options API 中使用 Composition API |
135+
136+
### Vuex
137+
138+
| 代码片段 | 用途 |
139+
| --------------- | --------------------------- |
140+
| `vstore` | Vuex store.js 基础模板 |
141+
| `vgetter` | Vuex Getter |
142+
| `vmutation` | Vuex Mutation |
143+
| `vaction` | Vuex Action |
144+
| `vmodule` | Vuex Module |
145+
| `vstore-import` | 导入 vuex store 到 main.js |
146+
| `vstore2` | 更新的 Vuex store 基础模板 |
147+
148+
### Vue Router
149+
150+
| 代码片段 | 用途 |
151+
| -------------------- | ------------------------------------------ |
152+
| `vrouter` | Vue Router 基础模板 |
153+
| `vscrollbehavior` | Vue Router scrollBehavior |
154+
| `vbeforeeach` | Vue Router 全局守卫 beforeEach |
155+
| `vbeforeresolve` | Vue Router 全局守卫 beforeResolve |
156+
| `vaftereach` | Vue Router 全局守卫 afterEach |
157+
| `vbeforeenter` | Vue Router 路由独享守卫 beforeEnter |
158+
| `vbeforerouteenter` | Vue Router 组件内守卫 beforeRouteEnter |
159+
| `vbeforerouteupdate` | Vue Router 组件内守卫 beforeRouteUpdate |
160+
| `vbeforerouteleave` | Vue Router 组件内守卫 beforeRouteLeave |
161+
162+
### Vue 配置
163+
164+
| 代码片段 | 用途 |
165+
| --------- | ------------------------------------------------------------------ |
166+
| `vplugin` | 导入插件到 main.js 或 plugins 文件 |
167+
| `vconfig` | vue.config.js 文件，示例：将 sass 文件导入到每个组件 |
168+
169+
### Nuxt 配置
170+
171+
| 代码片段 | 用途 |
172+
| ------- | ---------------------------------------------------- |
173+
| `nfont` | 在 nuxt-config 中包含字体的链接 |
174+
| `ncss` | 链接到 CSS 资源，如 normalize |
175+
176+
### Nuxt 页面
177+
178+
| 代码片段 | 用途 |
179+
| ----------------- | ----------------------------- |
180+
| `nasyncdata` | Nuxt asyncData |
181+
| `nasyncdataaxios` | 使用 Axios 模块的 Nuxt asyncData |
182+
| `nfetch` | Nuxt Fetch |
183+
| `nfetchaxios` | 使用 Axios 模块的 Nuxt Fetch |
184+
| `nhead` | Nuxt Head |
185+
| `nparam` | Nuxt 路由参数 |
186+
187+
### 额外功能（纯文本）
188+
189+
| 代码片段 | 用途 |
190+
| ----------- | -------------------- |
191+
| `gitignore` | .gitignore 文件预设 |
192+
193+
## 贡献
194+
195+
这是一个向任何人开放的开源项目。欢迎贡献 [GitHub](https://github.com/sdras/vue-vscode-snippets)
196+
197+
如果您要贡献代码片段，请确保在 README 的表格中添加相应的文档，没有此添加的拉取请求将无法被接受。谢谢！
198+
199+
## 许可证
200+
201+
MIT License - 详见 [LICENSE](LICENSE) 文件
202+
203+
## 作者
204+
205+
Sarah Drasner ([@sarah_edo](https://twitter.com/sarah_edo))
206+
207+
## 支持
208+
209+
如果您在使用过程中遇到问题或有任何建议，请通过以下方式联系：
210+
211+
- 在 [GitHub Issues](https://github.com/sdras/vue-vscode-snippets/issues) 中提交问题
212+
- 通过 Twitter [@sarah_edo](https://twitter.com/sarah_edo) 联系作者
213+
214+
## 版本信息
215+
216+
当前版本：3.2.0
217+
218+
最后更新：2025-09-21

0 commit comments

Comments
 (0)