JavaWeb项目结构使用Vue项目

JavaWeb 项目的webapp 包下使用 Vue项目结构， webpack 从0构建 Vue 项目。在项目开发的时候，前端的框架大部分会选择Vue项目，而在如今，Vue 一般都是和SpringBoot项目结合做一个前后端分离的项目，前后端都分别各占一个端口，与JavaWeb项目不同的是，JavaWeb项目一般都是一个端口，直接启动后端和前端。大部分的JavaWeb项目的前端一般都是纯 jsp

ItHeiMa小飞机

4579人浏览 · 2022-09-30 22:52:42

ItHeiMa小飞机 · 2022-09-30 22:52:42 发布

提示：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#app
	
src : 项目主要的包，一般程序在这个包下写

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 div
    router,
    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 文件。