背景：

juery是一个广泛使用的JavaScript库，用于简化DOM操作、事件处理、动画效果等常见任务。

Vue是一个现代化的JavaScript框架，专注于构建可复用的组件和实现响应式数据绑定。在开发jQuery项目时，我们常常需要在JavaScript代码中处理大量的DOM操作，这给维护和更新带来了不少麻烦。而Vue提供了更加优秀的组件化和响应式数据绑定机制，为解决这些问题提供了一种全新的思路。

//以jQuery为例

$(function() {

//获取页面元素和绑定事件

var $button = $('#my-button');

$button.on('click', function() {

var $content = $('#my-content');

$content.slideToggle();

});

});

//使用Vue重构代码

Vue.component('my-component', {

template: '#my-template',

data: function() {

return {

showContent: false

};

},

methods: {

toggleContent: function() {

this.showContent = !this.showContent;

}

}

});

//HTML代码

将原本使用jQuery实现的交互效果重构为Vue组件，并使用Vue提供的指令和模板语法来实现显示和隐藏内容的效果。可以看到，Vue组件的代码结构更加清晰和易于维护，将DOM操作以及事件处理逻辑封装在了组件中，使得整个应用的代码结构变得更加清晰和易于维护。

除了简化DOM操作和提供更加优秀的组件化机制之外，Vue还提供了一些其他的特性，如响应式数据绑定、模板渲染、路由管理等，这些特性使得Vue在构建大型、复杂的Web应用时也可以发挥其优秀的表现。

总之，Vue和jQuery在Web开发中都有自己的优点和适用场景。当我们在开发jQuery项目时，如果发现DOM操作逻辑过于复杂、JS代码结构混乱、维护成本较高等问题，可以考虑使用Vue来优化或者重构代码。而如果业务逻辑相对简单，DOM操作较为简单，或者项目已经成型，引入Vue反而会增加开发和维护成本，那么还是继续使用jQuery更为合适。

参考：https://www.yzktw.com.cn/post/1244916.html

同时引入vue, Elementui

记引入elementui的前提是引入vue,引入vue就得有挂载 所以vue的基本“样子”得有,需要new Vue（）

1.老项目指只有jquery， html，css，js ，freemarker 等的原始项目。

2.引入ElementUI步骤：

a. 进入elementUI官网 CDN处

下载 element-ui.js 和 element-ui.css 以及 字体库 有2个(icon主要是UI库中的一些小图标)

3.进入Vue 官网 下载 vue.js

Vue.js 最新官方下载地址与项目导入_vue.js下载_Lan.W的博客-CSDN博客

4.本地引入 （可以引用本地下载好的文件）

字体库路径特别注意与css文件同文件夹 fonts下面

5.使用 new Vue({}) 创建Vue实例开始使用。

6.可以使用mixins 。

补充：

jq中如何调用vue中的方法来

vue: var app = new Vue({     el:'#main',     data:{},     method:{         fn:function(){         } }    jq: $('#main').click(function(){     app.fn();

VUE与jquery方法相互调用

拿起html的时候，在数据处理上，疯狂怀念数据双向绑定，vue又成了我的必选项，但是有些业务场景其实并不适用vue，所以最终技术选型为vue+jquery混合使用，结合两边的优点，大大提高开发效率。

vue和jquery同时引入的时候，jquery操作一定要放在vue后面，要等DOM渲染完成，jquery才能进行DOM事件操作。

那么vue+jquery应该如何使用呢？

一、首先引入vue文件（cdn或者下载到本地都行），参考vue官方连接 https://cn.vuejs.org/v2/guide/installation.html 二、创建一个vue实例，因为每个vue应用都是通过创建一个vue实例开始的

var vm = new Vue({

      el:'#app',  //实例化对象

      data:{　　         

          wordCardStyles:[]  

          //要存放的数据   

      },     

      methods:{  

          //存放实例方法    

      } 

})

三、vue和jquery之间互相调用 例如现在用jq写了一个方法，从后台获取数据，并且把获取到的数据要赋值给vue对象里的子对象

function getStyleSheetInfo(){

    $.ajax({

        type: 'post',

        dataType: 'json',

        url: serverUrl + 'api/styleSheet/findStyleSheetPage',

        data: {

            pageNumber:1,

            pageSize:99,

            styleType:'582941287137673216'

        },

        success: function (result) {

            if (result.code == '0000') {

                vm.wordCardStyles = result.data.list //这里的vm就是代表上面的实例，wordCardStyles是vm实例里面的一个对象，然后把请求结果赋值给这里对象

            }

        }

    })

}

那么vm实例里面如何调用外部的jq方法呢？

直接把方法写在vm的方法里调用即可

var vm = new Vue({

  el:'#app',  //实例化对象

  data:{

      wordCardStyles:[]  //要存放的数据  

    },

    methods:{

        //存放实例方法 

      changeModel(event){

        console.log(event)

        getMainTabelData() //外部的jq方法

        },

    }

})

原文链接：https://blog.csdn.net/qq_34514388/article/details/117717300

总结：

公司旧项目，新增的模块页面，都是在index.html页面，用