vue-cli4项目搭建 - 创建一个完整vue项目 从 vue-cli2 到 vue/cli4 要点记录

一步一步来，没问题的。

一 安装 node

node官网下载安装包 https://nodejs.org/zh-cn/

装node是主要是为了安装node中自带的npm包管理工具，下载好之后，选择好安装路径，一直下一步即可。

1 检查node版本

window + R 输入cmd 打开命令行窗口  

输入或复制以下代码，出现node版本号即成功。（node版本不能太低，否则不支持之后的安装）

node --version 

2 更换淘宝镜像

输入或复制以下代码，将外网的npm镜像换为国内更快的淘宝镜像

npm config set registry https://registry.npm.taobao.org

替换完成后，输入或复制以下代码可以进行镜像检测，任意选一下面一句即可

npm config get registry   
npm info express

不想用淘宝镜像，还可以还原

二 安装 vue/cli

如果之前安装过vue-cli的脚手架，但不是最新版本，则输入第一行代码先卸载原有脚手架再安装，否则直接安装即可

npm uninstall -g vue-cli

npm install -g @vue/cli

安装完成之后，输入以下代码，出现vue-cli脚手架版本号即成功

vue -V

至此，准备阶段告一段落。

三 创建vue/cli项目

  替换成你想创建的项目名，注意项目名不支持大写，创建的路径位置等

vue create  

 

如下图，

选第一个则会就会直接快速安装好一个简单的vue项目，

选第二个会有一些选项，可以自己配置。

上下方向键选择 enter确认

给出了一些常用配置，根据自己需要选择（按选择，切换全部，反转选择）

选择了css预处理器的话，会有如下选项，用sass的选dart-sass即可，官方推荐，相当于最新的sass特性都会新增其中。

选择了Linter的话，最常用的代码规范控制是ESLint和Prettier

一些其他的选项，1是否保存时检查一遍，2提交代码前检查一遍，与上面一样的多选方式。

babel代码存放位置，单独的babel配置文件或者package.json中

是否保存成默认配置，一般选N，熟能生巧。

创建成功，提示你进入文件夹然后运行npm run serve 即可运行该vue项目

运行成功，在浏览器输入url即可访问项目。

至此一个vue最基本的SPA项目就创建完成了。