Ich habe vorher CDN verwendet, aber jetzt versuche ich, gulp und webpack zum Packen von JS- und CSS-Dateien zu verwenden. Die Details sind wie folgt:
Ich werde die elementUI des Ele.me-Teams verwenden, also habe ich sie gemäß diesem Artikel konfiguriert: http://codesky.me/archives/tr...
Das Endergebnis ist gulpfile.js< /code> und gulpfile.js和app.js文件是这样的：gulpfile.js Die Datei sieht so aus:
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.jsonDann werden wir die zuvor mit CDN eingeführten Ressourcen wie JQuery, Bootstrap usw. packen. Einzelheiten finden Sie in der -Datei:
{
"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 installAusführenVerpacken Sie nach der Installation des oben genannten Pakets die CSS- und JS-Dateien: 1. Für die CSS-Datei habe ich die folgenden Zeilen zur Datei resources/assets/sass/app.scss hinzugefügt, und es schien kein Problem zu geben.
@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. Für js-Dateien weiß ich nicht, wie ich es machen soll. Ich habe versucht, sie in gulpfile.js bzw. zu platzieren /code>, ich habe einen Fehler gemeldet.
require('tether');
require('holderjs');
require('cropper');gulp还是webpack1. Wie soll die js-Datei verpackt werden? Es gibt auch ein wenig Verwirrung darüber, welchen -Befehl ich verwenden soll.
tether要在bootstrap2. Es liegt ein Problem mit der Verpackungsreihenfolge von js-Dateien vor. Der Fehler wird nicht vor dem oben genannten
app.scss中引入做虽然没什么问题，但是上面app.js文件中又引入了element-ui的css文件import 'element-ui/lib/theme-default/index.css';，也就是app.scss和app.js3. Das Packen von CSS-Dateien stellt zwar kein Problem dar, wenn Sie es oben in app.scss einführen, aber die CSS-Datei von element-ui wird auch in eingeführt oben
import 'element-ui/lib/theme-default/index.css';, das heißt, sowohl app.scss als auch 🎜 CSS verarbeiten? Etwas verwirrend, ist das in Ordnung? 🎜 
问题一：如果.vue用webpack，因为需要vue-loader
问题二：顺序
问题三：打包工具，可以分开输出.js、.css文件