web技术课程总结（1）——利用webstorm新建vue项目

一.开端

大二上学期在学校里面选了web技术这门课，这门课的大作业就是利用vue+springboot两个框架开发一个前后端分离的项目。从0开始到完成大作业，中间遇到了不少的问题，于是便萌生想法将他们都记录下来。第一篇文章就以新建一个vue项目开始吧！

二.准备

• 开发工具webstorm，大学生可以使用学校提供的教育邮箱免费白嫖官网的正版软件
• 安装node.js，这样才能使用npm
• 安装git
• 教程基于macOS操作系统，Windows的创建步骤大同小异

如果不确定是否已经安装node.js和git，我们可以在终端中进行检查：

node -v
npm -v
git --version

如果已经正常安装，则会显示出相应的版本信息。

附上传送门：
node.js官网
webstorm官网
git官网

三.创建vue项目

1.打开webstorm，弹出的是欢迎界面，直接点击New Project进入新建项目的向导界面。

2.在引导界面左侧栏中选中Vue.js，然后在Location一栏中更改新建项目的位置和名称，其他选项保持默认即可，最后点击Create按钮，webstorm就会自动开始帮你创建vue项目。
注意：笔者使用的是2020.3版本的webstorm，旧版本会在下图所示的向导界面有一些不同。

3.等待webstorm将所有准备工作完成后，vue项目就创建完毕了

四.运行

创建完毕后，点击顶部的运行按钮就可以直接将vue项目跑起来了。

直接点击http://localhost:8080/即可在浏览器中实时浏览


到此为止，一个崭新的vue项目就创建完成了。在创建过程中遇到了问题欢迎在文章下方留言，期待和你的探讨！