如何在傳統先後端不分離的項目中使用模塊化開發方式寫.vue格式文件

項目狀況

項目是c#的三層架構技術搭建的，前端這一塊是在.aspx頁面中以script標籤引入js <link rel="stylesheet">方式引入css的方式來開發的後臺系統網站。

網站總體界面結構以下圖

左側是菜單，右側是主題內容頁面，主題內容是嵌入在一個iframe中，經過點擊左側菜單，切換iframe的src在顯示不一樣的頁面。

vue 單文件形式開發

思路

- 1. 頁面的右側部分提供一個佔位符節點，這個節點用 Vue 渲染，實際上就是執行一段 JS 代碼

- 2. 經過webpack配置一個vue項目，打包出一段JS。而後再右側的頁面中引入這個js

具體實踐

項目目錄

新建一個目錄vueDevInstanceModule,經過配置webpack構建vue項目的代碼全放到裏面

webpack相關使用請去看文檔

下面是我這個項目中配置好的packjson.json與webpack.config.js
packjson.json

{
  "name": "webpack-project",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "watch": "webpack --watch",
    "start": "webpack-dev-server --open",
    "build": "webpack"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.4.5",
    "@babel/plugin-syntax-dynamic-import": "^7.2.0",
    "@babel/plugin-transform-runtime": "^7.4.4",
    "@babel/preset-env": "^7.4.5",
    "babel-loader": "^8.0.6",
    "clean-webpack-plugin": "^3.0.0",
    "copy-webpack-plugin": "^5.0.3",
    "extract-text-webpack-plugin": "^3.0.2",
    "html-webpack-plugin": "^3.2.0",
    "vue-loader": "^15.7.0",
    "vue-template-compiler": "^2.6.10",
    "webpack": "^4.35.2",
    "webpack-bundle-analyzer": "^3.3.2",
    "webpack-cli": "^3.3.5",
    "webpack-dev-server": "^3.7.2"
  },
  "dependencies": {
    "vue": "^2.6.10",
    "vue-router": "^3.0.6"
  }
}

View Code

webpack.config.js

const path = require('path');
// const CleanWebpackPlugin = require('clean-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const VueLoaderPlugin = require('vue-loader/lib/plugin');
// var ExtractTextPlugin = require("extract-text-webpack-plugin")
var MiniCssExtractPlugin = require("mini-css-extract-plugin")

const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin; //分析js文件大小狀況

function resolve(dir) {
  return path.join(__dirname, '..', dir)
}


console.log('---------------------------->', path.join(__dirname, 'dist'))

//配置輸出文件目錄
// const outputSrc = './dist/baseinfo';
const outputSrc = './dist/agent';
createOutputSrc(outputSrc)

function createOutputSrc(outputSrc) {

  var fs = require('fs');
  if (!fs.existsSync(outputSrc)) {
    fs.mkdirSync(outputSrc);
  }
}

module.exports = {
  mode: 'production', //development
  entry: './src/main.js',
  devtool: 'inline-source-map',
  plugins: [
    new CleanWebpackPlugin(),
    new HtmlWebpackPlugin({
      title: '管理輸出',
      template: 'index.html',
    }),
    new VueLoaderPlugin(),
    
    new MiniCssExtractPlugin({
      filename: 'style.css'
    }),
   
    // new CopyWebpackPlugin([ // 拷貝暫時先不要，後面須要用到靜態文件時在考慮
    //     {
    //       from: path.resolve(__dirname, 'src'),
    //       to: outputSrc,
    //       ignore: ['.*']
    //     }
    //   ])
    // new BundleAnalyzerPlugin()
  ],
  resolve: {
    extensions: ['.js', '.vue', '.json'],
    alias: {
      //   'vue$': 'vue/dist/vue.esm.js',  3.0 寫法
      //   '@': resolve('src'),
      //   components: resolve('src/components'),
      src: path.resolve(__dirname, './src/'),
      components: path.resolve(__dirname, './src/components/')
    }
  },
  module: {
    rules: [
      { 
        test: /\.vue$/, 
        loader: 'vue-loader',
        options: {
          extractCSS: true
        }
      },
      {
        test: /\.m?js$/,
        exclude: /(node_modules|bower_components)/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env'],
            // plugins: ['@babel/plugin-transform-runtime']
          }
        }
      },
   
      {
        test: /.css$/,
        use: [
          {loader: 'vue-style-loader'},'css-loader'
        ]
      },
    ]
  },
  devServer: {
    port: 8889,
    contentBase: path.join(__dirname, 'dist'), //對那個目錄起服務 並監聽文件變化更新代碼
    // publicPath: '/' //webpack-dev-server 在編譯以後不會寫入到任何輸出文件。而是將 bundle 文件保留在內存中 若是你的頁面但願在其餘不一樣路徑中找到 bundle 文件，則能夠經過 dev server 配置中的 publicPath 選項進行修改。
  },
  output: {
    filename: '[name].js',
    path: path.resolve(__dirname, outputSrc) //'dist/'
   
  },

  optimization: {
    splitChunks: {
      cacheGroups: {
        default: false,
        vendors: false,
        vendor: {
          test: /[\\/]node_modules[\\/]/,
          name: 'vendors',
          chunks: 'all',
        },
      }
    }
  }
};

