Vue+SpringBoot项目学习（二）：准备工作+vue的结构关系

安装Vue CLI

最开始学习vue的时候其实安装的是vue，对于做后端的我来说我觉得我还是直接使用最快速最好用的工具好了。

1. 首先要先安装node.js，直接百度安装就可以了，官网上直接选择稳定版本安装。注： 安装的时候不用勾选自动下载环境什么的，要下好久，然后还用不到。安装完之后可以使用命令node -v检查有没有安装成功。
2. 安装好node.js之后就可以使用npm install -g vue-cli安装vue-cli，其中-g表示全局，就是说在任何一个项目中都可以使用。注意如果要下载最新的vue要使用命令npm install -g @vue/cli

这里可以选择安装npm install -g cnpm --registry=https://registry.npm.taobao.org
这个是淘宝的国内镜像，正常安装包的方式使用npm，使用国内镜像的方式是cnpm，如果发现有个包使用npm下载不下来，可以使用cnpm（建议先使用npm）

构建vue项目

1. 首先创建一个自己的工作空间的文件夹，然后在这个文件夹下进入cmd命令控制台，在控制台执行命令vue init webpack vue，最后那个vue就是项目名称，使用vue3的命令和这个不一样，具体的请参考官方文档。
   

之后有几个需要配置的选项，前面几个是名称，可以使用默认，后面的是否安装包，可以都选y自动安装，也可以自己手动安装，我这里就都默认让它自动安装了。后来发现如果ES默认都安装，使用Element的代码会有问题，不能加分号，为了更方便的使用Element，所以ES就不安装了，其他的都默认安装。

如果要自己手动安装的话，需要cd进入到项目目录下，然后执行下面的命令
npm install vue-router --save-dev 安装vue-router（建议安装！）
这样安装之后，项目中不会自动生成router文件夹和路由文件，需要自己创建
npm install 安装依赖(必须！)

这个过程有些缓慢，中间也有可能会失败，多试几次就好了。

安装完成之后，进入我们的项目文件夹，用cd命令，我这里是cd vue，然后执行命令npm run dev，执行成功如下图所示，可以进入网址看到我们的运行结果。

在idea中打开Vue项目

按照刚才的过程完成创建后，为了更好的编码可以在idea中打开，直接Open我们项目的文件夹就可以了。打开之后的效果如下：

还有其他的运行方式，在package.json文件上右键，选择Show npm script，在弹出的框中，双击dev或者start都可以启动项目。

捋一捋关系

这个地方我也蒙了一段时间，最开始学习的时候就有点蒙，我们在这里捋一捋。
首先我们先来看一下结构：

我不是专业的前端，可能有些地方说的不专业也不准确，我就按照我的理解来说。

1. index.html

首先这是一个单页面应用，我们可以看到只有一个html文件就是index.html，为了不混淆，我这里把div中的id的值变成了sb，我们现在来看一下：

看起来这就是一个很简单正常的html页面，那它是如何显示成我们运行之后的那个样子的呢？

问题就是id=“sb”这里，这个sb是绑定到哪里了呢？

2. main.js
   答案就在main.js中，同样的，我们把el的值修改成sb，这样才能和我们的index.html绑定，我们可以让index.html中div的id值和main.js中的el值不同，你就会发现我们运行之后的页面消失了，说明这两个的确是进行绑定的。

我们接着来看main.js文件，先不管ES6的其他代码，我们可以看到router、comonents、和template，相必大家应该已经知道vue是组件开发，这里的components: { App }中的APP就是一个组件，然后我们在这个Vue对象中，也自己定义了一个组件，就是template: '<App/>',<App/>的意思就是显示出来App组件，<App/>其实就相当于<div/>这样的标签，我们自己定义的模板都可以写成这个样子。所以呢，我们的index.html页面中可以显示，是因为这里和html页面中的div绑定，把App组件显示了出来。router就是路由了。

3. App.vue
   接下来我们再来分析App组件，它就是我们的App.vue文件，位置在src文件夹下。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-5pjEBJwa-1635129689108)(D:\work\笔记\Java学习\项目学习\Vue+SpringBoot图书管理系统\img\原始App.vue代码.jpg)]

export default 是 ES6 的语法，意思是将这个组件整体导出，之后就可以使用 import 导入组件了。我们可以看到div里有一个<router-view/>，这个表示我们路由过来的页面显示在这里，为了能说清这个关系，我们先来看一下router文件夹下的index.js文件，这个文件中配置了我们的路由，用白话说其实就是一个地址对应什么页面，如下图：

我们可以看到，地址’/‘对应的是HelloWorld组件，注意要使用组件的话，需要先import导入。HelloWorld就是一个Vue组件，位置在components文件夹下的HelloWorld.vue文件，我就不再展示了，因为这就是一个前端的页面，显示我们刚才的运行页面。那我们这里可以做一个小实验，我们把path的值改成’/qwe’，我们会发现我们的页面变成了空白，只有地址改成’http://localhost:8080/#/qwe’才能显示。

兜兜转转一大圈，总结一下：我们看到的页面其实是HelloWorld.vue组件和一个图片，HelloWorld显示在App中，main.js与index.html绑定，App通过main.js被显示在index.html中！而我们的组件要显示的话，只需要配置路由，想要在哪里显示，就在哪里写上<router-view/>!

系列文章保存在Vue+SpringBoot学习_1专栏中

学习参考Evan-Nightly的白卷（White Jotter）
具体如下：
学习的作者名：Evan-Nightly
学习的项目名称：白卷（White Jotter）
学习的原文地址：https://gitee.com/Even-zh/White-Jotter#https://blog.youkuaiyun.com/Neuf_Soleil/article/details/88925013

https://learner.blog.youkuaiyun.com/article/details/88925013