重慶分公司
重慶分公司，新征程啟航
為企業(yè)提供網(wǎng)站建設、域名注冊、服務器等服務
集成vue到jquery/bootstrap項目的方法
說明，項目本身使用jquery和bootstrap做的管理后臺，部分登錄接口跑在node服務端，大部分接口使用springmvc實現(xiàn)。現(xiàn)在，使用vue開發(fā)，集成vue到原先的項目中。不影響原先的框架。原來的打包方式是使用fis打包，集成vue之后，先用webpack打包，再用fis打包。互不影響。
公司主營業(yè)務：成都網(wǎng)站設計、成都網(wǎng)站制作、移動網(wǎng)站開發(fā)等業(yè)務。幫助企業(yè)客戶真正實現(xiàn)互聯(lián)網(wǎng)宣傳，提高企業(yè)的競爭能力。創(chuàng)新互聯(lián)是一支青春激揚、勤奮敬業(yè)、活力青春激揚、勤奮敬業(yè)、活力澎湃、和諧高效的團隊。公司秉承以“開放、自由、嚴謹、自律”為核心的企業(yè)文化，感謝他們對我們的高要求，感謝他們從不同領域給我們帶來的挑戰(zhàn)，讓我們激情的團隊有機會用頭腦與智慧不斷的給客戶帶來驚喜。創(chuàng)新互聯(lián)推出白朗免費做網(wǎng)站回饋大家。
1、由于原先使用jquery和bootstrap，所以package.json文件夾下面沒有數(shù)據(jù)。使用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索引這些文件，會很卡。
這里已經(jīng)exclude了所以顯示not exclude
.gitignore文件添加：
接下來就是進入到package.json所在目錄運行npm install，安裝所有依賴項。
2、新建webpack.config.js文件（webpack打包使用），文件內(nèi)容如下：
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的，現(xiàn)在我們?nèi)匀贿@么做。
如下所示
其中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
6、 萬事俱備，只欠······webpack打包,在webpack.config.js目錄，使用webpack webpack.config.js命令，打包后會生成一個rechargeOrder-bundle.js文件。就像之前引用js文件一樣，只不過現(xiàn)在引用的是webpack打包后的使用vue編寫的經(jīng)過webpack處理的瀏覽器能識別的js。
7、 原先的項目使用fis打包，現(xiàn)在還是用fis打包，沒有任何影響。
以上這篇集成vue到jquery/bootstrap項目的方法就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持創(chuàng)新互聯(lián)。
當前標題：集成vue到jquery/bootstrap項目的方法
鏈接分享：http://www.xueling.net.cn/article/pigpsd.html