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

{
 "name": "node",
 "version": "0.0.1",
 "private": true,
 "scripts": {
 "start": "supervisor start.js"
 },
 "dependencies": {
 "babel-core": "^6.0.0",
 "babel-loader": "^6.0.0",
 "babel-preset-es2015": "^6.13.2",
 "cross-env": "^1.0.6",
 "css-loader": "^0.23.1",
 "file-loader": "^0.8.5",
 "style-loader": "^0.13.1",
 "vue": "^2.1.6",
 "vue-hot-reload-api": "^2.1.0",
 "vue-loader": "^9.8.0",
 "vuerify": "^0.4.0",
 "webpack": "beta",
 "webpack-dev-server": "beta"
 },
 "devDependencies": {
 "babel-plugin-component": "^0.9.1"
 }
}

module.exports = {
 entry: './project/ebook-manage/resources/node-ebook-manage/js/console/content/rechargeOrder.js',
 output: {
 filename: './project/ebook-manage/resources/node-ebook-manage/js/console/dist/rechargeOrder-bundle.js'
 },
 module: {
 loaders:[
 {
 test: /\.vue$/,
 loader: 'vue-loader'
 },
 {
 test: /\.js$/,
 loader: 'babel-loader',
 exclude: /node_modules/
 },
 {
 test: /\.css$/,
 loader: 'style-loader!css-loader'
 },
 {
 test: /\.(eot|svg|ttf|woff|woff2)(\"color: #ff0000">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项目的方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持。