Spring Boot 学习记录笔记【 四 】之前端Vue

前端Vue CLI

学习 Vue CLI 的官网网址

安装 Node.js 和 Vue CLI

首先需要安装 Node.js ，可以看出来我已经安装好了。

查看版本命令：node -v

先查看本地的镜像，在修改成淘宝镜像

显示当前的镜像网址命令：npm get registry
使用淘宝的镜像网址命令：npm config set registry http://registry.npm.taobao.org

查看官网安装教程，可以了解如何安装。

安装命令：npm install -g @vue/cli
检查Vue cli版本命令：vue --version

创建 Vue CLI 项目

创建命令：vue create 项目名

这里是有一个选择，按电脑上下键进行选择，比如 demozcf 是我自己创建的一个模板，可以直接选择这个，也可以选择手工创建，基于是记录，我选择手工创建。选择最后一个 Manually select features 然后按回车。

这里是可以按空格选中，依旧是上下键进行选择。选择完，按回车进行下一步。我这里选中的有（TS，Router，Vuex）配置，其他是默认选中的，没有更改。

这里我们选择 Vue 3.x

这里问我们是否要用类component，写法跟Java类一样，我选择了是不需要

这里问我们是不是要用Babel 来配合 TypeScript ，我选择了是不需要

这里是问我们要不要用历史的模式来使用 Router ，就是地址栏有没有含 # 号的
像：history: xxx/user
hash: xxx/#/user
这里我选择了是

这里是ESLint的校验规则，用于检查代码，这里我选择的是第一个，最简单的。

这里是选择ESLint什么时候触发检查，我选择的是第一个，保存的时候触发。

这里是问刚刚我们的一些设置时需要单独的文件还是放到 package.json文件里面，我选择的时单独的文件，第一个。

这一步就是问，我们上述的配置，需不需要生成一个模板，就跟一开始我有一个 demozcf 的模板一样，我选择需要。

给模板起一个名字，叫做zcfdemo，然后回车就开始创建的过程了。

创建成功。

项目里面多了一个web文件夹

启动项目

我们先来简单的启动一下。
就按照创建成功的时候显示的去操作。

先输入命令: cd web 就是进入到web文件夹里面
在输入命令：npm run serve

输入完之后，显示这样的界面，就表示启动成功，我们来访问一下页面。

成功访问。

介绍另外一种启动方式。先在web目录里面找到 package.json ，然后右键选择Show npm Scripts

显示如下。

可以把npm移动到右端，显示方便。然后双击 serve，也能启动。

结尾

到这里，Spring Boot 项目中创建了前端vue的web项目，从安装、创建、启动，都一一记录了，文章是记录自己的学习笔记，或多或少都有问题和遗漏，欢迎留言，一起进步。继续更新Spring Boot 学习记录笔记【 五 】