集成vue到jquery/bootstrap项目的方法

test: /.(png|jpe?g|gif|svg)(?S*)?$/,
loader: 'file-loader',
query: {
name: '[name].[ext]?[hash]'
}
}
] },
resolve: {
alias: {
'vue': 'vue/dist/vue.js'
}
},
};

说明：以上是表示将rechargeOrder.js文件打包成rechargeOrder-bundle.js文件，使用vue等loader（具体知识请看webpack）

3、原先jquery的是是在html中引入js的，现在我们仍然这么做。

如下所示

其中bundle.js是webpack打包之后的文件，并不是源文件

4、 写一个rechargeOrder.js文件，引用vue，代码如下：

import Vue from 'vue'
 new Vue({
 el: "#secondFram",
 data: {
 userId:""
 },
 components: {},
 filters: {},
 beforeMount:function () {
 },
 methods: {
 buttonClick1() {
 this.getOrders()
 }
 },
 computed: {
 }
 });

其中secondFram是在html中的一个id为secondFram的div

5、 在html中写一个button<button type=”primary” style=”margin-right: 10px;float: right” @click=”buttonClick1″>查询</button>

6、 万事俱备，只欠······webpack打包,在webpack.config.js目录，使用webpack webpack.config.js命令，打包后会生成一个rechargeOrder-bundle.js文件。就像之前引用js文件一样，只不过现在引用的是webpack打包后的使用vue编写的经过webpack处理的浏览器能识别的js。

7、 原先的项目使用fis打包，现在还是用fis打包，没有任何影响。

以上这篇集成vue到jquery/bootstrap项目的方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持软件开发网。