如何利用命令行在webstorm创建一个新项目

第一步:

在一个盘符创建一个根目录来存储项目

新建express 项目 empower新建项目_根目录


第二步:

进入此目录,按住shift键右击,单击在此处打开Powershell窗口。

新建express 项目 empower新建项目_vue.js_02


第三步:

在对话框中输入 npm config set registry https://registry.npm.taobao.org/

将npm配置成阿里服务器

新建express 项目 empower新建项目_vue.js_03


第四步:

在对话框中输入 npm install --global vue-cli

回车

新建express 项目 empower新建项目_新建express 项目_04


此图正在下载,稍等2~3分钟,根据网速来决定。

新建express 项目 empower新建项目_根目录_05


如图完成,我这里是安装完一次了,所以显示的少一些,如果要是第一次安装的话出来的比我这个多好几行。第五步:

在对话框中接着输入 vue init webpack vueapp

注意:vueapp是项目的名称,在这里可以根据实际情况来决定。

新建express 项目 empower新建项目_下载文件_06


此时正在下载,稍等片刻。

新建express 项目 empower新建项目_根目录_07


第六步:

如图安装完成,接下来开始配置。

第一个说的是名字,这里不配置直接回车。

第二个说的是描述,这里不配置直接回车。

第三个说的是作者,这里不配置直接回车。

第四个不重要,这里直接回车。(学艺不精,见谅。知道的评论区说下,谢谢!)

第五个问你说,是否安装router,这里不安装,输入n。

第六个问你说,是否安装lint your code,这里不安装,输入n。

第七个问你说,是否安装unit tests,这里不安装,输入n。

第八个问你说,是否安装 tests with Nightwatch,这里不安装,输入n。输入完成后如图

新建express 项目 empower新建项目_新建express 项目_08


紧接着回车

新建express 项目 empower新建项目_下载文件_09


现在在下载文件稍等片刻。

新建express 项目 empower新建项目_服务器_10


新建express 项目 empower新建项目_vue.js_11


第七步:

此时它让完成这两步:

新建express 项目 empower新建项目_vue.js_12

如图安装完成

新建express 项目 empower新建项目_下载文件_13


此时根目录就多出来了vueapp的项目。第八步:

利用软件打开测试。

1.打开webstorm。

2.选择file→open…

新建express 项目 empower新建项目_服务器_14


打开如图,找到创建的项目,选择vueapp→OK。

新建express 项目 empower新建项目_vue.js_15


此时就打开了一个新项目的界面。

新建express 项目 empower新建项目_新建express 项目_16


在游览器输入:http://localhost:8080

新建express 项目 empower新建项目_根目录_17


出现此图说明创建正确。