Vscode创建vue项目的详细步骤

ゝ一世哀愁。 2023-09-24 19:28 19阅读 0赞

**目录**

一、概述

操作的前提

方式一（默认vue3方便快捷）

方式二 （可选择vue版本与创建方式）

--------------------

## 一、概述 ##

后端人员想在IDEA里面创建一个Vue的项目，但是这非常麻烦，用vscode这个前端专用软件创建就会非常快速。

#### 操作的前提 ####

> **1.**安装vscode软件的步骤：[vscode下载和安装教程和配置中文插件（超详细）\_vscode中文插件\_云边的快乐猫的博客-CSDN博客][vscode_vscode_-CSDN]
> 
> **2.**安装node.js的步骤：
> 
> [node.js的下载安装详细步骤\_云边的快乐猫的博客-CSDN博客][node.js_-CSDN]

## 方式一（默认vue3方便快捷） ##

**1.**新建一个存放vue项目的文件夹

![8bb2db5b7ab347d6ab62d43e1fda2f36.png][]

**2.**把这个文件夹手动拉到vscode软件里面并勾选信任

![2228ca5c827548f087ee9d433fed0413.png][]

**3.** 去到vue的官网---快速上手，把这行代码复制下来

> vue3版本的官网：[快速上手 | Vue.js][_ Vue.js]

npm init vue@latest

![2d3f9f22dd0b4bec8c46a7db717e922a.png][]

**4.**打开**vscode**软件，使用CTRL\+**~**快捷键打开终端，然后把上面复制的代码复制进去回车。然后定义项目的名字。接下来的就都一直按回车键确定就好了

![73f375c8a5ba4624befd625515e927e0.png][]

**5.**底部会出现3行提示，跟着它敲然后回车就好了

![858bab7855f3442baa9cc51ca8e3b719.png][]

**6.**点击这个或者复制去浏览器打开，就可以跳转到vue的界面了

![3b1b8485a856413db2c379deea72ebc6.png][]

**7.**vue界面加载成功

![9da395cc9581453f8510e3901e02afe2.png][]

这样一个vue的项目就创建完成了

## 方式二 （可选择vue版本与创建方式） ##

> [vue3和vue2的介绍和两种创建方式（cli和vite）\_云边的快乐猫的博客-CSDN博客][vue3_vue2_cli_vite_-CSDN]

[vscode_vscode_-CSDN]: https://blog.csdn.net/m0_52861000/article/details/127874437?spm=1001.2014.3001.5502
[node.js_-CSDN]: https://blog.csdn.net/m0_52861000/article/details/129127440?spm=1001.2014.3001.5502
[8bb2db5b7ab347d6ab62d43e1fda2f36.png]: https://img-blog.csdnimg.cn/8bb2db5b7ab347d6ab62d43e1fda2f36.png
[2228ca5c827548f087ee9d433fed0413.png]: https://img-blog.csdnimg.cn/2228ca5c827548f087ee9d433fed0413.png
[_ Vue.js]: https://cn.vuejs.org/guide/quick-start.html#creating-a-vue-application
[2d3f9f22dd0b4bec8c46a7db717e922a.png]: https://img-blog.csdnimg.cn/2d3f9f22dd0b4bec8c46a7db717e922a.png
[73f375c8a5ba4624befd625515e927e0.png]: https://img-blog.csdnimg.cn/73f375c8a5ba4624befd625515e927e0.png
[858bab7855f3442baa9cc51ca8e3b719.png]: https://img-blog.csdnimg.cn/858bab7855f3442baa9cc51ca8e3b719.png
[3b1b8485a856413db2c379deea72ebc6.png]: https://img-blog.csdnimg.cn/3b1b8485a856413db2c379deea72ebc6.png
[9da395cc9581453f8510e3901e02afe2.png]: https://img-blog.csdnimg.cn/9da395cc9581453f8510e3901e02afe2.png
[vue3_vue2_cli_vite_-CSDN]: https://blog.csdn.net/m0_52861000/article/details/130181571