1.首先安装nodejs以及vscode以及vscode关于vue3的插件Volar【volar】

在vscode中安装，ctrl+·  调出终端，

然后运行“npm install typescript”安装typescript 

npm install typescript

---

1.2创建项目【在vscode的终端中】
npm init vite@latest

1.2.1选择vue

1.2.2进入项目目录，安装包【注意看提示】
npm install  

1.2.3运行程序
npm run dev

 就是可以根据提示用浏览器访问了

 

---

2.vue3的基本使用

创建一个快速创建的魔板，在vscode中设置

 

 

 

vue.json文件内容：

{
	"Print to console": {
		"prefix": "vue3",
		"body": [
			"<template>",
			"  <div></div>",
			"</template>",
			"",
			"<script lang='ts'>",
			"import {defineComponent, reactive, toRefs, onBeforeMount, onMounted } from 'vue'",
			"export default defineComponent({",
			"  name: '',",
			"  setup() {",

			"    const data = reactive({})",
			"    onBeforeMount(() => {",
			"     //2.组件挂载页面之前执行----onBeforeMount",
			"    })",
			"    onMounted(() => {",
			"      //3.组件挂载到页面之后执行-------onMounted",
			"    })",
			"    return {",
			"      ...toRefs(data),",
			"    }",
			"  },",
			"})",
			"",
			"</script>",
			"<style scoped lang='less'>",
			"</style>",
		],
		"description": "Log output to console"
	}
}

---

2.2 新建以及vue的初步使用

新建vue文件，在components中新建一个“Applab.vue”文件

 2.2.1在Applab.vue”中输入vue3，就是自出现了上面的代码{代码来自上面的魔板的配置}

2.3在main.ts中导入刚刚新建的*Applab.vue

 

2.4运行vue程序 npm run dev 

[前提条件要在程序的运行目录下运行]

 

打开浏览器输入地址，可以查看Applab.vue的内容了

 

---

上述的初步配置以及初步使用就是可以运行了

后续的使用可以  延续上面的步骤，在在components中新建一个“*.vue”文件，然后再吗，main.ts中导入，在*.vue中输入相应的内容，通过浏览器即可访问你需要的内容了