vue3.0+springboot项目搭建（超详细）
前言
一、创建项目
- 直接使用命令行构建项目。首先，新建文件夹（名字可以任意，地方也可以任意），然后打开文件夹在地址栏输入cmd即可直接到命令行界面。在命令行输入 vue create springboot-vue 回车（springboot-vue 为项目名可以任意)
- 这个界面是选择配置，我们直接选择最后一个，按上下键进行选择
- 在这个页面选择以下选项，按空格选中，选完后回车
- 这里是选择vue的版本，我们选择3.x版本，然后回车
- 在这个页面我们选择的是路由方式，选Y就行，回车
- 这里我们选下面的那个，回车
- 这里是问你以上的配置要不要保存，可以保存也可以不保存，我个人为了以后方便使用，选择保存，然后填写保存的名字，回车就可以安装了
- 安装中 看到上面两个提示的时候就说明已经安装好了，在springboot-vue文件夹下就有安装的文件
- 在刚刚的命令行输入上面提示的命令后，有两个链接地址，在浏览器输入 就可以看到我们创建项目的初始页面
二、配置项目
- 首先关掉命令行，然后用idea打开刚刚创建的项目，用vscode也可以。打开后就是如下的页面。
- 然后我们进行一些配置，勾选上 view–>Appearance–>Toolbar 可以将上面的操作栏移到左边 点击 Add Configuration 点击 + 号，然后往下选择npm 设置Scripts 为serve 这样点击绿色小箭头就可以直接运行项目
- 现在的项目运行是不会自动跳出来浏览器的，我们可以进行一些设置。在package.json文件下scripts中，加上–open就可以了
三、文件分析
src文件夹下有assets、components、router、store、views、App.vue、main.js文件，assets是用来存放图片的，components是用来写组件的，router存放的是路由，store是保存一些信息配置，views是存放页面，App.vue是根组件，main.js是入口。
四、编写项目
- 现在的这个页面是不适合我们使用的，我们先进行一些不必要的删除。只留下这些
- 然后删除components下的HelloWorld.vue组件
- views文件夹下的Home.vue中这些也是不需要的 我们只留下这些 到此我们就可以写自己的项目了
五、springboot的搭建
- 打开链接：
- 左边的参数默认推荐就好，下面的java选择 8
- 点击右边的ADD DEPENDENCIES，添加依赖
- 最后点击最下面的generating下载
- 下载完成后在idea中右击项目，选择new–>Module，选择Maven项目，然后next
- 这一步给项目取个名字，然后点击finish
- 现在就创建了一个springboot工程，我们将springboot下的src文件和pom.xml删除，替换为刚刚下载的压缩包里的src和pom.xml
- 因为我们的项目是springboot和vue，我们可以新建一个vue文件夹，将vue相关的放进去，使结构更清晰，这个步骤要先将工程停止
- 我们更换一下快捷启动键
- 在application.properties中进行设置，红色框框出来的是你新建数据库的名称，用户名和密码是你自己数据库的用户名和密码
- 然后我们在idea中选择DemoApplication启动，会给你一个端口，如下所示
- 在浏览器输入http://localhost:9090/ 出现以下画面说明配置成功 以上就是vue3.0+springboot的搭建
