由于第一次使用VScode创建Vue项目，很多步骤不熟悉，特此记录一下。（小编之前用的是HBuilderX，创建项目的时候超级轻松；也可以通过vue ui打开vue的可视化界面，操作超级方便）

进行下面的步骤之前，你的电脑上面需要是已经安装并配置好创建Vue项目所需的各种环境，包括nodejs环境、webpack环境、以及 vue cli4 环境。（安装过程可参考：vue cli3 安装）

正确姿势

由于VScode没有提供创建项目的入口，因此创建项目需要通过以下步骤

step1、创建文件夹

在你打算创建项目的路径下面创建一个空文件夹

step2、在VScode中打开文件夹

在VScode工具栏中找到：文件 -> 打开文件夹 -> 选择文件夹，点击确定

然后就可以在VScode中看见一个新的工作区，里面有刚才创建的空文件夹。右侧有四个图标，分别表示：创建文件、创建文件夹、刷新、折叠

step3、在VScode终端中创建项目

在VScode工具栏中找到：终端 -> 新建中断。在下方就可以看到终端，如图所示

接下来就是执行创建项目的命令。不同版本的vue，命令不一样。由于本项目是 vue cli4 ，就执行vue cli4的创建命令，和vue cli3的命令一样。

注意，项目名为小写，不能包含大写

 vue create 项目名

接下来便是项目中的配置选择，已经有过项目创建经验的人，对这部分应该比较熟悉，这里详细说明一下

step4、选择项目中需要安装的插件

下面出来这些，都是之前我在创建其他项目时，已经选择过的插件配置。如果你也有，可以选择已有的，也可以创建新的，选择最后一项，点击回车就可以

这里为了演示全部过程，小编选择了最后一项，Manually select features，然后进入插件选择部分。

vue提供了两个默认选中的插件，你可以根据自己的需要选择插件，由于只是一个测试项目，里面用不到很多东西，就选择基础的几个：Babel、Router，就可以

各个插件的作用如下：（原文链接：https://blog.csdn.net/AI_U20/article/details/88424354）

Babel ： 将ES6编译成ES5，方便在开发中使用ES6语法
TypeScript ： javascript类型的超集（可以学一下）
Progressive Web App (PWA) Support ： 支持渐进式的网页应用程序
Router ： vue-router
Vuex ： 状态管理，适用于大项目
CSS Pre-processors ： CSS预处理
Linter / Formatter ： 开发规范
Unit Testing ： 单元测试
E2E Testing ： 端到端测试

实际上，这里选择了哪些插件并不重要，后面需要的时候，可以随时安装和删除

按照提示，Press <space> to select, <a> to toggle all, <i> to invert selection，点击空格选中插件，点击 i 更换选中，点击回车完成选择并进入下一步

step4、选择ESlint的配置

ESlint主要是对代码进行规范用的，是一个很严谨很严谨的一款插件（严谨到一个空格都会报错，使用在开发时，还是关掉好一点，或者在上一步直接不选择，不然你就会因为ESlint的报错提示搞得十分繁忙）

下面的一些步骤，直接安装默认的就行

step5、是否保存当前方案

到了这里的时候，Save this as a preset for future project？(y/N)，意思是，你是否想要把上面所选的插件作为一个方案保存，这样方便以后直接选用，无需再次手动配置（就像step4中截图里面，我已经创建的那些方案一样）

Save present as：如果你想要把此次创建所选插件作为一个方案保存，那么就给它起个名字

step6、选择安装方式

我已经安装了yarn和npm，二者都可以选择，区别在于，yarn更快。因为npm的镜像在国外，会更慢一点，也可能会出现网络问题（回想起第一次安装vue的时候，年幼无知，使用的 npm，可真是吃够了苦，后来还是用的 cnpm 解决的）

点击回车，就开始安装了，这是一个漫长的过程，耐心等待就好

step7、安装完成

出现下图所示，就是成功安装了。在工作区下面，可以看到过程新创建的项目

同时，本地也会出现项目，如下

step8、运行项目

按照提示，输入并执行命令，即可

启动完成，复制地址，浏览器打开，或者Ctrl+单击


完成了
———————————————————— 分割线 ————————————————————

bug和解决

1、问题一：无法加载npm\vue.ps1，系统禁止脚本运行

解决参照：https://blog.csdn.net/qq_41956139/article/details/105308172

2、问题二：命令不对应

咳咳，不管做什么事情都需要带脑子呀，请看我的错误演示

可以看到，执行的vue init webpack myProjectOne是vue cli2的创建命令（然而一心想要赶紧创建项目的我没有注意到，哈哈哈），vue cli4中并不支持。按照提示，安装 yarn global add @vue/cli-init，本来应该是可以成功的，但是不知道为何问题循环了，或许是需要重启？？（这个问题我没有去追究，因为就在此时，我发现了版本问题，为时不晚）

那么，就用对应版本的命令去执行吧，vue create myProjectOne。然而，有报错，原来是项目名只能小写，不允许有大写

调整，重新来，OK了