欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

集成vue到j(luò)query/bootstrap項(xiàng)目的方法

 更新時(shí)間:2018年02月10日 10:51:40   作者:starryninglong  
下面小編就為大家分享一篇集成vue到j(luò)query/bootstrap項(xiàng)目的方法,具有很好的參考價(jià)值,希望對大家有所幫助。一起跟隨小編過來看看吧

說明,項(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)擊效果

    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-09
  • 一文搞懂vue編譯器(DSL)原理

    一文搞懂vue編譯器(DSL)原理

    本文主要介紹了一文搞懂vue編譯器(DSL)原理,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2023-05-05
  • Vue中的scoped實(shí)現(xiàn)原理及穿透方法

    Vue中的scoped實(shí)現(xiàn)原理及穿透方法

    這篇文章主要介紹了Vue中的scoped實(shí)現(xiàn)原理及穿透方法,本文通過實(shí)例文字相結(jié)合的形式給大家介紹的非常詳細(xì),需要的朋友可以參考下
    2018-05-05
  • vue3組件銷毀的具體實(shí)現(xiàn)

    vue3組件銷毀的具體實(shí)現(xiàn)

    組件的銷毀意味著從 DOM 中移除該組件,并清除與之相關(guān)的所有事件監(jiān)聽器和子組件,本文主要介紹了vue3組件銷毀的具體實(shí)現(xiàn),具有一定的參考價(jià)值,感興趣的可以了解一下
    2024-08-08
  • VUE使用echarts?5.0以上版本渲染器未導(dǎo)入錯(cuò)誤問題

    VUE使用echarts?5.0以上版本渲染器未導(dǎo)入錯(cuò)誤問題

    這篇文章主要介紹了VUE使用echarts?5.0以上版本渲染器未導(dǎo)入錯(cuò)誤問題,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2024-06-06
  • vuejs+element UI點(diǎn)擊編輯表格某一行時(shí)獲取內(nèi)容填入表單的示例

    vuejs+element UI點(diǎn)擊編輯表格某一行時(shí)獲取內(nèi)容填入表單的示例

    這篇文章主要介紹了vuejs+element UI點(diǎn)擊編輯表格某一行時(shí)獲取內(nèi)容填入表單的示例,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2018-10-10
  • Vue3如何使用axios發(fā)起網(wǎng)絡(luò)請求

    Vue3如何使用axios發(fā)起網(wǎng)絡(luò)請求

    這篇文章主要介紹了Vue3如何使用axios發(fā)起網(wǎng)絡(luò)請求,具有很好的參考價(jià)值,希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2022-06-06
  • vue3的介紹和兩種創(chuàng)建方式詳解(cli和vite)

    vue3的介紹和兩種創(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-04
  • Vue toRef toRefs toRaw函數(shù)使用示例

    Vue toRef toRefs toRaw函數(shù)使用示例

    這篇文章主要介紹了Vue toRef toRefs toRaw函數(shù)使用示例,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)吧
    2023-03-03
  • vue項(xiàng)目proxyTable配置小結(jié)

    vue項(xiàng)目proxyTable配置小結(jié)

    本文主要介紹了vue項(xiàng)目proxyTable配置小結(jié),文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2023-04-04

最新評論