WebStorm快速创建vue项目,无需指令

一、前提准备

WebStorm2018、node.js、webpack、vue-cli,这些都需要安装好,网上有很多安装教程,这里就不赘述了。

安装参考教程:https://blog.csdn.net/nero__a/article/details/62228646

二、WebStorm创建vue项目

1.打开项目点击file->new->project

WebStorm快速创建vue项目,无需指令_第1张图片
创建项目

2、创建选项中选择vue.js,并选择项目存放路径,其他默认即可,然后点击next,之后都是一些项目信息,按照实际需要填写。

WebStorm快速创建vue项目,无需指令_第2张图片
选择创建vue.js

3.填写vue项目名,点击next。

WebStorm快速创建vue项目,无需指令_第3张图片
填写vue项目名

4、填写项目描述,点击next。

WebStorm快速创建vue项目,无需指令_第4张图片

5、填写作者,点击next,后边都是一些vue项目初始化信息。

WebStorm快速创建vue项目,无需指令_第5张图片

6、选择vue构建方式,按默认的选项点next即可。

WebStorm快速创建vue项目,无需指令_第6张图片

7、其他的选择安装vue-router,选择安装vue测试单元等操作,可以根据实际情况选择一般默认即可,这里直接跳过到最后一步,选择创建项目后通过什么方式运行,直接选择第一个use npm即可,单击next就可以自动安装项目的各种依赖,直接运行了。

WebStorm快速创建vue项目,无需指令_第7张图片

三、配置使用webstorm启动

1.打开 Edit Configurations

WebStorm快速创建vue项目,无需指令_第8张图片

2.点击+,选择npm

WebStorm快速创建vue项目,无需指令_第9张图片

3.运行

WebStorm快速创建vue项目,无需指令_第10张图片

4.点击链接打开页面

WebStorm快速创建vue项目,无需指令_第11张图片
WebStorm快速创建vue项目,无需指令_第12张图片

如果浏览器打开之后,没有加载出页面,有可能是本地的 8080 端口被占用,需要修改一下配置文件 config>index.js

WebStorm快速创建vue项目,无需指令_第13张图片

你可能感兴趣的:(WebStorm快速创建vue项目,无需指令)