vue3学习-1配置以及启动

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": [
			"",
			"",
			"",
			"",
		],
		"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中输入相应的内容，通过浏览器即可访问你需要的内容了