使用webstorm2020创建一个带有项目模板的Vue项目

为了响应时代的召唤，最近在看关于vue的东西。我想使用WebStorm创建一个简单的带有模板的vue项目。

一、前提

在创建vue 项目之前你必须要确保你已经安装了以下东西：
1.webstorm（我使用的是2020版的）
2.node.js（v12.18.3）
3.cnmp（[email protected]）
4.vue（2.9.6）
5.webpack（4.44.1）
6.git
以上这些东西可以直接去百度，都没有什么坑，很容易就安装成功了。

二、创建vue项目

当你完成了“前提”中的任务，你就可以打开webstorm创建vue项目了。
创建步骤如下：
（1）打开webstorm->file->project->vue.js
我们没有template这个选项，所以我们不使用webstorm工具去创建vue项目我们使用git！
（2）使用git创建带有模板的vue项目
第一步：在你webstorm编译工具的工作空间中右键打开git（这个工作空间说白了就是你存放项目的目录）

第二步：在git中执行创建vue的命令
命令：vue init webpack [你项目的名称]
一定要注意：你项目的名称不能存在大写的字母！！！

第三步：填写信息
前面几个提示信息不用管，直接回车就行

? Project name (myprojectvue02)
? Project name myprojectvue02
? Project description (A Vue.js project)
? Project description A Vue.js project
? Author (hjd <1481808136@qq.com>)
? Author hjd <1481808136@qq.com>
? Vue build (Use arrow keys)
? Vue build standalone

? Install vue-router? (Y/n)//询问你是否安装vue的路由

不懂啥意识，我选择的是no

Use ESLint to lint your code? (Y/n)

是否使用ESLint管理代码，我选择的是no

Set up unit tests (Y/n)

是否设置单元测试，这个需要。选择yes。紧接着直接回车。

Setup e2e tests with Nightwatch?

是否设置单元测试和e2e测试。我选择的是no。紧接着直接回车。

? Should we run `npm install` for you after the project has been created? (recom
mended) (Use arrow keys)
> Yes, use NPM
  Yes, use Yarn
  No, I will handle that myself

这里选择的是你创建的项目后使用什么运行项目，这里选择 NPM

这里需要创建的过程有些慢，需要等一会~

如果我们看到下面的内容说明创建成功了：

三、启动vue项目

回到webstorm，并打开你刚刚创建的vue项目，如下图：
点击左下角的npm：
此时如果你打开vue项目后，发现左下角没有npm的控件，你需要如下做：
双击dev运行vue项目
点击地址：

运行成功！！！