vscode 开发vue3环境配置

插件安装

推荐两个插件
1、vetur
2、vue3 snippets
vue3 snippets 安装后 css 会有提示 js 的一些常用函数也有提示，这个是必须的
vetur 和 volar 这两个需要安装一个，否则vscode 不识别vue。我发现使用volar 很多提示都没有，css,和js都没有了，所以推荐使用 vetur+vue3 snippets

配置vue模板

效果展示

1、构建一个页面，可以很快速构建一个vue3的页面

2、快速构建一个el-form表单

3、插入js代码

有了这个是不是我们可以把经常用到的一些组件写成代码块，这样就不用每次去翻文档了

配置方法

vscode ->文件->首选项->配置用户代码片段
输入 vue

这里要区分一下
括号里面(Vue)那个是全局的，通常用于快速构建一个文件，比如一个vue3的模板
vue-html的通常是用于在html标签内快速构建html
在js里面传入代码，就需要输入 javascript

选中后都是下面的json，大家按照需求配置即可
这样会对应生成三个文件

路径会在磁盘下，分别对应三个文件
javascript.json这个是js代码块
vue-html.json是模板html代码块
vue.json是全局的，就是构建初始化页面的

文件类型基本都是这样的

{
	"vue3模板": { //快捷输入的时候显示的提示
		"prefix": "vue",//输入的前缀，就是输入这个会有提示
		"description": "vue3模板",//描述
		"body": [//这个是一个字符串数组，就是会输出的内容，如果内容含有 双引号，需要转义，比如最下面的lang=\"scss\"
			"<template>",
			"  <div></div>",
			"</template>",
			"",
			"<script setup>",
			"",
			"</script>",
			"",
			"<style lang=\"scss\" scoped>",
			"</style>",
			""
		]
	},
}

把我用的几个模板提供给大家，可以根据自己的需求自己定制化

vue.json

{
	"vue3模板": { //快捷输入的时候显示的提示
		"prefix": "vue",//输入的前缀，就是输入这个会有提示
		"description": "vue3模板",//描述
		"body": [//这个是一个字符串数组，就是会输出的内容，如果内容含有 双引号，需要转义，比如最下面的lang=\"scss\"
			"<template>",
			"  <div></div>",
			"</template>",
			"",
			"<script setup>",
			"",
			"</script>",
			"",
			"<style lang=\"scss\" scoped>",
			"</style>",
			""
		]
	},
}

vue-html.json

{
	"el-form模板": {
		"prefix": "el-form",
		"description": "创建el-form",
		"body": [
			"<el-form",
			"  :model=\"formData\"",
			"  :rules=\"rules\"",
			"  ref=\"formDataRef\"",
			"  label-width=\"80px\"",
			">",
			"<!--input输入-->",
			"  <el-form-item label=\"\" prop=\"\" >",
			"    <el-input clearable placeholder=\"提示信息\" v-model=\"formData.\"></el-input>",
			"  </el-form-item>",
			"<!--textarea输入-->",
			"  <el-form-item",
			"    label=\"\"",
			"    prop=\"\"",
			"    clearable",
			"    placeholder=\"提示信息\"",
			"    type=\"textarea\"",
			"    :rows=\"5\"",
			"    :maxlength=\"150\"",
			"    resize=\"none\"",
			"    show-word-limit",
			"    v-model=\"formData.\"",
			"  >",
			"  </el-form-item>",
			"<!-- 单选 -->",
			"  <el-form-item label=\"\" prop=\"\" >",
			"    <el-radio-group v-model=\"formData.\">",
			"      <el-radio :label=\"值1\">显示信息</el-radio>",
			"      <el-radio :label=\"值2\">显示信息</el-radio>",
			"    </el-radio-group>",
			"  </el-form-item>",
			"<!-- 下拉框 -->",
			"  <el-form-item label=\"\" prop=\"\" >",
			"    <el-select clearable  placeholder=\"提示信息\" v-model=\"formData.\" ,>",
			"      <el-option :value=\"值1\" label=\"显示信息\"></el-option>",
			"      <el-option :value=\"值2\" label=\"显示信息\"></el-option>",
			"    </el-select>",
			"  </el-form-item>",
			"</el-form>",
		]
	},
	"el-input模板": {
		"prefix": "el-input",
		"description": "创建el-input",
		"body": [
			"<!--input输入-->",
			"  <el-form-item label=\"\" prop=\"\" >",
			"    <el-input clearable placeholder=\"提示信息\" v-model=\"formData.\"></el-input>",
			"  </el-form-item>",
		]
	},
	"el-textarea模板": {
		"prefix": "el-textarea",
		"description": "创建el-input",
		"body": [
			"<!--textarea输入-->",
			"<el-form-item",
			"   label=\"\"",
			"   prop=\"\"",
			"   clearable",
			"   placeholder=\"提示信息\"",
			"   type=\"textarea\"",
			"   :rows=\"5\"",
			"   :maxlength=\"150\"",
			"   resize=\"none\"",
			"   show-word-limit",
			"   v-model=\"formData.\"",
			" >",
			"</el-form-item>",
		]
	},
	"el-radio模板": {
		"prefix": "el-radio",
		"description": "创建el-radio",
		"body": [
			"<!-- 单选 -->",
			"  <el-form-item label=\"\" prop=\"\" >",
			"    <el-radio-group v-model=\"formData.\">",
			"      <el-radio :label=\"值1\">显示信息</el-radio>",
			"      <el-radio :label=\"值2\">显示信息</el-radio>",
			"    </el-radio-group>",
			"  </el-form-item>",
		]
	},
	"el-select模板": {
		"prefix": "el-select",
		"description": "创建el-select模板",
		"body": [
			"<!-- 下拉框 -->",
			"  <el-form-item label=\"\" prop=\"\" >",
			"    <el-select clearable  placeholder=\"提示信息\" v-model=\"formData.\" ,>",
			"      <el-option :value=\"值1\" label=\"显示信息\"></el-option>",
			"      <el-option :value=\"值2\" label=\"显示信息\"></el-option>",
			"    </el-select>",
			"  </el-form-item>",
		]
	},
}

javascript.json

{
	"dialog弹窗配置": {
		"prefix": "dialogConfig",
		"description": "弹窗config配置",
		"body": [
			"const dialogConfig = reactive({",
			"  show: false,",
			"  title: \"标题\",",
			"  buttons: [",
			"   {",
			"    type: \"danger\",",
			"    text: \"确定\",",
			"    click: (e) => {",
			"      submitForm();",
			"    },",
			"  },",
			" ],",
			"});"
		]
	},
	"watch使用": {
		"prefix": "watch",
		"description": "快速实现watch",
		"body": [
			"watch(() => (newVal, oldVal) => {}, { immediate: true, deep: true });",
		]
	}
}

有了这个开发代码是不是就快的飞起了

提示快捷键

vscode 设置->键盘快捷方式->触发建议设置快捷键