初步掌握VUE.js开发环境的搭建并创建第一个项目的操作方法和实验步骤
题目
- 安装Visual Studio Code。
- 安装VS Code汉化插件。
- 安装Vue官方支持插件。
- 使用VS Code运行第一个HTML页面。
- 安装Node.js并验证其版本。
- 验证npm版本。
- 配置npm的下载镜像源。
- 配置Yarn的下载镜像源。
- 使用Vite创建Vue 3项目,并确保其能够成功运行。
实验步骤
1、安装Visual Studio Code。
![](https://i-blog.csdnimg.cn/direct/1b31aca210cf43308609833da94f1ed1.png)
![](https://i-blog.csdnimg.cn/direct/840778bf7f67407681b4deeb90e860f5.png)
![](https://i-blog.csdnimg.cn/direct/26198c66d72440d1881b14dac83f6400.png)
![](https://i-blog.csdnimg.cn/direct/2463a022625f4ba8ad8b8508419032ee.png)
2、安装VS Code汉化插件。
![](https://i-blog.csdnimg.cn/direct/e72e9cf131df437d9808512676f98325.png)
3、安装Vue官方支持插件。
![](https://i-blog.csdnimg.cn/direct/7c7a98bf3d1842b68e6f0716b566ffea.png)
4、使用VS Code运行第一个HTML页面。
![](https://i-blog.csdnimg.cn/direct/38e71cb379b34e2da4f6bcc65cd0bcea.png)
5、安装Node.js并验证其版本。
![](https://i-blog.csdnimg.cn/direct/f610cbaf20894ee797fd3f55c9f78e1e.png)
![](https://i-blog.csdnimg.cn/direct/537e73b9ce8844aaaed04a544ea99334.png)
![](https://i-blog.csdnimg.cn/direct/c0b56a4e076845529075b2896d9fb4af.png)
![](https://i-blog.csdnimg.cn/direct/21a5787cc8f34464aa52a686c658140c.png)
![](https://i-blog.csdnimg.cn/direct/205dbcad8ea64ce98acd738bc598f3b6.png)
![](https://i-blog.csdnimg.cn/direct/7727e1c841804da78796b60117503b9e.png)
6、验证npm版本。
![](https://i-blog.csdnimg.cn/direct/6697171ec6534d66986e61a34af3eadd.png)
7、配置npm的下载镜像源。
![](https://i-blog.csdnimg.cn/direct/42079cd27b9547a18dfb2628d42a1460.png)
8、配置Yarn的下载镜像源。
![](https://i-blog.csdnimg.cn/direct/5464b9d5266f4eafa19a20d3083036d6.png)
10、使用Vite创建Vue 3项目,并确保其能够成功运行。
![](https://i-blog.csdnimg.cn/direct/4214e69fd5604ef684158db0a3ef454f.png)
![](https://i-blog.csdnimg.cn/direct/b1251ae97c2e411db0f2375e2d4d9f7f.png)