Lors de l'utilisation conjointe de laravel5.3 et vuejs, il y a un problème avec l'empaquetage des fichiers js et css

J'ai déjà utilisé CDN, mais maintenant j'essaie d'utiliser gulp et webpack pour empaqueter des fichiers js et css. L'idée est un peu déroutante. Les détails sont les suivants :

Je vais utiliser l'elementUI de l'équipe Ele.me, je l'ai donc configuré selon cet article : http://codesky.me/archives/tr...
Le résultat final est gulpfile.js< /code> et gulpfile.js和app.js文件是这样的： gulpfile.js Le fichier ressemble à ceci :

gulpfile.js : 
const elixir = require('laravel-elixir');
const path = require('path');

require('laravel-elixir-vue-2');


elixir(mix => {
    // Elixir.webpack.config.module.loaders = [];

    Elixir.webpack.mergeConfig({
    resolveLoader: {
        root: path.join(__dirname, 'node_modules'),
    },
    module: {
        loaders: [
            {
                test: /\.css$/,
                loader: 'style!css'
            }
        ]
    }
});

mix.sass('app.scss')
    .webpack('app.js');
});

app.js
：
require('./bootstrap');

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-default/index.css';
Vue.use(ElementUI);

Vue.component('example', require('./components/Example.vue'));

const app = new Vue({
    el: 'body'
});
package.jsonEnsuite, nous allons empaqueter les ressources précédemment introduites en utilisant CDN, telles que jquery, bootstrap, etc. Pour plus de détails, veuillez consulter le 
 fichier : 
{
  "private": true,
  "scripts": {
    "prod": "gulp --production",
    "dev": "gulp watch"
  },
  "devDependencies": {
    "babel-core": "^6.17.0",
    "babel-loader": "^6.2.5",
    "bootstrap-sass": "^3.3.7",
    "bootstrap": "next",
    "css-loader": "^0.25.0",
    "element-ui": "^1.0.0",
    "gulp": "^3.9.1",
    "jquery": "^3.1.0",
    "laravel-elixir": "^6.0.0-9",
    "laravel-elixir-vue-2": "^0.2.0",
    "laravel-elixir-webpack-official": "https://github.com/SebastianS90/laravel-elixir-webpack-official/tarball/22a3805996dfb7ca3e4137e9bdcb29232ba9f519",
    "lodash": "^4.16.2",
    "style-loader": "^0.13.1",
    "vue": "^2.0.5",
    "vue-loader": "^9.8.0",
    "vue-resource": "^1.0.3"
  },
  "dependencies": {
    "element-ui": "next",
    "vue": "^2.0.3"，
    "tether": "^1.3.7",
    "holderjs": "^2.9.4",
    "cropper": "^2.3.4"
  }
npm installExécutez
Après avoir installé le package ci-dessus, empaquetez respectivement les fichiers css et js : 
1. Pour le fichier CSS, j'ai ajouté les lignes suivantes au fichier resources/assets/sass/app.scss, et il ne semble y avoir aucun problème. 
@import "node_modules/bootstrap/dist/css/bootstrap";
@import "node_modules/tether/dist/css/tether";
@import "node_modules/cropper/dist/cropper";
gulpfile.js和app.js中，运行gulp2. Pour les fichiers js, je ne sais pas comment faire. J'ai essayé d'utiliser les trois packages suivants et de les placer respectivement dans gulpfile.js et 
. /code>, j'ai signalé une erreur. 
require('tether');
require('holderjs');
require('cropper');
Question : 
gulp还是webpack1. Comme indiqué à la fin ci-dessus, comment le fichier js doit-il être empaqueté ? Il y a aussi un peu de confusion quant à la commande 
 à utiliser. Quand dois-je utiliser les deux commandes ? 
tether要在bootstrap2. Il y a un problème avec l'ordre d'emballage des fichiers js. Par exemple, l'erreur ne sera pas signalée avant le 
 ci-dessus. Est-il suffisant de faire attention à l'ordre de require() dans l'ordre d'emballage ? 
app.scss中引入做虽然没什么问题，但是上面app.js文件中又引入了element-ui的css文件import 'element-ui/lib/theme-default/index.css';，也就是app.scss和app.js3. Packaging des fichiers CSS, bien qu'il n'y ait aucun problème si vous l'introduisez dans app.scss ci-dessus, mais le fichier CSS de element-ui est également introduit dans le ci-dessus 
 le fichier import 'element-ui/lib/theme-default/index.css';, c'est-à-dire que app.scss et 🎜 gèrent le CSS ? Un peu déroutant, est-ce que ça va ? 🎜

黄舟2822 Il y a quelques jours608

Lors de l'utilisation conjointe de laravel5.3 et vuejs, il y a un problème avec l'empaquetage des fichiers js et css

répondre à tous(1)je répondrai

`répondre à tous(1)je répondrai`