Maison > Questions et réponses > le corps du texte
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.json
Ensuite, 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 install
ExécutezAprè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
中,运行gulp
2. 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
还是webpack
1. 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
要在bootstrap
2. 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
app.scss
中引入做虽然没什么问题,但是上面app.js
文件中又引入了element-ui
的css文件import 'element-ui/lib/theme-default/index.css';
,也就是app.scss
和app.js
3. 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
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 ? 🎜给我你的怀抱2017-05-16 16:51:42
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...