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

Question

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 ? 🎜

Answer 1

Question 1 : Si .vue utilise webpack, il nécessite vue-loader
Question 2 : Séquence
Question 3 : L'outil d'empaquetage peut générer des fichiers .js et .css séparément

Supplément : j'ai une démo de yii2 et vue pour référence https://github.com/TIGERB/vue...