原文地址:https://mp.weixin.qq.com/s/HqLgf2TCVqnndSxJw_1RTQ
一、准备工作
在学习之前,需要安装两个工具,一个是IDE,一个是Node.js:
Vs Code: https://code.visualstudio.com/Download
Node.js: http://nodejs.cn/download/
安装过程略,安装好之后,为了在vscode中能智能提示和运行,还需安装以下几个插件:
Vue Language Features (Volar)
TypeScript Vue Plugin (Volar)
Element Plus Snippets
HTML CSS Support
Auto Rename Tag
二、新建vue3项目
标题虽然写Vite+Vue3+TS,其实只需照做,简单几步就完成安装:
1、新建一个study文件夹:
2、安装vite:
cmd进入这个目录,npm init vite@latest即可完成安装,具体步骤和参数如下:
1)先输入 npm init vite@latest
2)回车之后,要求我们输入项目名称,如果不输入,则默认是vite-project:
3)回车之后,让我们选择vite支持的框架,按上下键选vue:
4)再回车,选择ts:
5)安装完成,提示我们用三行命令进行接下来的操作,我们记住即可,所有的操作搬到vscode进行:
cd vite-project
npm install
npm run dev
三、vscode打开项目:
1、文件→打开文件夹,对应的英文为File→Open Folder:
2、找到刚才新建好的vite-project文件夹:
3、打开效果如下:
四、vscode运行项目:
1、打开终端:
Terminal→New Terminal:
2、安装依赖包:
1)输入刚刚记录的命令npm install安装依赖包:
2)安装过程持续几分钟,安装完成如下:
3、运行:
1)输入刚刚记录的命令npm run dev:
2)打开预览:
按住ctrl点击鼠标,会在默认浏览器打开预览:
搞定,就是这么简单!!!
翻译
搜索
复制
<iframe></iframe> 标签:npm,vscode,TS,Vite,Vue3,打开,安装,vite From: https://www.cnblogs.com/lizhigang/p/18020803