vscode中快速生成vue3+ts+setup模板

文章目录


设置 -> user snippets(用户代码片段) -> vue.json
在这里插入图片描述
找到vue.json文件
在这里插入图片描述
输入代码段 如下,

{
	"Print to console": {
		"prefix": "v3",  //键入该值,按tab快捷产生
		"body": [
			"<template>",
			"  <view>",
			"",
			"  </view>",
			"</template>",
			"",
			"<script setup lang='ts'>",
			"",
			"</script>",
			"",
			"<style scoped lang='scss'>",
			"",
			"</style>",
		],
		"description": "vue3的ts模板"
	}
}

在vue文件中,键入 v3,按 回车或者tab键,即可快捷产生vue3模板。
在这里插入图片描述

### 如何在 VSCode 中设置 Vue 开发环境 #### 插件推荐 为了高效开发 Vue 应用程序,在 Visual Studio Code (VSCode) 上可以安装一系列插件来提升编码体验。以下是常用的插件列表及其功能: 1. **Chinese Simplified Language Pack**: 提供中文支持,方便国内开发者阅读界面文字[^3]。 2. **Code Spell Checker**: 自动检测并修正拼写错误。 3. **HTML CSS Support**: 增强 HTML 和 CSS 的语法高亮和支持。 4. **JavaScript (ES6) code snippets**: 提供 JavaScript ES6 版本的代码片段模板。 5. **Mithril Emmet**: 改善基于 Mithril.js 或其他框架下的快速编写能力。 6. **Path Intellisense**: 自动生成路径补全建议,减少手动输入的工作量。 7. **vue3-snippets-for-vscode**: 专门为 Vue 3 设计的一套代码片段集合。 8. **VueHelper**: 辅助完成 Vue 组件结构化创建和其他常用操作。 9. **Auto Close Tag & Auto Rename Tag**: 当编辑标签时自动闭合或者同步修改成对标签名称。 10. **Beautify**: 对源码进行格式美化处理。 11. **Bracket Pair Colorizer**: 默认已经集成到最新版 VSCode 中,用于区分不同括号层次的颜色标记。 12. **Open in Browser**: 可以一键打开当前网页文件于默认浏览器中预览效果。 13. **Vetur**: 这是一个非常重要的扩展工具集,提供了针对 .vue 文件的语言服务,比如智能感知、语法着色等功能。 14. **IntelliJ IDEA Keybindings**: 如果习惯 IntelliJ 系列产品的快捷键布局,则可以通过此插件迁移过来继续沿用熟悉的方式工作。 #### 安装 Vue 并配置开发环境 要开始构建项目前需先确认 Node.js 已经被正确安装好因为它是运行 npm/yarn 所必需的基础依赖项之一;接着按照如下步骤执行初始化过程: 1. 下载官方提供的两个版本库——生产模式与调试用途分开考虑分别获取稳定发行版以及带有额外日志输出特性的未压缩形式资源文件[^2]。 ```bash # 使用npm命令行方式全局引入@vue/cli脚手架工具 npm install -g @vue/cli # 创建新工程目录名为my-vue-app vue create my-vue-app ``` 2. 浏览器端辅助诊断利器 —— *Vue DevTools* 不可少,通过 Chrome/Firefox 添加对应扩展组件以便实时监控数据流变化情况等重要信息。 --- ### 示例代码展示 下面给出一段简单的 HelloWorld 组件演示如何定义基础 SFC 单文件格式内容: ```html <template> <div id="app"> {{ message }} </div> </template> <script lang="ts"> import { defineComponent } from &#39;vue&#39;; export default defineComponent({ name: &#39;App&#39;, data() { return { message: &#39;Hello World!&#39; } }, }); </script> <style scoped> #app { color: blue; } </style> ``` 上述例子展示了如何利用 TypeScript 编写逻辑部分的同时还加入了局部样式限定作用域规则[^1]。 ---
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值