vite+vue3项目空壳的构建

步骤

1.打开vite的官网

vite官网：vite官网

2.搭建第一个vite项目

自己创建一个文件夹，通过vsc编辑器打开文件夹

进入项目文件夹后打开vsc终端
也可以使用快捷键ctrl+~打开终端

我这里用的是npm
直接复制 npm create vite@latest

等待下载，下载完后，出现以下界面

然后回车






然后一个简单的vite-vue3的空壳项目构建完成了，

3. 插件

然后的话再推荐给大家安装一款插件：Vue Language Features (Volar)

4.vue模板配置(有vue和vue3)

vue模板：

{
	"Print to console": {
		"prefix": "vsc",
		"body": [
			"<template>",
			"  <div></div>",
			"</template>",
			"",
			"<script>",
			" export default {",
			"  name: '',",
			"  data() {",
			"    return {",
			"    };",
			"  },",
			"  mounted() {",
			"  },",
			"  methods: {},",
			" };",
			"</script>",
			"",
			"<style scoped>",
			"",
			"</style>",
			"",
		],
		"description": "自定义Vue模板"
	},
	"vue3": {
		"prefix": "v3",
		"body": [
			"<template>",
			"   ",
			"</template>",
			"",
			"<script setup>",
 
			"import { ref, reactive } from 'vue';",
			
			
			"</script>",
			"",
			"<style scoped>",
			"",
			"</style>",
			"",
		],
		"description": "自定义Vue模板"
	},
	"vite-vue3": {
		"prefix": "vi",
		"body": [
			"<template>",
			"   ",
			"</template>",
			"",
			"<script>",
			"</script>",
			"",
			"<style scoped>",
			"",
			"</style>",
			"",
		],
		"description": "自定义Vue-Vite模板"
	}
	
}

将上面的代码复制到vue.json获取vue.json.code-sinppets(全局)里面保存就可以了。

解释：

"prefix": "vsc",//配置输入的快捷键,根据自己的喜欢命名

备注：vsc表示配置的是vue2的模板,v3表示的是vue3的模板, 里面的代码也可以自己需求配置