集成vue到j(luò)query/bootstrap項(xiàng)目的方法
說明,項(xiàng)目本身使用jquery和bootstrap做的管理后臺,部分登錄接口跑在node服務(wù)端,大部分接口使用springmvc實(shí)現(xiàn)?,F(xiàn)在,使用vue開發(fā),集成vue到原先的項(xiàng)目中。不影響原先的框架。原來的打包方式是使用fis打包,集成vue之后,先用webpack打包,再用fis打包?;ゲ挥绊?。
1、由于原先使用jquery和bootstrap,所以package.json文件夾下面沒有數(shù)據(jù)。使用vue的時(shí)候,需要的依賴全部放到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的時(shí)候,使用的supervisor 來進(jìn)行熱加載。這些依賴安裝后會(huì)在本地node_modules目下,建議添加下gitIgnore和exclude該文件夾。前者是為了防止git提交代碼的時(shí)候把這些lib提交上去后者是為了防止IDE使用index索引這些文件,會(huì)很卡。
這里已經(jīng)exclude了所以顯示not exclude
.gitignore文件添加:
接下來就是進(jìn)入到package.json所在目錄運(yùn)行npm install,安裝所有依賴項(xiàng)。
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、 寫一個(gè)rechargeOrder.js文件,引用vue,代碼如下:
import Vue from 'vue' new Vue({ el: "#secondFram", data: { userId:"" }, components: {}, filters: {}, beforeMount:function () { }, methods: { buttonClick1() { this.getOrders() } }, computed: { } });
其中secondFram是在html中的一個(gè)id為secondFram的div
5、 在html中寫一個(gè)button<button type="primary" style="margin-right: 10px;float: right" @click="buttonClick1">查詢</button>
6、 萬事俱備,只欠······webpack打包,在webpack.config.js目錄,使用webpack webpack.config.js命令,打包后會(huì)生成一個(gè)rechargeOrder-bundle.js文件。就像之前引用js文件一樣,只不過現(xiàn)在引用的是webpack打包后的使用vue編寫的經(jīng)過webpack處理的瀏覽器能識別的js。
7、 原先的項(xiàng)目使用fis打包,現(xiàn)在還是用fis打包,沒有任何影響。
以上這篇集成vue到j(luò)query/bootstrap項(xiàng)目的方法就是小編分享給大家的全部內(nèi)容了,希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
相關(guān)文章
vue使用v-for實(shí)現(xiàn)hover點(diǎn)擊效果
hover是css中的選擇器,用于選擇鼠標(biāo)指針浮動(dòng)在上面的元素。這篇文章主要介紹了vue使用v-for實(shí)現(xiàn)hover點(diǎn)擊效果,需要的朋友可以參考下2018-09-09Vue中的scoped實(shí)現(xiàn)原理及穿透方法
這篇文章主要介紹了Vue中的scoped實(shí)現(xiàn)原理及穿透方法,本文通過實(shí)例文字相結(jié)合的形式給大家介紹的非常詳細(xì),需要的朋友可以參考下2018-05-05VUE使用echarts?5.0以上版本渲染器未導(dǎo)入錯(cuò)誤問題
這篇文章主要介紹了VUE使用echarts?5.0以上版本渲染器未導(dǎo)入錯(cuò)誤問題,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-06-06vuejs+element UI點(diǎn)擊編輯表格某一行時(shí)獲取內(nèi)容填入表單的示例
這篇文章主要介紹了vuejs+element UI點(diǎn)擊編輯表格某一行時(shí)獲取內(nèi)容填入表單的示例,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2018-10-10Vue3如何使用axios發(fā)起網(wǎng)絡(luò)請求
這篇文章主要介紹了Vue3如何使用axios發(fā)起網(wǎng)絡(luò)請求,具有很好的參考價(jià)值,希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-06-06vue3的介紹和兩種創(chuàng)建方式詳解(cli和vite)
這篇文章主要介紹了vue3的介紹和兩種創(chuàng)建方式(cli和vite),vue3對比vue2帶來的性能提升有很多優(yōu)勢,總體來說Vue 3在性能、開發(fā)體驗(yàn)和代碼組織方面都有所改進(jìn),使得它更加適合于大型、復(fù)雜的應(yīng)用程序開發(fā),需要的朋友可以參考下2023-04-04Vue toRef toRefs toRaw函數(shù)使用示例
這篇文章主要介紹了Vue toRef toRefs toRaw函數(shù)使用示例,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)吧2023-03-03vue項(xiàng)目proxyTable配置小結(jié)
本文主要介紹了vue項(xiàng)目proxyTable配置小結(jié),文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-04-04