Comment intégrer vue dans le projet jquery/bootstrap ?-js tutoriel-php.cn

Comment intégrer vue dans le projet jquery/bootstrap ?

亚连

Libérer： 2018-06-06 11:54:02

original

1995 Les gens l'ont consulté

Ci-dessous, je vais partager avec vous une méthode d'intégration de vue dans les projets jquery/bootstrap. Elle a une bonne valeur de référence et j'espère qu'elle sera utile à tout le monde.

Explication, le projet lui-même utilise jquery et bootstrap comme backend de gestion, certaines interfaces de connexion s'exécutent sur le serveur de nœud et la plupart des interfaces sont implémentées à l'aide de springmvc. Maintenant, utilisez vue pour développer et intégrer vue dans le projet original. N'affecte pas le cadre d'origine. La méthode d'empaquetage d'origine consiste à utiliser fis pour l'empaquetage. Après avoir intégré vue, utilisez d'abord webpack pour empaqueter, puis utilisez fis pour empaqueter. Ne vous affectez pas.

1. En raison de l'utilisation originale de jquery et bootstrap, il n'y a aucune donnée dans le dossier package.json. Lorsque vous utilisez vue, placez toutes les dépendances requises sous package.json et ajoutez les dépendances suivantes :

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

Copier après la connexion

Remarque : Lorsque vous utilisez jquery à l'origine, utilisez superviseur pour effectuer un chargement à chaud. Ces dépendances seront dans le répertoire local node_modules après l'installation. Il est recommandé d'ajouter gitIgnore et d'exclure ce dossier. Le premier consiste à empêcher git de soumettre ces bibliothèques lors de la soumission du code, et le second consiste à empêcher l'EDI d'utiliser index pour indexer ces fichiers, ce qui sera très bloqué.

Ici a été exclu donc il ne montre pas d'exclusion

.fichier gitignore ajouté :

Connecter L'étape suivante consiste à accéder au répertoire où se trouve package.json et à exécuter npm install pour installer toutes les dépendances.

2. Créez un nouveau fichier webpack.config.js (utilisé pour l'empaquetage du webpack). Le contenu du fichier est le suivant :

module.exports = {
 entry: &#39;./project/ebook-manage/resources/node-ebook-manage/js/console/content/rechargeOrder.js&#39;,
 output: {
 filename: &#39;./project/ebook-manage/resources/node-ebook-manage/js/console/dist/rechargeOrder-bundle.js&#39;
 },
 module: {
 loaders:[
 {
 test: /\.vue$/,
 loader: &#39;vue-loader&#39;
 },
 {
 test: /\.js$/,
 loader: &#39;babel-loader&#39;,
 exclude: /node_modules/
 },
 {
 test: /\.css$/,
 loader: &#39;style-loader!css-loader&#39;
 },
 {
 test: /\.(eot|svg|ttf|woff|woff2)(\?\S*)?$/,
 loader: &#39;file-loader&#39;
 },
 {
 test: /\.(png|jpe?g|gif|svg)(\?\S*)?$/,
 loader: &#39;file-loader&#39;,
 query: {
  name: &#39;[name].[ext]?[hash]&#39;
 }
 }
 ]
 },
 resolve: {
 alias: {
 &#39;vue&#39;: &#39;vue/dist/vue.js&#39;
 }
 },
};

Copier après la connexion

Remarque : ce qui précède indique le regroupement du fichier rechargeOrder.js dans un fichier rechargeOrder-bundle.js, en utilisant des chargeurs tels que vue (voir webpack pour des connaissances spécifiques)

3, Le jquery original est que JS a été introduit dans HTML, et nous le faisons toujours maintenant.

Comme indiqué ci-dessous

où bundle.js est le fichier empaqueté par webpack, pas le fichier source

4. Écrivez un fichier rechargeOrder.js et une vue de référence Le code est le suivant :

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

 }
 });

Copier après la connexion

où secondFram est un p avec l'identifiant de secondFram en html

5. Écrivez un bouton en html