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

太过爱你忘了你带给我的痛 2021-09-07 06:06 505阅读 0赞

#### 搭建项目 ####

##### 一、安装Vue CLI #####

1、安装node.js

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

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMjY0NTk3_size_16_color_FFFFFF_t_70]

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

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

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

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMjY0NTk3_size_16_color_FFFFFF_t_70 1]

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMjY0NTk3_size_16_color_FFFFFF_t_70 2]

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

2、安装cnpm

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

(1)安装cnpm

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

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMjY0NTk3_size_16_color_FFFFFF_t_70 3]

(2)安装手脚架

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

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

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMjY0NTk3_size_16_color_FFFFFF_t_70 4]

##### 二、构建前端项目 #####

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

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMjY0NTk3_size_16_color_FFFFFF_t_70 5]

点击进去workspace,如上图所示，选上G:workspace,然后打上cmd，再按回车键  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMjY0NTk3_size_16_color_FFFFFF_t_70 6]

1、执行命令：`vue init webpack Cotea`

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

webpack是以webpack为模板生成项目  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMjY0NTk3_size_16_color_FFFFFF_t_70 7]

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

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

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMjY0NTk3_size_16_color_FFFFFF_t_70 9]

项目构建完成的文件如下

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMjY0NTk3_size_16_color_FFFFFF_t_70 10]

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

（2）然后执行npm run dev

（3）在浏览器中输入http://localhost:8080  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMjY0NTk3_size_16_color_FFFFFF_t_70 11]

##### 三、构建后端项目 #####

1、在IDEA中新建项目：file——>New——>project![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMjY0NTk3_size_16_color_FFFFFF_t_70 12]  
2、选择Spring Initializr,点击Next![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMjY0NTk3_size_16_color_FFFFFF_t_70 13]  
3、输入Project Metadata,然后点击下一步![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMjY0NTk3_size_16_color_FFFFFF_t_70 14]  
4、web——>Spring Web，然后Next![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMjY0NTk3_size_16_color_FFFFFF_t_70 15]  
会出现项目名称和项目地址，然后Finish就ok![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMjY0NTk3_size_16_color_FFFFFF_t_70 16]  
5、等待，后端项目搭建完成如下图所示  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMjY0NTk3_size_16_color_FFFFFF_t_70 17]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMjY0NTk3_size_16_color_FFFFFF_t_70]: /images/20210813/4da3d15d4acd41d68b4b0d3264710787.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMjY0NTk3_size_16_color_FFFFFF_t_70 1]: /images/20210813/5cc7c5e77dd04ccdb12a139143cdd4d5.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMjY0NTk3_size_16_color_FFFFFF_t_70 2]: /images/20210813/10baf556e4694a3aa18503a0c0599b9a.png
[20210202152630378.jpg]: /images/20210813/1d99cae5cf594f0b9d676f23d896d439.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMjY0NTk3_size_16_color_FFFFFF_t_70 3]: /images/20210813/a147c4658e1d4dd48d81c88fb7a3827b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMjY0NTk3_size_16_color_FFFFFF_t_70 4]: /images/20210813/77ad44f773db4fa7bcef471b17a1f2ee.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMjY0NTk3_size_16_color_FFFFFF_t_70 5]: /images/20210813/3689bedba2594b23955e4e24b49f281a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMjY0NTk3_size_16_color_FFFFFF_t_70 6]: /images/20210813/b8d38752180f445e9f2e9f36f16f6b15.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMjY0NTk3_size_16_color_FFFFFF_t_70 7]: /images/20210813/fd771d9e860149cbbba5bff6369ae8a0.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMjY0NTk3_size_16_color_FFFFFF_t_70 8]: /images/20210813/04756bbd9ea74a24afbdf745cc40c198.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMjY0NTk3_size_16_color_FFFFFF_t_70 9]: /images/20210813/69d59dd9388741a09b38a647783ef5ce.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMjY0NTk3_size_16_color_FFFFFF_t_70 10]: /images/20210813/11954441b54746a48a014764fade5f3b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMjY0NTk3_size_16_color_FFFFFF_t_70 11]: /images/20210813/d390b860d0844eb3bc7ef7d17f7500b8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMjY0NTk3_size_16_color_FFFFFF_t_70 12]: /images/20210813/fa532f88bb6240b4b74464e158c999bc.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMjY0NTk3_size_16_color_FFFFFF_t_70 13]: /images/20210813/520ed759b1b84c0b9f265bfdc3314685.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMjY0NTk3_size_16_color_FFFFFF_t_70 14]: /images/20210813/a0e184439e5f4c81870829a35c67b1bc.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMjY0NTk3_size_16_color_FFFFFF_t_70 15]: /images/20210813/f478a8ac0a9a4029a0fcfc5bfa2b7f44.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMjY0NTk3_size_16_color_FFFFFF_t_70 16]: /images/20210813/5fa9ff5f94d444f096d25e1f20c1b7af.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMjY0NTk3_size_16_color_FFFFFF_t_70 17]: /images/20210813/4096ddf70f1048b5aeedf6979d03491d.png