SpringBoot+Vue项目完成之路（一）——搭建项目

搭建项目

一、安装Vue CLI

1、安装node.js

官网：https://nodejs.org/en/

图中左边是长期支持版本，右边是当前版本

下载完成后，运行安装包，一路下一步即可

快捷键windows+R键，输入cmd后回车键，出现下面的第一个图，再输入 node -v，如果出现版本号，说明已经安装成功了

NPM最初用于管理和分发Node.js的依赖，它自动化的机制使得层层嵌套的依赖管理变得非常简单，因此后来被广泛应用于前端依赖的管理中。在node官网下载node客户端，同时你会得到一个NPM工具。node.js下载成功也就说明npm也安装成功了，可以输入npm -v 然后按回车键就可以出现了npm的版本号

2、安装cnpm

由于NPM的仓库源布置在国外，资源传输速度较慢且可能受制，所以我们可以用淘宝镜像的cnpm来代替npm

(1)安装cnpm

npm install -g cnpm --registry=https://registry.npm.taobao.org

(2)安装手脚架

npm install -g vue-cli （2.x版本的Vue CLI的安装方式）

npm install -g @vue/cli（最新版本的下载方式）

二、构建前端项目

在自己的任意一个磁盘新建一个workspace的文件夹（我是在G盘建立的workspace)

点击进去workspace,如上图所示，选上G:workspace,然后打上cmd，再按回车键

1、执行命令：vue init webpack Cotea

Cotea为项目名，可以替换为其他名字

webpack是以webpack为模板生成项目

2、按回车键之后出现下列提示，意思就是把项目名改为小写字母（第一次弄，我也不知道只能小写的，或者大写的话需要一些其他配置，我也不太清楚呀）

3、程序建立会有一些提示，一路回车，要回答Y/N的就一路Y下去就可以了，接下来就等着项目构建完成就可以了

项目构建完成的文件如下

4、（1）进入项目文件夹 (cd G:\workspace\cotea)(如果一开始也是大写的话，就写原来的名字，或者到文件夹中重命名，我就是重命名了cotea)

（2）然后执行npm run dev

（3）在浏览器中输入http://localhost:8080

三、构建后端项目

1、在IDEA中新建项目：file——>New——>project
2、选择Spring Initializr,点击Next
3、输入Project Metadata,然后点击下一步
4、web——>Spring Web，然后Next
会出现项目名称和项目地址，然后Finish就ok
5、等待，后端项目搭建完成如下图所示