WEB入门总结（一）创建项目

最新推荐文章于 2025-08-08 16:05:41 发布

原创最新推荐文章于 2025-08-08 16:05:41 发布 · 554 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#web

WEB项目专栏收录该内容

4 篇文章

订阅专栏

从2月至6月，博主分享了四个月间断断续续学习WEB开发的心得，包括开发环境搭建、项目创建、前后端环境整合及外部tomcat部署全过程。前端采用Vue+ElementUI，后端为SpringBoot，数据库选用Mysql8。

胡乱一些话

~~我在看视频的时候，突如其来，想写一篇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.youkuaiyun.com/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.youkuaiyun.com/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 配置”：