JavaWeb项目结构使用Vue项目

article/2025/11/6 1:14:00

提示：javaweb项目中引用Vue项目的案例

文章目录

前言
一、JavaWeb项目结构
- 项目启动顺序
二、Vue项目结构
- Vue结构粗略解释
- 思考
三、使用Vue
- 1、使用vue.js, 在html引用
- 2、使用webpack 构建Vue脚手架
- - - 第一步：到webapp包下，输入命令 npm init -y
    - 第二步：继续在控制台输入命令 npm i
    - 第三步：在webapp 下分别创建 index.html(只留一个html在根目录就好)、 App.vue 、 main.js 、 webpack.config.js
    - 第四步：配置对应的文件
    - - webpack.config.js
      - main.js
      - index.html
      - App.vue
    - 第五步：控制台输入命令 npm run serve
    - 最后一步：启动Tomcat 启动JavaWeb项目，会直接在页面呈现你书写的Vue项目内容 (“ 你好，中国” )
总结

前言

在项目开发的时候，前端的框架大部分会选择Vue项目，而在如今，Vue 和SpringBoot项目结合做一个前后端分离的项目比较常见，前后端都分别各占一个端口，与JavaWeb项目不同的是，JavaWeb项目一般都是一个端口，直接启动后端和前端。大部分的JavaWeb项目的前端一般都是纯 jsp 或者纯 html ，这让主写后端的犯了难“ 我写个后端还要去学一大堆的前端的知识吗？” ，确实这样会很麻烦，但是 Vue + element-UI 的结合会使前端项目简单的快速搭建起来，所以这一篇博客就聊聊JavaWeb项目如何使用Vue项目。

提示：以下是本篇文章正文内容，下面案例可供参考

一、JavaWeb项目结构

一个干净初始化的JavaWeb项目的结构如下
在这里插入图片描述

项目启动顺序

项目在启动的时候会像编程题一样从上到下的扫描启动，扫描结束后，会在webapp根目录下找到一个主页面(index.js) 入口，然后展示在浏览器上。
在这里插入图片描述
最后根目录下的唯一一个入口页面index.js，浏览器也默认打开这个页面

二、Vue项目结构

一个由Vue脚手架创建的Vue项目结构如下

在这里插入图片描述

Vue结构粗略解释

node_modules ： 存放npm命令下载的开发环境生产环境的依赖包public：  静态资源，一般不会去修改什么这个文件下有一个index.html,这个是Vue项目的主页面，Vue项目要挂载，在main.js挂载的app，就是这个index.html的div#appsrc : 项目主要的包，一般程序在这个包下写assets ： css文件存放的包components：  存放Vue组件的包, 根据自己的需求写的组件一般放在这个包下，组件是复用的router ： Vue 路由， 一般只有一个index.js文件，都是自己创建（命名不限），主要是配置Vue路由的配置文件views： 存放视图的包，分不同的需求创建不同的视图界面App.vue： 主组件入口，会在main.js文件有配置main.js： Vue 项目的整个配置一般都在main.js文件引入，比如引入vue-router,package-lock.json: 包括了node_modules中所有包的信息，包含包的名称，版本号，下载地址package.json : 下载的依赖和插件都会在这个文件更新（只能锁定大版本，不能锁定小版本），和pom.xml差不多

思考

在启动Vue项目的时候，会给一个8080的端口号，然后这种情况和JavaWeb项目无法构建在一起，直接把整个Vue项目放在webapp下那肯定也不行。那如何做？看下文

三、使用Vue

1、使用vue.js, 在html引用

在这里插入图片描述


// index.html 的内容
<body>
<div id="app">{{ msg }}
</div>
<script>new Vue({el: '#app',data() {return {msg: "中国你好",}}})
</script>
<script src="./js/vue.js"></script>
</body>

这种方法需要引用vue.js, 需要挂载，对于我来说，而我想在JavaWeb项目直接书写Vue项目一样。

2、使用webpack 构建Vue脚手架

第一步：到webapp包下，输入命令 npm init -y

初始化项目，之后会生成 package.json 这个文件，然后再在webapp下创建 dist 这个包
在这里插入图片描述

//  将这些复制到   package.json 文件里，"dependencies": {"axios": "^0.22.0","element-ui": "^2.15.6","vue": "^2.6.14","vue-router": "^3.5.2"},"devDependencies": {"@babel/core": "^7.15.5","@babel/preset-env": "^7.15.6","babel-loader": "^8.2.2","css-loader": "^6.3.0","sass": "^1.42.1","sass-loader": "^12.1.0","style-loader": "^3.3.0","vue-loader": "^15.9.8","vue-template-compiler": "^2.6.14","webpack": "^5.56.0","webpack-cli": "^4.8.0"},"scripts": {"test": "echo \"Error: no test specified\" && exit 1","serve": "webpack --mode=development --watch","build": "webpack --mode=production"},

第二步：继续在控制台输入命令 npm i

下载依赖，也就是下载 package.json 文件里刚刚粘贴的依赖

第三步：在webapp 下分别创建 index.html(只留一个html在根目录就好)、 App.vue 、 main.js 、 webpack.config.js

创建四个文件之后，接下来就是配置了。

第四步：配置对应的文件

webpack.config.js

// 可以直接复制（跟着我的步骤，没有更改其他的）
const path = require('path')
const { VueLoaderPlugin } = require('vue-loader')// 设置入口和出口
module.exports = {entry: './main.js',    // 入口文件output: {     // 出口文件path: path.resolve(__dirname, 'dist'),    // 打包的文件路径filename: 'bundle.js',    //  打包的文件名},// 文件转换，模块的打包规则module: {rules: [{ test: /\.vue$/, use: 'vue-loader'},{ test: /\.s[ca]ss$/, use: [ 'style-loader, css-loader, scss-loader' ] },{ test: /\.m?js$/, use: {loader: 'babel-loader',   // 这个插件会将js 的新语法转换成老语法，进行json转换options: {presets: [ '@babel/preset-env' ],},},},//  处理图片的配置， 老语法// { test: /\.(png|jpe?g|gif|svg|webp)$/, use: { loader: 'file-loader', options: { esModule: false } } },// 新语法{ test: /\.(png|jpe?g|gif|svg|webp)$/, type: 'asset/resource'},],},// 插件的位置, plugins是一个数组， 配置插件plugins: [
// new 一个插件实例new VueLoaderPlugin(),],
}

main.js

// 使用 js 文件的入口配置 js 文件
// 引入Vue
import Vue from 'vue'
// 引入创建的App.vue, 记得加  .vue
import App from './App.vue'
// 引用router，这句先注释掉
// import router from './router'     // 这个router接受的是router/index.js导出的router实例对象new Vue({el: '#app',             // 挂载的 app 是在index.html的app divrouter,render: h => h(App),    // 渲染, 将App.vue写的内容替换index.html里面的内容，这样index.html就相当于一个容器，书写在App.vue里
})

index.html


// 只需要引入这两句,而这个div 的 id-app, 就是main.js 挂载上的app 
<body><div id="app"></div><script src="./dist/bundle.js"></script>
</body>

App.vue

// 只需要放一个  <router-view></router-view>  标签即可
<template>
<div><h1> 你好，中国 </h1><router-view></router-view>
</div>
</template>

第五步：控制台输入命令 npm run serve

这一步会在 dist 包下生成一个 bundle.js 文件，而且命令需要 Ctrl + c 才能够停止，因为命令会监听页面的修改在浏览器异步更新。
运行机制：
dist 包下的bundle.js 里的内容是webpack打包main.js 的内容编译后得到的 js 文件，而index.html 引入的也是这个 bundle.js 文件。