提示: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 文件。
最后一步: 启动Tomcat 启动JavaWeb项目,会直接在页面呈现你书写的Vue项目内容 (“ 你好, 中国” )
总结
Vue 的特色路由,组件我这里没有写上, 而剩下的就当然交给你们去发挥实力了。