JSP中如何引用Vue组件

Nike丶超哥哥

已于 2022-09-27 16:28:44 修改

阅读量9.3k

点赞数 8

文章标签： vue.js jsp vue

于 2021-02-23 11:11:25 首次发布

本文链接：https://blog.csdn.net/weixin_42080056/article/details/113971807

版权

相信很多小伙伴都有接触过一些政府、国企、或者一些老的项目，而往往这些老项目不会重构，Vue是14年正式推出的，而那些老项目都是基于JQ、JS写的一些项目，其实在很久以前大部分公司都没有前端这个职位，前端在七八年前不叫web前端开发工程师，他叫美工。什么是个美工，你不需要些JS，你会HTML排版，会切图就行，这就是当时的前端，那有小伙伴会问，浏览器端展示的页面效果是怎么实现的，难倒不是前端吗？其实大部分都是后端实现的，那个年代的后端，多多少少都会点前端的东西，不像现在，近几年各种框架泛滥成灾，通过面试就可以看出，虽然他们公司不用这些东西，但往往面试都是问道。现在的前端不是在学习，就是在学习的路上，当前版本还没学完，下个版本就发布了，这就是前端，哈哈哈。以至于现在看到的一些老项目，大多都是JSP构建的。

说实话写Vue如果不把Vue组件化不把Vue单独拎出来写，我都觉着你写的不是Vue，说白了你只是用了Vue的框架而已，并没有实际的从灵魂深处去挖掘，就好比有的人喜欢在Vue中引个JQ，用JQ写逻辑。那么问题来了，你是来拉屎的吧？

这段时间一直接触国企的老项目，这些项目大多都是JSP构建的，自己也有尝试用Vue全家桶去从新构建，但事实并不是你想的那么简单。恰好这些公司的leader以及主管都是元老级别的，他们也想用新框架，但是招进来的前端，在我看来都是不合格的，会写Vue吗？会React吗？会angular吗？会、会、会、确实会，但是你会站在项目的角度去考虑你使用的框架吗？No。一般像这种老项目他们不会自己去整改一些东西，都是原有的照猫画虎。而我是站在架构的角度上去考虑一些问题，所以引发了JSP中引入Vue，真正的去用Vue来构建一些老的JSP。

废话不多说了直接切入正题：

首先Vue的原型肯定是要写在根JSP中的，这点是毋庸置疑的，但如何组件化，如果把一个真正的.Vue格式的文件引入JSP。其实用Vue-cli构建过项目的小伙伴大多都看过 package.json这个文件，包括webpack的一切配置项，其中有一项就是vue-loader，这个东西是干啥试的，其实他就是个中间件，就是个桥梁，在JSP中引入Vue这是必不可少的一项，也是最重要的核心，从网上找个稳定点的版本，引入到项目中，在基始的JSP文件中引入，即可，还有最重要的一点，一定要use不然是无法使用的。

Vue.use(httpVueLoader);

接着就是components了，我们在使用vue-cli构建项目的时候，往往通过import 引入组件，告诉你个坏消息，在JSP中不行，不行，不行，那我们应该如何引入？看code

            components:{
				'layer': 'url:./common/layer.vue',
                'son': 'url:./son.vue',
			},

像之前写component的时候往往注入组件名就可以直接使用了，但在这里必须要这样写。不然你压根找不到你的组件，你可以通过import引入一些其他文件，但是vue就不用去尝试了，这里需要注意的是，components中的key一定不能出现大写字母。

html中还是和往常一样，正常写刚刚注册好的组件名就OK了，包括父子组件之间的交互什么的都可以正常使用了。

或许有的小伙伴想问，那我们能使用VueX吗？当然可以，但是我不建议在JSP项目中使用VueX，像平常写一些公共的方法什么的，你可以写成组件，或者直接挂在的Vue原型上都很OK。例如：

Vue.prototype.$GETTIME=function getDuration(my_time) {  
		  var days    = my_time / 1000 / 60 / 60 / 24;
		  var daysRound = Math.floor(days);
		  var hours = my_time / 1000 / 60 / 60 - (24 * daysRound);
		  var hoursRound = Math.floor(hours);
		  var minutes = my_time / 1000 / 60 - (24 * 60 * daysRound) - (60 * hoursRound);
		  var minutesRound = Math.floor(minutes);
		  var seconds = my_time / 1000 - (24 * 60 * 60 * daysRound) - (60 * 60 * hoursRound) - (60 * minutesRound);
		  // console.log('转换时间:', daysRound + '天', hoursRound + '时', minutesRound + '分', seconds + '秒');
		  var time = hoursRound + ':' + minutesRound + ':' + seconds
		  return daysRound*24+hoursRound;
}

这是一个处理时间的方法，因为很多组件都会用，而此时只需挂在到原型上，此原型下所有的组件都可以使用了。

看到这里其实你就可以正常使用了，以下我说点需要注意的地方，大牛可直接绕路：

首先在JSP中解决加载Vue出现白屏闪屏的问题，需要在根HTML加v-vlock指令，其次在style中设置该指令的样式为display:none

<style>
    [v-cloak] {
		display: none !important;
	}
</style>
<body>
    <div id="parent" v-cloak>
    </div>
</body>

补充一点：

以往写.vue文件的时候script标签中抛出组件的方法是export default，但在JSP中，此方法不可用，需用module.exports代替原有的export default；

<script>
    module.exports = {
        name:'yykj',
        data(){
            return{
                yykj:'http://yykj.huijik.com'
            }
        }
    }
</script>

说到这里你就可以放心大胆的去用了，如果你不愿意看长篇大论，还是老样子，一顿复制一顿粘贴就可以继续了。

各位小伙伴和童鞋有不明白的或者不会的依然可以留言...

依旧老样子，不喜勿喷，写给需要的人看，渣*请自觉绕道。

插播一条广告：

本公司自营项目：

微信电商小程序（拼团、砍价、会员、积分、限时秒杀、分销、直播等诸多功能）；

刷脸支付（招商加盟，代理加盟，一站式源码部署）；

另：接各种开发项目，PC、移动、webApp、小程序、App、M站等；

如果有需要请打开http://yykj.huijik.com进行留言，（进入页面下拉到最底端即可留言）

Nike丶超哥哥

关注

8
点赞
踩
46

收藏

觉得还不错? 一键收藏
19
评论
JSP中如何引用Vue组件

相信很多小伙伴都有接触过一些政府、国企、或者一些老的项目，而往往这些老项目不会重构，Vue是14年正式推出的，而那些老项目都是基于JQ、JS写的一些项目，其实在很久以前大部分公司都没有前端这个职位，前端在七八年前不叫web前端开发工程师，他叫美工。什么是个美工，你不需要些JS，你会HTML排版，会切图就行，这就是当时的前端，那有小伙伴会问，浏览器端展示的页面效果是怎么实现的，难倒不是前端吗？其实大部分都是后端实现的，那个年代的后端，多多少少都会点前端的东西，不像现在，近几年各种框架泛滥成灾，通过面试就可以看
复制链接

扫一扫