JSP项目引入Vue.js进行项目开发（工程搭建）

article/2025/11/3 15:32:59

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

最近在做JSP项目，想在项目里引入Vue.js进行前端页面开发，同时加上脚手架Element UI，项目搭建过程遇到一些问题，本博客进行归纳：

官网：Vue.js中文官网

引入vue.js：

<script type="text/javascript" src="${resource}/vuejs/vue.js"></script>

兼容ie，支持ES6，必须引入browser.min.js和polyfill.min.js

<script type="text/javascript" src="${resource}/es6/browser.min.js"></script>
<script type="text/javascript" src="${resource}/es6/polyfill.min.js"></script>

Element ui支持：

<style>@import "${resource}/elementui/lib/theme-chalk/index.css";
</style>

<script type="text/javascript" src="${resource}/elementui/lib/index.js"></script>

new Vue：必须在<script type="text/babel"></script>里，不能使用text/javascript

<script type="text/babel">var vm = new Vue({el: '#app',data:{apprItemData : [],currentPage: 1,  //当前页totalRow: 0, //总页数pageSize: 10 //当前显示条数},computed: {},watch: {},created() {},mounted() {this.loadItemData();},methods: {// 加载事项信息loadItemData () {var pageSize = this.pageSize;var currentPage = this.currentPage;console.log("pageSize:"+pageSize+",currentPage:"+currentPage);//debugger;var geturl = '${root}/config/loadItemData.do?rows='+pageSize + '&page=' + currentPage;$.ajax({type: 'get',url:geturl,contentType: "application/json; charset=utf-8",success: function(data) {//debugger;console.log("totalRow:"+data.total);vm.apprItemData = data.rows;},error: function(e) {console.log("更新数据出现错误：",e);}})}}});
</script>

加个el-table，这个是elementui的组件：

<el-tableref="Table":data="apprItemData":header-cell-style="headClass"@select="handleSelection"row-key="approveItem"height="420"borderdefault-expand-all:tree-props="{children: 'children'}"><el-table-columntype="selection"width="55"></el-table-column><el-table-columnprop="itemCode"label="事项编码"></el-table-column><el-table-columnprop="approveName"label="事项名称"></el-table-column><el-table-columnprop="apprStatusStr"label="配置的环节"color="blue"></el-table-column>
</el-table>