Integrated Vue to Jquery/bootstrap project

Note that the project itself uses the management background of jquery and Bootstrap, and part of the login interface runs on the node server, and most interfaces are implemented using SPRINGMVC. Now, using VUE development, integrate Vue into the original project. does not affect the original framework. The original packaging method is to use FIS Packaging, integrated vue, first with webpack packaging, and then FIS packaging. Do not affect each other. because of the original jquery and Bootstrap, there is no data under the Package.json folder. When using Vue, all required dependencies are placed under Package.json, adding the following dependencies:

{
  "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 '
  }
}

Description: When using jquery, the supervisor is used for thermal loading. After these dependencies are installed, it is recommended that you add the next Gitignore and exclude the folder under local node_modules. The former is designed to prevent Git from submitting code by submitting these Lib to the latter is to prevent the IDE from using the index index these files, it will be very card. This is already exclude, so show not exclude
. gitignore file Add:
The next step is to run NPM install in the directory where Package.json resides and install all the dependencies.
2. New Webpack.config.js file (Webpack packaged), the file reads as follows:

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-loa Der '}, {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 '}},}; 

Description: The above is to express the Rechargeorder.js file into Rechargeorder-bundle.js file, using Vue and other loader (specific knowledge please see Webpack)
3. The original jquery is the introduction of JS in the HTML, and now we still do so. as shown below. where Bundle.js is the file after the Webpack package, not the source file
4. Write a rechargeorder.js file, refer to Vue, code as follows:

Import Vue from ' Vue '
    new Vue ({
        el: "#secondFram",
        data: {
            userId: ""
        },
        components: {},
        Filters: {},
        beforemount:function () {
        },
        methods: {
            buttonClick1 () {
                this.getorders ()
            }
        },
        computed: {

        }}
    );

Where Secondfram is a div in HTML with an ID of Secondfram
5. Write a Button<button type= "PRIMARY" style= in HTML: 10px;float:right "@click =" ButtonClick1 "> Query </button>
6. Everything is all you owe. Webpack packaging, in the Webpack.config.js directory, using the Webpack webpack.config.js command, packaging will generate a rechargeorder-bundle.js file. Like the previous reference JS file, but now refers to the Webpack package after the use of Vue written by the Webpack processing browser can identify JS.
7. The original project was packaged with FIS and is now packaged with FIS, without any impact.