白板项目（springboot|白板项目（springboot + vue）回盘白板项目（springboot+vue）回盘

简介

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

【白板项目（springboot|白板项目（springboot + vue）回盘】项目出处见：https://github.com/Antabot/Wh...
本文章只作为本人学习springboot + vue的初期项目的记录，方便个人回盘，也供有需要的朋友快速回盘。
vue项目搭建项目创建 vue-cli 创建前端项目，需要自行安装 npm 以及vue-cli的包，安装步骤遇到问题建议参考vue-cli官网
执行命令vue init webpack project-name创建项目，一路回车下去即可
项目启动 npm run start
启动原理补充：

命令解释
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目录内对应文件。
重点文件关系
首页文件：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替换为指定模板