白板项目（springboot + vue）回盘

简介

开始撰写时间：2021年10月24日

项目出处见：https://github.com/Antabot/Wh...
本文章只作为本人学习springboot + vue的初期项目的记录，方便个人回盘，也供有需要的朋友快速回盘。

vue项目搭建

项目创建

vue-cli 创建前端项目，需要自行安装 npm 以及vue-cli的包，安装步骤遇到问题建议参考vue-cli官网
执行命令vue init webpack project-name创建项目，一路回车下去即可

项目启动

npm run start
启动原理补充：

1. 命令解释
   The npm run command lets you define custom scripts in your package.json
   即npm run会执行你定义在package.json内的文件，因此可以在自动生成的package.json文件内看到对应的start对应着

   "scripts": {
    "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
    "start": "npm run dev",
   }

   webpack-dev-server： Use webpack with a development server that provides live reloading. This should be used for development only.
   其实就是了一个express服务，同时会加载指定配置文件build/webpack.dev.conf.js，该文件内再会进一步读取自动生成的config目录内对应文件。

2. 重点文件关系
   首页文件：index.html - 由webpack.config定义
   入口文件：main.js - 由webpack.configconfig定义
   主应用组件：App.vue

即访问index.html时，会加载main.js

# main.js内重点内容
new Vue({
  el: '#app',// 需要挂载到index.html的查询器
  router,// 引入router组件
  components: { App },// 用到的组件
  template: ''// 模板语法，其实就是components目录下单个组件内的内容，详情见:https://cn.vuejs.org/v2/guide/components.html
})
# 该部分内容会将原index.html内#app替换为指定  模板