說明，項目本身使用jquery和bootstrap做的管理后臺，部分登錄接口跑在node服務端，大部分接口使用springmvc實現。現在，使用vue開發，集成vue到原先的項目中。不影響原先的框架。原來的打包方式是使用fis打包，集成vue之后，先用webpack打包，再用fis打包。互不影響。
1、由于原先使用jquery和bootstrap，所以package.json文件夾下面沒有數據。使用vue的時候，需要的依賴全部放到package.json下，添加如下依賴：
{ "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" }}說明：原先使用jquery的時候，使用的supervisor 來進行熱加載。這些依賴安裝后會在本地node_modules目下，建議添加下gitIgnore和exclude該文件夾。前者是為了防止git提交代碼的時候把這些lib提交上去后者是為了防止IDE使用index索引這些文件，會很卡。
這里已經exclude了所以顯示not exclude
.gitignore文件添加：
接下來就是進入到package.json所在目錄運行npm install，安裝所有依賴項。
2、新建webpack.config.js文件（webpack打包使用），文件內容如下：
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)(/?/S*)?$/, loader: 'file-loader' }, { 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項目的方法就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持武林網。
新聞熱點
疑難解答