View Code

tips:

webpack相關配置已經配置好了，目前可以作到編寫vue文件保存後就會自動編譯爲js，而後在對應的aspx頁面引入這個js就好了。

這裏以個人項目爲例

運行項目與配置

1.運行後臺項目，以新增代理商頁面爲例 打開地址`http://localhost:31545/riskManage/Agent/AgentAdd/#/`後

2.進入項目的`vueDevInstanceModule\webpack-project`目錄下執行npm run watch,會自動打包出出vendors.js,main.js到`dist/agent`目錄下，

3.AgentAdd.aspx頁面底部引入vendors.js,main.js

AgentAdd.aspx

<script src="~/vueDevInstanceModule/webpack-project/dist/agent/vendors.js"></script>

<script src="~/vueDevInstanceModule/webpack-project/dist/agent/main.js"></script>

4.配置不一樣模塊輸出

多人協做每一個人寫不一樣的模塊時，例如A寫代理商模塊，B寫用戶基本信息模塊，分別只打包本身寫的代碼

#以新增一個用戶信息模塊爲例，須要作如下4步

(1).修改webpack的輸出地址

webpack.config.js

const outputSrc = './dist/baseInfo';

 

(2).複製一份路由router.js文件作好頁面文件引入

// import Vue from 'vue'

import Router from 'vue-router'

import BaseInfo from 'components/baseInfo/addInfo'

import InfotList from 'components/baseInfo/InfoList'

Vue.use(Router)

(3).main.js中引入剛剛那個路由

import router from "./router/baseInfoRoute" //路由文件，

(4).useInfo.aspx頁面引入

<script src="~/vueDevInstanceModule/webpack-project/dist/baseInfo/vendors.js"></script>

<script src="~/vueDevInstanceModule/webpack-project/dist/baseInfo/main.js"></script>

 

最後的特別說明

該方式目前只實現了把.vue文件中的html,js打包出js文件，css，img資源暫未作處理。所以css仍是去之前的地方(`E:\myWork\Allpro\trunk\E8Management\E8Management\Content\asset\css`)寫吧

對了，watch的時候打包出的js想時時看效果須要強制刷新一下(ctrl+f5)，因爲沒有作文件hash生成動態注入script標籤到aspx中，我也想作呀，可是很差作。

還有不能使用異步加載路由，由於單獨打包出來的xx.js個main.js不能一塊放到aspx頁面的同級main.js加載不到xx.js，這個多是這裏的後端三層構架view層解析的時候路由映射文件我所不知道的規則致使

結束~~

 

補充其餘非.vue格式打包成js的開發模式

vue script標籤引入的非webpack打包的形式開發
參考代碼

 

