【SpringBoot+Vue】002-创建前端项目、删减默认项目内容

一、创建前端项目

1、说明

创建前端项目我们使用的是Vue项目管理器，需要安装Node并安装Vue环境，可以参考下面的文章

2、创建前端项目

第一步：CMD进入到我们想要存放创建项目的文件夹

第二步：执行vue ui

第三步：系统会跳转到Vue 项目管理器http://localhost:8000/project/select

第四步：在这里我们创建一个新项目sport，配置相关信息

第五步：选择“手动”

第六步：勾选“Babel”、“Router”、“使用配置文件”

（Choose Vue version也被默认勾选了，UP主没提到，我也没去）

第七步：创建项目

第八步：创建项目完成，跳转到项目仪表盘

第九步：安装element插件

第十步：添加相关依赖

第十一步：运行项目

第十二步：启动项目

第十三步：使用VS Code打开我们的项目

（VS Code恰巧之前用过，体积也很小）

第十四步：删减默认项目内容

见：二、删减默认项目内容

二、删减默认项目内容

1、修改App.vue

<template>
<!-- 注意：一个项目中只能有一个id叫做app -->
  <div id="app">
    App 根节点！
  </div>
</template>

<script>

</script>

<style>

</style>

2、删除views下的About和Home页面

3、修改index.js

（因为index.js引入了上面删除的页面，会报错）

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

const routes = [
  
]

const router = new VueRouter({
  routes
})

export default router

4、访问​​http://localhost:8080/#/​​

我们的前端项目框架就搭建好了！下面开始对框架进行填充。