JSP写不动了，我果断在JSP中使用Vue

公司有一些庞大的JSP项目，组件库比较匮乏，只有简单的表格、表单、弹窗提示等等。看着Element-UI、Ant-Design-Vue这些让人眼花缭乱的组件库，直流口水。

看着还在找jQuery插件的同事，我产生了一个的想法：直接在JSP里面使用Vue，这样也能使用Vue庞大的组件库。

准备工作

下载相关资源。只需要在 unpkg.com/ 后面输入包名，就能直接跳转到资源文件页面。

需要下载的文件有：

• vue2（考虑兼容性问题）
• httpVueLoader
• element-ui（js和css）

HTML文件编写

1. 引用相关资源

<link rel="stylesheet" href="./static/element-ui.css" />
<script type="text/javascript" src="./static/vue.js"></script>
<script type="text/javascript" src="./static/element-ui.js"></script>
<script type="text/javascript" src="./static/httpVueLoader.js"></script>

1. 初始化Vue，用页面上的DOM作为Vue的根节点

<div id="first-vue">
  <hello-world></hello-world>
</div>
<script>
  var app1 = new Vue({
    el: "#first-vue",
    components: {
      HelloWorld: httpVueLoader("./src/HelloWorld.vue"),
    },
  });
</script>

我们引用了httpVueLoader，因此可以直接使用。该方法接收一个路径的参数，可以将Vue文件解析成组件对象。如此，我们就可以在HelloWorld.vue中按照Vue的方式写业务逻辑。

Vue文件编写

<template>
  <div>{{ message }}</div>
</template>

<script>
module.exports = {
  data() {
    return {
      message: '第一个Vue应用，Hello World'
    }
  }
}
</script>

<style></style>

注意我们这里需要使用符合CommonJS模块规范的写法，需要用module.exports的写法，才能被httpVueLoader解析。简单理解就是，这里不存在编译的概念，是直接在页面运行JS，因此不能使用es-modules。

我们也引用了element-ui，可以直接使用其中的组件：

<template>
  <div>
    <h3>步骤条组件测试</h3>
    <el-steps :space="200" :active="1" finish-status="success">
      <el-step title="已完成"></el-step>
      <el-step title="进行中"></el-step>
      <el-step title="步骤 3"></el-step>
    </el-steps>
  </div>
</template>

本地测试方式

使用VSCode的 Live Server 插件。

至此，就完成了Vue在jQuery或者JSP项目中的使用。

其他注意事项

1. JSP、JQuery项目一般都不会走编译，因此我们的代码里尽量避免ES6的写法

2. 如果想用比较新的方法，需要引用polyfill文件

Demo地址：github.com/beat-the-bu…

演示地址：beat-the-buzzer.github.io/vue-in-jsp/…