Apabila menggunakan laravel5.3 dan vuejs bersama-sama, terdapat masalah dengan pembungkusan fail js dan css

Question

Saya menggunakan CDN sebelum ini, tetapi sekarang saya cuba menggunakan gulp dan webpack untuk membungkus fail js dan css. Perinciannya adalah seperti berikut

Saya akan menggunakan elementUI pasukan Ele.me, jadi saya mengkonfigurasinya mengikut artikel ini: http://codesky.me/archives/tr...

Hasil akhir ialah gulpfile.js< /code> dan
Fail kelihatan seperti ini: gulpfile.js和app.js文件是这样的：
gulpfile.jsgulpfile.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'
});

Kemudian kami akan membungkus sumber yang diperkenalkan sebelum ini menggunakan CDN, seperti jquery, bootstrap, dll. Untuk butiran, sila lihat fail package.json:

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

Jalankannpm installSelepas memasang pakej di atas, pakejkan fail css dan js masing-masing:

1 Untuk fail css, saya menambahkan baris berikut pada fail resources/assets/sass/app.scss, dan nampaknya tiada masalah.

@import "node_modules/bootstrap/dist/css/bootstrap";
@import "node_modules/tether/dist/css/tether";
@import "node_modules/cropper/dist/cropper";

2. Untuk fail js, saya tidak tahu cara melakukannya, saya cuba menggunakan tiga pakej berikut dan meletakkannya dalam gulpfile.js dan gulpfile.js和app.js中，运行gulp Apabila saya menjalankan gulp< /code>, saya melaporkan ralat.

require('tether');
require('holderjs');
require('cropper');

Soalan:
1 Seperti yang ditunjukkan di bahagian akhir di atas, bagaimanakah fail js perlu dibungkus? Terdapat juga sedikit kekeliruan tentang arahan gulp还是webpack yang mana untuk digunakan Bilakah saya harus menggunakan kedua-dua arahan itu?

2. Terdapat masalah dengan susunan pembungkusan fail js Sebagai contoh, ralat tidak akan dilaporkan sebelum tether要在bootstrap di atas cukup untuk memberi perhatian kepada pesanan memerlukan()

3 Pembungkusan fail css, walaupun tiada masalah jika anda memperkenalkannya dalam app.scss di atas, tetapi fail css element-ui juga diperkenalkan dalam di atas app.scss中引入做虽然没什么问题，但是上面app.js文件中又引入了element-ui的css文件import 'element-ui/lib/theme-default/index.css';，也就是app.scss和app.js fail import 'element-ui/lib/theme-default/index.css';, iaitu, kedua-dua app.scss dan

mengendalikan css? Sedikit mengelirukan, adakah ini boleh? 🎜

Answer 1

Soalan 1: Jika .vue menggunakan webpack, ia memerlukan vue-loader
Soalan 2: Urutan
Soalan 3: Alat pembungkusan boleh mengeluarkan fail .js dan .css secara berasingan

Supplement: Saya ada demo yii2 dan vue untuk rujukan https://github.com/TIGERB/vue...