laravel5.3和vuejs結合使用,打包js和css檔案問題
黄舟
黄舟 2017-05-16 16:49:42
0
1
534

以前用cdn,現在嘗試一下用gulp、webpack打包js和css文件,想法有點亂,具體是這樣的:

準備使用一下餓了麼團隊的elementUI,所以按照這篇文章進行了配置:http://codesky.me/archives/tr...
最終得到的gulpfile.jsapp.js檔案是這樣的:
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'
});

接著準備把以前用cdn引進的資源也弄成打包,像是jquery、bootstrap等所有的,詳見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"
  }

執行npm install安裝上面的套件之後,分別對css和js檔案打包:

1、對於css文件,我是在resources/assets/sass/app.scss文件中添加如下幾行,好像沒什麼問題。

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

2、對於js文件,不知怎麼弄,用下面三個包嘗試分別放在gulpfile.jsapp.js#中,運行gulp時報錯。

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

問題:
1、如上最後那裡,js檔案該怎麼打包?該用gulp還是webpack指令也有點混淆,兩個指令分別什麼時候用?

2、js檔案打包順序問題,例如上面的tether要在bootstrap的前面才不會報錯,打包順序注意require()的先後順序就可以了嗎?

3、css檔案的打包,像上面app.scss中引入做雖然沒什麼問題,但是上面app.js檔案中又引入了element-ui 的css檔import 'element-ui/lib/theme-default/index.css';,也就是app.scssapp.js #裡面都有處理css?有點混淆,這樣好嗎?

黄舟
黄舟

人生最曼妙的风景,竟是内心的淡定与从容!

全部回覆(1)
给我你的怀抱

問題一:如果.vue用webpack,因為需要vue-loader
問題二:順序
問題三:打包工具,可以分開輸出.js、.css檔

補充:我這有yii2和vue的demo可以參考下 https://github.com/TIGERB/vue...

熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!