WEB入门总结（一）创建项目
胡乱一些话
我在看视频的时候，突如其来，想写一篇WEB总结，所以就放下手头的东西， 趁着我脑袋里的东西还热乎时，看看能不能挤出一点“精华”来。
从2月到6月，整整四个月，虽然学习WEB的过程是断断续续的，但学习它的痛苦却是一直持续着。 百感交集，废话少说，我从创建项目（搭建环境略）开始。不过因为一开始也没有要记笔记的意识，所以可能久远的东西也记得不大清楚。
万事找度娘。
小白一枚，如果有什么地方不对欢迎指出来！期待与大家共同学习一起进步嘻嘻！
一、开发环境
开发工具：IntelliJ IDEA2019
前端：VUE+Element UI
后端：Spring Boot
数据库：Mysql 8（MySQL workbench）
服务器：Tomcat 9
其他：Jdk 8、node.js、vue cli
二、创建项目
1.创建project
1）IDEA创建项目
上图的war包是为了之后部署到外部tomcat用的。
2）import maven [install]
详情指路去maven篇：
https://blog.csdn.net/PLCET/article/details/106960898
3）添加index.html
在src\main\resources\static下添加index.html
<!DOCTYPE html>
<html lang=en>
<head>
<meta charset=utf-8>
<title>front</title>
</head>
<body>
<h1>Hello world!</h1>
</body>
</html>
4）启动springboot服务器
打开浏览器，输入http://127.0.0.1:8080/，显示
2.搭建前端开发环境
1）创建vue项目
（1）创建前端项目front
在idea下找到终端Terminal，并在项目目录下输入：
vue create front
选中vue路由（Router）和vue状态管理方案（Vuex）。
（2）执行前端项目
cd front
npm run serve
cd是命令提示符，切换目录的命令。
常用的还有：
- 键盘 ↑ 可以使用历史命令，超级方便。
- ctrl+c 可以终止终端的操作。
不用像我以前一样傻傻的关闭重开关闭重开。
想详细了解cmd命令的可以看看这篇：“cmd常用命令”：
https://blog.csdn.net/fly_fly_fly_pig/article/details/82592428
点击Local链接或者在浏览器输入http://localhost:8080/, 如显示如下内容，则vue 脚手架搭建成功。
2）安装Element UI
（1）安装Element UI
记得要在front目录下：
npm i element-ui -S
（2）添加 Element plugin
vue add element
（3）执行前端项目
npm run serve
点击Local链接或者在浏览器输入http://localhost:8080/, 如显示el-button，则安装成功。
3.合并前后端开发环境
1）配置前端输出目录
在front目录下，即与package.json同一级目录下，新建配置文件vue.config.js。
// vue.config.js
module.exports = {
// 设置相对路径
publicPath: './',
// 输出文件目录
outputDir: '../src/main/resources/static',
// eslint-loader 是否在保存的时候检查
lintOnSave: true,
//生产环境是否生成 sourceMap 文件
productionSourceMap: false,
devServer: {
port: 8080
}
};
详细的配置可以看这“vue.config.js 配置”：
https://www.jianshu.com/p/b358a91bdf2d
2）打包前端文件
打开终端“Terminal”，在front目录下输入：
npm run build
将前端项目打包输出到了springboot根目录下。
打包后：
3）修改服务器端口
（1）前端：端口8085
端口号默认8080，但易被占用，图省事，我习惯性会修改端口号。
（2）springboot服务器：端口8086
在springboot配置文件内修改：
4.外部tomcat war部署
详情指路去外部tomcat篇：（待补充）
上一篇： Spring Bean生命周期
推荐阅读
-
Eclipse下怎么创建Web项目?用Maven创建Web项目的教程
-
Web应用Django入门(建立虚拟环境以及创建项目)
-
新版本IntelliJ IDEA 构建maven,并用Maven创建一个web项目(图文教程)
-
详解用Eclipse如何创建Web项目
-
C＃Web应用程序入门经典学习笔记之一
-
java在线运行工具（教你创建一个普通的 Java 项目）
-
Spring boot 入门（一）：快速搭建Spring boot项目
-
创建Web项目的Docker镜像实例讲解
-
用Eclipse搭建Android开发环境并创建第一个Android项目（eclipse+android sdk）
-
学习WEB标准总结的一些CSS/XHTML知识小结第1/3页