手动修改的话，需要修改或添加哪些文件？

zwl1619 commented 7 years ago

假如从现有的项目手动修改，需要修改或添加哪些文件？下载这个模板，安装后，运行localhost:8000一片空白

csvwolf commented 7 years ago

运行：根据.env.example配置好.env，需要手动分配 key ：php artisan key:generate 手动配置： http://codesky.me/archives/try-laravel5-vue2-element-cn.wind

zwl1619 commented 7 years ago

@csvwolf 谢谢，怎么打包css和js文件，有点混乱，麻烦帮解答一下：先按照这篇文章进行了配置：http://codesky.me/archives/try-laravel5-vue2-element-cn.wind 最终得到的gulpfile.js和app.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.js和app.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.scss和app.js里面都有处理css？有点混淆，这样好吗？

csvwolf commented 7 years ago

gulp构建去调用webpack，实际上并没有安装webpack的命令行工具。可以看一下 gulp 的文档和 webpack 的文档它们俩并不是画上等号的。
gulp具体报的是什么错误？
关于调用，对于非变量列表而言在.scss中引入和.js中引入效果一样，都会被打包进去，统一来说放在.js中引入更好也更方便管理一些。

zwl1619 commented 7 years ago

@csvwolf

2.gulp具体报的是什么错误？

我在app.js中这样引入：

require('tether');
require('./bootstrap');
require('holderjs');
require('cropper');

这次gulp没有报错，但运行有错：

Uncaught Error: Bootstrap tooltips require Tether
Uncaught TypeError: $image.cropper is not a function

3.关于调用，对于非变量列表而言在.scss中引入和.js中引入效果一样，都会被打包进去，统一来说放在.js中引入更好也更方便管理一些。

css文件在.scss中引入，会生成app.css文件，如果在.js中引入，最终的css会生成在app.js文件中还是app.css文件中呢？

ElementUI / element-in-laravel-starter

手动修改的话，需要修改或添加哪些文件？ #6