The method for integrating vue into the jquery/bootstrap project, vuejquery

The method for integrating vue into the jquery/bootstrap project, vuejquery

Description: The project uses jquery and bootstrap to manage the background. Some logon interfaces run on the node server, and most interfaces are implemented using springmvc. Now, we use vue for development and integrate vue into the original project. Does not affect the original framework. The original packaging method is to package with the fiis. After the vue is integrated, pack with webpack and then pack with the fiis. Does not affect each other.

1,Since jquery and bootstrap were used, there is no data in the package. json folder. When using vue, all dependencies are put under package. json and the following dependencies are added:

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

Note:Previously, when jquery was used, supervisor was used for hot loading. These dependencies will be installed under the Local node_modules directory. We recommend that you add the gitIgnore and exclude folders. The former is to prevent the lib from being submitted when git submits code. The latter is to prevent the IDE from using index to index these files.

Exclude already exclude. Therefore, not exclude is displayed.

Add the. gitignore file:

Next, go to the directory where package. json is located and run npm install to install all dependencies.

2,Create a webpack. config. js file (packaged for use by webpack). The file content is 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-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' } },};

(The above is the rechargeOrder. js files packaged into a rechargeOrder-bundle.js file, the use of vue and other loader (specific knowledge please see webpack)

3,Originally, jquery introduced js in html. Now we still do this.

As shown below

Bundle. js is a webpack package file, not a source file.

4,Write a rechargeOrder. js file and reference vue. The Code is as follows:

import Vue from 'vue' new Vue({ el: "#secondFram", data: { userId:"" }, components: {}, filters: {}, beforeMount:function () { }, methods: { buttonClick1() { this.getOrders() } }, computed: { } });

SecondFram is a div whose id is secondFram in html.

5,Write a button <button type = "primary" style = "margin-right: 10px; float: right" @ click = "buttonClick1"> query </button> in html.

6,Everything is ready, only owe · web pack packaging, in the webpack. config. js directory, use webpack. config. js command, will generate a rechargeOrder-bundle.js file after packaging. Just like referencing a js file before, but now it is referenced that the Web pack browser compiled by using vue after webpack packaging can recognize other js files.

7,In the original project, we used to package the data using the fiis, which has no impact.

The above method of integrating vue into the jquery/bootstrap project is all the content shared by the editor. I hope you can give us a reference and support for the customer's house.