@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta charset="utf-8">
    <meta name="description" content="Admin Template v.1">
    <meta name="author" content="Isna Nur Azis">
    <meta name="keyword" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>AgentList</title>

    <!-- start: Css -->
    <link rel="stylesheet" type="text/css" href="~/Content/asset/css/bootstrap.min.css">
    <!-- plugins -->
    <link rel="stylesheet" type="text/css" href="~/Content/asset/css/plugins/font-awesome.min.css" />
    <link rel="stylesheet" type="text/css" href="~/Content/asset/css/plugins/simple-line-icons.css" />
    <link rel="stylesheet" type="text/css" href="~/Content/asset/css/plugins/animate.min.css" />
    <link rel="stylesheet" type="text/css" href="~/Content/asset/css/plugins/fullcalendar.min.css" />
    <link rel="stylesheet" type="text/css" href="~/Content/asset/css/plugins/bootstrap-material-datetimepicker.css" />
    <link href="~/Content/asset/css/style.css" rel="stylesheet">
    <!-- end: Css -->
    <link rel="shortcut icon" href="~/Content/asset/img/logomi.png">
    <link href="~/Content/datetimepicker/datetimepicker.css" rel="stylesheet" />

    <link href="~/Content/asset/js/plugins/自動完成下拉選擇--支持中文/css/selectpage.css" rel="stylesheet" />

    <!-- start: Javascript -->
    <script src="~/Content/asset/js/jquery.min.js"></script>
    <script src="~/Content/asset/js/jquery.ui.min.js"></script>
    <script src="~/Content/asset/js/bootstrap.min.js"></script>
    <script src="~/Content/asset/layer/layer.js"></script>
    <script src="~/Content/datetimepicker/datetimepicker.js"></script>
    <script src="~/Content/asset/js/plugins/citySelect/distpicker.data.js"></script>
    <script src="~/Content/asset/js/plugins/citySelect/distpicker.js"></script>
    @*<script src="~/Content/asset/js/plugins/自動完成下拉選擇--支持中文/js/jquery-1.11.0.min.js"></script>*@
    <script src="~/Content/asset/js/plugins/自動完成下拉選擇--支持中文/js/selectpage.js"></script>
    <!-- plugins -->
    <script src="~/Content/asset/js/plugins/moment.min.js"></script>
    <script src="~/Content/asset/js/plugins/fullcalendar.min.js"></script>
    <script src="~/Content/asset/js/plugins/jquery.nicescroll.js"></script>
    <script src="~/Content/asset/js/plugins/jquery.vmap.sampledata.js"></script>
    <script src="~/Content/asset/js/plugins/bootstrap-material-datetimepicker.js"></script>
    <script src="~/Content/asset/js/plugins/vue2.4.js"></script>
    <script src="~/Content/asset/js/cmn/Cmn.js"></script>
    <script src="~/Content/asset/js/cmn/CmnAjax.js"></script>
    <script src="~/Content/asset/js/cmn/CmnFuncExd.js"></script>
    <script src="~/Content/asset/js/utils/utils.js"></script>
    <style>
        /*.part_box{display:none;}*/
        .disabled {
            pointer-events:none;
            /*cursor:not-allowed;*/
        }
    </style>
</head>

