Vue cli4快速创建项目

最近公司一期项目接近尾声，没有那么忙了，前端框架使用到了Vue，于是抽空花了几天时间来学习它，记录一些点滴。项目中使用的是Vue cli3脚手架，最新的已经更新到了cli4.xx，于是直接官网上从最新的学习，这里总结一下在idea中使用Vue cli4快速创建项目的过程。

1.新建项目目录，使用idea打开

本地新建一个项目目录vueStudy，使用idea打开：

 

2.安装node.js，npm依赖，cli脚手架，查看版本

环境准备：

这里安装好node.js环境后，就可以安装cli了：

准备好环境后，在idea中查看安装的版本，如下：

3.创建项目

创建项目命令：vue create 【项目名称】

出现如下选择，第一项默认配置，这里我选择第二项，手动配置：

我选择的项目自定义配置如下（空格选中当前项，再次空格取消选择）：

选择是否使用路由 history router，其实就是是否路径带 # 号（这里我只是简单描述，并不贴切），我选择n：

css 的预处理器我选择的是 Sass/SCSS(with dart-sass) 。dart-sass需要保存后才会生效，sass 官方目前主力推 dart-sass ：

选择 ESLint 代码校验规则，我选择ESLint + Prettier ：

代码校验，我选择第一项，保存就检查，相当于热部署：

存放配置，由于只是学习的简单项目，我就选择了package.json：

是否保存本次的配置，这里我选择了否：

最后回车，等待项目创建完成：

如果创建成功，会有如下描述：

查看项目目录机构，如下（这里就不多描述了）：

4.启动项目

根据项目创建完成的提示，可以看到如下命令：

先进入项目目录（cd vue1）：

在输入启动项目命令（npm run serve）：

启动成功后，点击下面任一链接即可打开页面：

启动项目后的界面如下（一个基于cli4快速创建的项目就完成了）：