<body>
    <div id="myMenu" style="position:relative;z-index:0;">
        <div v-show="IsShow" class="part_box" style="display:none;">
            <div class="panel box-shadow-none content-header">
                <div class="panel-body">
                    <div class="col-md-12">
                        <h4 class="animated fadeInLeft" style="margin:0px;margin-top:5px; padding:0px;"><span>風控管理</span> <span class="fa-angle-right fa"></span> <span>代理商管理</span></h4>
                    </div>
                </div>
            </div>
            <div class="my-title1">查詢條件</div>
            <div class="col-md-12 clearfix">
                <div lass="panel" style="margin:10px 0;">
                    <div class="panel-body bg-white">
                        <table style="width:100%">
                            <tr class="row">
                                <td class="col-md-4">
                                    <label class="control-label">代理商名稱</label>
                                    <div class="form-group">
                                        <input type="text" class="form-control" id="AgentName">
                                    </div>
                                </td>
                                <td class="col-md-4">
                                    <label class="control-label">上級代理商名稱</label>
                                    <div class="form-group">
                                        <input type="text" class="form-control" id="ParentAgentName">
                                    </div>
                                </td>
                                <td class="col-md-4">
                                    <label class="control-label" for="Name">是否爲任意通返利代理商</label>
                                    <div class="form-group">
                                        <select class="form-control" id="IsRebate">
                                            <option value="-1">請選擇</option>
                                            <option value="1">是</option>
                                            <option value="0">否</option>
                                        </select>
                                    </div>
                                </td>
                                <td class="col-md-4"></td>
                            </tr>
                            <tr>
                                <td colspan="3">
                                    <input type="button" class="btn btn-primary" value="查詢" id="selData">
                                </td>
                            </tr>
                        </table>

                    </div>
                </div>
            </div>
            <div class="my-title1">代理商列表</div>
            <div class="col-md-12 mt10">
                <div class="panel">
                    <div class="panel-body">
                        <div class="responsive-table" style="width:100%;overflow:auto;">
                            <div class="table-title-btn-wrap">
                                <div class="table-title-btn-box">

                                    <input type="button" class="btn btn-primary" value="添加" id="addnew" v-on:click="goToadd(0);">
                                </div>
                            </div>
                            <table class="table table-striped table-bordered" cellspacing="0">
                                <thead>
                                    <tr>
                                        <th style="min-width:80px;">ID</th>
                                        <th style="min-width:100px;">代理商名稱</th>
                                        <th style="min-width:100px;">上級代理商名稱</th>
                                        <th style="min-width:80px;">是否爲任意通返利代理商</th>
                                        <th style="min-width:100px;">建立時間</th>

                                        <th style="min-width:100px;">建立人</th>
                                        <th style="min-width:100px;">最後操做時間</th>
                                        <th style="min-width:100px;">最後操做人</th>

                                        <th style="min-width:80px;">操做</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr class="Js_tableDataList">
                                        <td>{Id}</td>
                                        <td>{AgentName}</td>
                                        <td>{ParentAgentName}</td>

                                        <td>{IsRebate}</td>
                                        <td>{CreateTime}</td>

                                        <td>{CreateUserName}</td>
                                        <td>{UpdateTime}</td>

                                        <td>{UpdateUserName}</td>
                                        <td>
                                            <input type="button" class="btn btn-primary js_editOrPreview" value="編輯" data-id="{Id}" data-type="edit" v-on:click="editOrPreview('edit',{Id});">
                                            <input style="margin-left:15px;" type="button" class="btn btn-primary js_editOrPreview" value="查看詳情" data-id="{Id}" data-type="preview" v-on:click="editOrPreview('preview',{Id});">
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                        <div class="col-md-12">
                            <ul class="pagination pull-right">
                                <li class="list_page_box">

                                    <div class="" style="position:absolute;left:0px;top:20px;">
                                        <select style="width:100px;padding:5px;margin-right:10px;" id="exchangePageSize">
                                            <option value="10">每頁10條</option>
                                            <option value="20">每頁20條</option>
                                            <option value="30">每頁30條</option>
                                            <option value="40">每頁40條</option>
                                            <option value="50">每頁50條</option>
                                        </select>

                                        共<a href="javascript:void(0)" class="pagCount" style="margin-left:5px;"></a>頁，
                                        <a href="javascript:void(0)" class="js_RecCount" style="margin-left:5px;"></a>條
                                    </div>
                                    <a href="javascript:void(0)" class="pagFirst">首頁</a>
                                    <a href="javascript:void(0)" class="pagPre"><span aria-hidden="true">&laquo;</span></a>
                                    <a href="javascript:void(0)" class="pagNum active">1</a>

                                    <a href="javascript:void(0)" class="pagNext"><span aria-hidden="true">&raquo;</span></a>
                                    <a href="javascript:void(0)" class="pagLast"><span aria-hidden="true">尾頁</span></a>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div v-show="!IsShow" class="part_box" style="display:none;">
            <div class="panel box-shadow-none content-header">
                <div class="panel-body">
                    <div class="col-md-12">
                        <h4 class="animated fadeInLeft" style="margin:0px;margin-top:5px; padding:0px;"><span>風控管理</span> <span class="fa-angle-right fa"></span> <span>代理商管理</span></h4>
                    </div>
                </div>
            </div>
            <div class="col-md-12 mt10">
                <div class="panel">
                    <div class="my-title2">代理商信息</div>
                    <div class="panel-body">
                        <table style="width:100%">
                            <tr>

                                <td class="col-md-6" style="height:72px;">
                                    <div id="covDatgeWrap" style="height:27px;">
                                        <div class="form-group form-animate-text " style="margin-top:-1px !important;">
                                            <input type="text" class="form-text mask-money " required="" id="AgentName_form" autocomplete="off">
                                            <span class="bar"></span>
                                            <label class="label">代理商名稱</label>
                                        </div>
                                    </div>
                                </td>
                            </tr>
                            <tr>
                                <td class="col-md-6">
                                    <label class="control-label label3">是否有上級代理商</label>
                                    <div class="form-group">
                                        <select id="IsHaveParent" name="IsHaveParent" class="dropdown-toggle form-control no_border2">
                                            <option value="1">是</option>
                                            <option value="0">否</option>
                                        </select>
                                    </div>
                                </td>
                                <td class="col-md-6" v-show="isHaveParent==1">
                                    <div class="form-group form-animate-text select-box2" style="margin-top:10px !important;">
                                        <input type="text" class="form-text mask-money" required="" id="ParentAgentName_form" placeholder="" style="height: 50px;">
                                        <span class="bar"></span>
                                        <label class="label select-label default">上級代理商</label>
                                    </div>
                                </td>
                            </tr>
                            <tr>
                                <td class="col-md-6">
                                    <label class="control-label label3">是否爲任意通返利代理商</label>
                                    <div class="form-group">
                                        <select id="IsRebate_form" name="IsRebate" class="dropdown-toggle form-control no_border2">
                                            <option value="1">是</option>
                                            <option value="0">否</option>
                                        </select>
                                    </div>
                                </td>
                                <td class="col-md-6" style="height:72px;" v-show="isRebate==1">
                                    <div id="covDatgeWrap">
                                        <div class="form-group form-animate-text " style="margin-top:-1px !important;margin-bottom:-12px !important">
                                            <input type="text" class="form-text mask-money ChoiceTime" required="" id="RebateDate" autocomplete="off">
                                            <span class="bar"></span>
                                            <label class="label">返利起始日期</label>
                                        </div>
                                    </div>
                                </td>
                            </tr>
                            <tr></tr>
                        </table>
                    </div>
                </div>
            </div>
            <div>
                <div class="col-md-12 mt10" id="panelContent">

                    <div class="panel  clearfix">
                        <div class="my-title2">業務聯繫人信息</div>
                        <div class="panel-body jspanel">
                            <div id="PanelEidt" style="padding-left:0px;" class="col-md-12">
                                <div class="form-group form-animate-text col-md-6" style="margin-top:10px !important;">
                                    <input type="text" class="form-text mask-money ConName" required="">
                                    <span class="bar"></span>
                                    <label>姓名</label>
                                </div>
                                <div class="form-group form-animate-text col-md-6" style="margin-top:10px !important;">
                                    <input type="text" class="form-text mask-money Phone" required="">
                                    <span class="bar"></span>
                                    <label>手機</label>
                                </div>
                                <div class="form-group form-animate-text col-md-6" style="margin-top:10px !important;">
                                    <input type="text" class="form-text mask-money Email" required="">
                                    <span class="bar"></span>
                                    <label>郵箱</label>
                                </div>
                                <div class="form-group form-animate-text col-md-6" style="margin-top:10px !important;">
                                    <input type="text" class="form-text mask-money QQNum" required="">
                                    <span class="bar"></span>
                                    <label>QQ/微信</label>
                                </div>
                            </div>
                        </div>
                        <div>
                        </div>
                    </div>

                </div>
                <input type="button" value="添加聯繫人" id="AddConMan" style="float:right;margin:6px 15px ;margin-right:43px;" class="btn btn-primary" v-show="!currentPreviewId">
            </div>

            <div class="col-md-12 mt10">
                <div class="panel">
                    <div class="panel-body"  v-show="!currentPreviewId">
                        <input type="button" value="提交" id="AddBtn" class="btn btn-primary" v-on:click="agentSave();" v-show="!currentEditId" />
                        <input type="button" value="肯定" id="AddBtn" class="btn btn-primary" v-on:click="agentSave();" v-show="currentEditId" />
                        <input type="button" value="返回" id="backBtn" class="btn btn-primary" style="margin-left:20px;" v-on:click="backBtn();" />

                    </div>
                    <div class="panel-body" v-show="currentPreviewId">
                        <input type="button" value="返回" id="backBtn" class="btn btn-primary" style="margin-left:20px;" v-on:click="backBtn();" />

                    </div>
                    
                </div>
                <div style="height:100px;"></div>
            </div>
        </div>



    </div>
    <script type="text/javascript">
        $(function () {
            
            //列表相關-----start
            var exchangePageSize = localStorage.getItem('exchangePageSize') || 10; ///modify
            $("#exchangePageSize").val(exchangePageSize)

            var serchParams = {
                AgentName: $("#AgentName").val(),
                ParentAgentName: $("#ParentAgentName").val(),
                IsRebate: $("#IsRebate").val()
            }
            DataPagingTableDataList(serchParams, exchangePageSize);
            $("body").on('click', '#selData', function () {
                var exchangePageSize = localStorage.getItem('exchangePageSize') || 10; ///modify
                $("#exchangePageSize").val(exchangePageSize)
                var serchParams = {
                    AgentName: $("#AgentName").val(),
                    ParentAgentName: $("#ParentAgentName").val(),
                    IsRebate: $("#IsRebate").val()
                }
                DataPagingTableDataList(serchParams, exchangePageSize);
                //setInputsValueToStorge(); //設置值
            });

            $("#exchangePageSize").change(function () {
                var exchangePageSize = $("#exchangePageSize").val();
                var serchParams = {
                    AgentName: $("#AgentName").val(),
                    ParentAgentName: $("#ParentAgentName").val(),
                    IsRebate: $("#IsRebate").val()
                }
                DataPagingTableDataList(serchParams, exchangePageSize);
                localStorage.setItem('exchangePageSize', exchangePageSize) ///add
            });
        })
        
        //消息翻頁
        function DataPagingTableDataList(params, exchangePageSize) {
           
            _dataPaging = new CmnAjax.DataPaging(".Js_tableDataList", "/Agent/GetAgentList", params, ".list_page_box", exchangePageSize, function (data) {
                $('.js_RecCount').html(data.RecCount)
                window.parent.postMessage("dataLoadSuccess", '*');
            }, function (data) { //填充數據以前的處理
                $.each(data.data, function (i, item) {
                    if (item.IsRebate == "1") {
                        item.IsRebate = "是";
                    }
                    else if (item.IsRebate == "0") {
                        item.IsRebate = "否";
                    }
                });
            });
            _dataPaging.Paging.ActiveClass = "active";
            _dataPaging.Paging.SetCycleNextPre(true);
        }

        function createContactList() {
            $("#panelContent").append("<div class='panel jspanel js_clonejspanel'> " +
                                           " <div class='panel-body'>" +
                                               "<div id=\"PanelEidt\" style=\"padding-left:0px;\" class=\"col-md-12\">" +
                                    "                            <div class=\"form-group form-animate-text col-md-6\" style=\"margin-top:10px !important;\">" +
                                    "                                <input type=\"text\" class=\"form-text mask-money ConName\" required=\"\">" +
                                    "                                <span class=\"bar\"></span>" +
                                    "                                <label>姓名</label>" +
                                    "                            </div>" +
                                    "                            <div class=\"form-group form-animate-text col-md-6\" style=\"margin-top:10px !important;\">" +
                                    "                                <input type=\"text\" class=\"form-text mask-money Phone\" required=\"\">" +
                                    "                                <span class=\"bar\"></span>" +
                                    "                                <label>手機</label>" +
                                    "                            </div>" +
                                    "                            <div class=\"form-group form-animate-text col-md-6\" style=\"margin-top:10px !important;\">" +
                                    "                                <input type=\"text\" class=\"form-text mask-money Email\" required=\"\">" +
                                    "                                <span class=\"bar\"></span>" +
                                    "                                <label>郵箱</label>" +
                                    "                            </div>" +
                                    "                            <div class=\"form-group form-animate-text col-md-6\" style=\"margin-top:10px !important;\">" +
                                    "                                <input type=\"text\" class=\"form-text mask-money QQNum\" required=\"\">" +
                                    "                                <span class=\"bar\"></span>" +
                                    "                                <label>QQ/微信</label>" +
                                    "                            </div>" +
                                    "                        <input type='button' value='刪除聯繫人' onclick='DelPanel(this)' class='btn btn-primary mt10 js_clone_delect' style='float:right;' /></div>" +
                                           "</div>" +
                                      " </div>")
        }
        $("body").on('click', '#AddConMan', function () {
            if ($(".jspanel").length >= 4) {
                layer.msg('不能再添加更多了。')
                return false;
            }
            createContactList()
            //刷新頁面高度
            window.parent.postMessage({ "dataLoadSuccess": "true" }, '*');
        });

        function DelPanel(doc) {
            var Obj = $(doc).closest(".jspanel");
            Obj.remove();
            window.parent.postMessage({ "dataLoadSuccess": "true" }, '*');
        }
       
       // function initVue() {
            //列表相關-----end
            //全局定義編輯器相關變量

            //var curPageIndex = null;
            var CustomerNameSelectPage = null;
            //初始化vue節點
            var vm = new Vue({
                el: '#myMenu',
                data: {
                    IsShow: true,
                    currentEditId: null,
                    currentPreviewId:null,
                    curPageIndex: null,
                    isHaveParent: 1,
                    isRebate: 1,
                },
                mounted: function () {
                    this.editOrPreview();
                    this.initDomEvent();
                },
                methods: {
                    agentSave: function (type) {
                        var that = this;
                        var scrollTop = $(window.parent.document).scrollTop() + 200;

                        var AgentName = $.trim($("#AgentName_form").val());
                        var IsHaveParent = $.trim($("#IsHaveParent").val());
                        var ParentID = $.trim($("#ParentAgentName_form").val());
                        var IsRebate = $.trim($("#IsRebate_form").val());
                        var RebateDate = $.trim($("#RebateDate").val());

                        if (!AgentName) {
                            layer.msg("請輸入代理商");
                            return;
                        }
                        if (IsHaveParent == 1 && !ParentID) {
                            layer.alert('請輸入上級代理商', { offset: scrollTop + 'px' });
                            return;
                        }
                        if (IsRebate == 1 && !RebateDate) {
                            layer.alert('請輸入返利起始日期', { offset: scrollTop + 'px' });
                            return;
                        }
                        if (IsRebate == 1) {
                            //var _getNowDate = getNowDate();
                            
                            var getNowDateTime = new Date(getNowDate()).getTime();
                            var rebateDateTime = new Date(RebateDate).getTime();
                            if (rebateDateTime - getNowDateTime < 0) {
                                layer.alert('選擇的返利起始日期必須大於等於今天', { offset: scrollTop + 'px' });
                                return;
                            }
                        }
                        var data = [];
                        $(".jspanel").each(function (i, item) {
                            var obj = {
                                ConName: $(item).find('.ConName').val(),
                                Phone: $(item).find('.Phone').val(),
                                Email: $(item).find('.Email').val(),
                                QQNum: $(item).find('.QQNum').val()
                            }
                            data.push(obj)
                        })
                        var params = {
                            AgentName: AgentName,
                            IsHaveParent: IsHaveParent,
                            IsRebate: IsRebate,
                            ParentID: ParentID,
                            RebateDate: RebateDate,
                            Data: data
                        }
                        var url = '/Agent/AgentAddSave';
                        if (this.currentEditId) { //若是currentEditId存在表示編輯
                            params.id = this.currentEditId;
                            url = '/Agent/AgentUpdateSave'
                        }
                        $.ajax({
                            url: url,
                            data: params,
                            type: 'post',
                            success: function (data) {
                                if (data.result) {
                                    layer.msg(data.msg, { offset: scrollTop + 'px' });
                                    //返回列表並刷新
                                    that.IsShow = true
                                    var exchangePageSize = localStorage.getItem('exchangePageSize') || 10; ///modify
                                    $("#exchangePageSize").val(exchangePageSize)
                                    DataPagingTableDataList({ EmailType: $("#EmailSendType").val() }, exchangePageSize);
                                    if (that.currentEditId && that.curPageIndex) {//若是是是編輯且列表不是在第一頁就跳轉到當前頁
                                        setTimeout(function () {
                                            $('.list_page_box .pagNum').eq(that.curPageIndex).trigger('click')
                                        }, 200)
                                    }
                                } else {
                                    layer.msg(data.msg);
                                }
                            }
                        });
                    },
                    editOrPreview: function (type,id) {
                        var that = this;
                        //翻頁列表中元素綁定不了vue click事件，應爲綁定的時候dom尚未渲染出來--->在列表渲染以後初始化vue解決,,但這樣會形成一個潛在問題。。vue會在列表屢次渲染的屢次初始化
                        $('body').on('click', '.js_editOrPreview', function () {
                            that.IsShow = false;

                            var id = $(this).data('id');
                            var type = $(this).data('type');
                            var params = {
                                id: id
                            }
                            if (type == 'edit') {
                                that.currentEditId = params.id;
                            } else if (type == 'preview') {
                                that.currentPreviewId = id;
                            }
                            
                            $.ajax({
                                url: '/Agent/GetAgentInfo',
                                type: 'post',
                                data: params,
                                datatype: 'json',
                                success: function (data) {
                                    that.IsShow = false; //顯示修改界面
                                    that.initAddOrEdit();
                                    that.setFormValue(data)
                                    that.currentPreviewId && that.disablePreviewForm();
                                    
                                    window.parent.postMessage("dataLoadSuccess", '*');
                                    that.curPageIndex = $('.list_page_box .pagNum.active').index() - 3; //list_page_box的第3個元素纔是pagNum第一個1個
                                }
                            });
                        });
                    },
                    disablePreviewForm: function () {
                        $('#panelContent,#covDatgeWrap').addClass('disabled');
                        $("select").prop("disabled", true);
                        $('.js_clone_delect').remove();
                        //禁用selectPage.js建立的下拉,使用延時的緣由是建立下拉須要必定的時間，等他建立完成再去修改
                        setTimeout(function () {
                            $('#ParentAgentName_form').selectPageDisabled(true);
                            $('#ParentAgentName_form').closest('.sp_container').removeClass('sp_disabled');
                        }, 500)
                    },
                    initDomEvent: function () {
                        var that = this;
                        $('body').on('change', '#IsHaveParent', function () {
                            that.isHaveParent = $(this).val();
                        });
                        $('body').on('change', '#IsRebate_form', function () {
                            that.isRebate = $(this).val();
                        });
                    },
                    backBtn: function () {
                        this.IsShow = true; //返回列表
                        $('.js_clonejspanel').remove();
                        $('#panelContent,#covDatgeWrap').removeClass('disabled');

                        $("select").prop("disabled", false)
                        $('#ParentAgentName_form').selectPageDisabled(false);

                        this.currentPreviewId = null;
                        this.currentEditId = null;
                        window.parent.postMessage("dataLoadSuccess", '*');
                    },
                    goToadd: function (type) {
                        this.IsShow = false; //顯示新增界面
                        this.initAddOrEdit();
                        //清空表單
                        this.clearForm()
                        this.currentEditId = null;
                        window.parent.postMessage("dataLoadSuccess", '*');

                        if (!CustomerNameSelectPage) {//避免重複建立
                            this.getSelectBoxData(function (data) {
                                CustomerNameSelectPage = $('#ParentAgentName_form').selectPage({
                                    showField: 'Name',
                                    keyField: 'ID',
                                    pagination: false,
                                    maxSelectLimit: 10, //限制最多選擇個數
                                    data: data
                                });
                            })
                        }
                    },
                    initAddOrEdit: function () { //元素顯示後再去建立第三方插件調用
                        $('.ChoiceTime').datetimepicker({
                            format: 'yyyy-mm-dd',
                            weekStart: 1,
                            todayBtn: 1,
                            autoclose: true,
                            todayHighlight: 1,
                            startView: 2,
                            minView: 2,
                            forceParse: 0,
                        });
                    },
                    clearForm: function () {
                        $('#AgentName_form').val('');
                        $('#IsHaveParent').val('1');
                        //$('#ParentAgentName_form').val('');
                        $('#ParentAgentName_form').selectPageClear();
                        $('#IsRebate_form').val('1');
                        $('#RebateDate').val('');
                        this.isHaveParent = 1;
                        this.isRebate = 1;

                        $('.jspanel').find('input').val('');
                    },
                    setFormValue: function (value) {
                        if (!CustomerNameSelectPage) {//避免重複建立
                            this.getSelectBoxData(function (data) {
                                CustomerNameSelectPage = $('#ParentAgentName_form').selectPage({
                                    showField: 'Name',
                                    keyField: 'ID',
                                    pagination: false,
                                    maxSelectLimit: 10, //限制最多選擇個數
                                    data: data
                                });
                            })
                        }
                        $('#AgentName_form').val(value.AgentName);
                        $('#IsHaveParent').val(value.IsHaveParent);
                        $('#ParentAgentName_form').val(value.ParentID);
                        $('#ParentAgentName_form').selectPageRefresh(); //設置val後須要刷新列表

                        $('#IsRebate_form').val(value.IsRebate);
                        $('#RebateDate').val(value.RebateDate);

                        this.isHaveParent = value.IsHaveParent;
                        this.isRebate = value.IsRebate;
                        //遍歷建立n個、
                        // 。。
                        var dataLen = value.Data.length;
                        while (dataLen > 1) {
                            createContactList();
                            dataLen--;
                        }
                        if (dataLen >= 1) {

                            $.each(value.Data, function (i, item) {
                                $.each(item, function (key, iitem) { // key
                                    $('body').find('.jspanel').eq(i).find('.' + key).val(iitem)
                                });
                            });
                        }
                        //fixed ui style
                        $('#ParentAgentName_form').siblings('label').css({ 'top': '7px', 'font-size': '14px' });
                    },
                    getSelectBoxData: function (cb) {
                        $.ajax({
                            url: '/CustomerBillManage/GetAgent',
                            datatype: 'json',
                            type: "post",
                            success: function (data) {
                                cb && cb(data);
                            }
                        });
                    },
                },
                filters: {
                    formateProductType: function (val) {

                        if (val == 1) {
                            val = '30天產品';
                        } else if (val == 2) {
                            val = '45天產品';
                        } else if (val == 3) {
                            val = '60天產品';
                        }
                        return val
                    }
                }
            });
      //  }
        
    </script>
</body>
</html>

View Code

 

注意咱們最後的頁面是使用jQuery與vue混合的，其中翻頁部分是使用jQuery插件渲染的，其餘部分是使用vue+jQuery的

思路

直接當前頁面中引入vue.js script標籤，經過對右側節點`#myMenu`建立一個 Vue 實例，直接把當前頁面當作template

- 方案1.非component組件化

直接頁面內使用

var vm = new Vue({

el: '#myMenu',

data: {

IsShow: true,

},

created: function () {

console.log('xx');

},

methods: {}

})

 

- 方案2.component組件化

新建一個test.js文件，而後當前頁面引入這個test.js文件，當作組件註冊到頁面中去使用

Vue.component('my-test', {

template: '<div> test HTML 代碼 {{mgs}}{{title}}</div>',

props: {

title: { default: 'xxx' }

},

data: function () {

return {

mgs: 'testttt'

}

},

created: function () {

console.log(this.mgs);

},

methods: {}

// ...

})