试水 Laravel 5.3 + Vue2 + Element

首先这里省略安装Laravel的步骤,直接laravel new blog

如果你是中国大陆用户,可以尝试这个composer镜像:http://pkg.phpcomposer.com

如果在new之后发生了Warning(嗯,反正我每次都遇到了OTZ)

  1. Warning:require(/Users/SkyAo/blog/bootstrap/../vendor/autoload.php): failed to open stream:No such file or directory in/Users/SkyAo/blog/bootstrap/autoload.php on line 17
  2. Fatal error:require():Failed opening required '/Users/SkyAo/blog/bootstrap/../vendor/autoload.php'(include_path='.:')in/Users/SkyAo/blog/bootstrap/autoload.php on line 17
  3. PHP Warning:require(/Users/SkyAo/blog/bootstrap/../vendor/autoload.php): failed to open stream:No such file or directory in/Users/SkyAo/blog/bootstrap/autoload.php on line 17
  4. PHP Fatal error:require():Failed opening required '/Users/SkyAo/blog/bootstrap/../vendor/autoload.php'(include_path='.:')in/Users/SkyAo/blog/bootstrap/autoload.php on line 17
  5. Script php artisan optimize handling the post-install-cmd event returned with error code 255

接下来就只能手动继续执行:composer installphp artisan key:generate,否则如果一切顺利,接下来使用php artisan serve就能够成功启动了。

由于官方包依旧存在问题,在gulp --production会报错,所以我们要修改package.json中的laravel-elixir-webpack-official,改为:

  1. "laravel-elixir-webpack-official":"https://github.com/SebastianS90/laravel-elixir-webpack-official/tarball/22a3805996dfb7ca3e4137e9bdcb29232ba9f519"

接下来,由于我们需要使用到Vue,首先运行npm install安装相关依赖。(截止2016年10月06日,本行撰写时,Laravel已经将依赖换成Vue2套装,不必人工修改依赖。

接下来,安装一些Element需要的包,首先当然是他自己:cnpm install --save element-ui

接下来安装一些我们需要的额外的loaders:

  1. cnpm install --save-dev css-loader style-loader vue-loader babel-loader babel-core

全部安装完成后,配置一下gulpfile中的webpack

  1. const path = require('path');
  2. require('laravel-elixir-webpack-official');

laravel-elixir-webpack-official版本小于1.0.9:

然后在注释后加入:

  1. Elixir.webpack.config.module.loaders =[];
  2. Elixir.webpack.mergeConfig({
  3. resolveLoader:{
  4. root: path.join(__dirname,'node_modules'),
  5. },
  6. module:{
  7. loaders:[
  8. {
  9. test:/\.js$/,
  10. loader:'babel',
  11. exclude:/node_modules/
  12. },
  13. {
  14. test:/\.css$/,
  15. loader:'style!css'
  16. }
  17. ]
  18. }
  19. });

这里因为mergeConfig方法会追加而不会覆盖包内的配置信息,而buble会导致无法正常的编译,所以我们只能直接覆盖掉配置,比较无奈,向该包作者提了一个issue,期待有更好的方法。

laravel-elixir-webpack-official版本大于等于1.0.9:

  1. elixir(mix =>{
  2. // Elixir.webpack.config.module.loaders = [];
  3. Elixir.webpack.mergeConfig({
  4. resolveLoader:{
  5. root: path.join(__dirname,'node_modules'),
  6. },
  7. module:{
  8. loaders:[
  9. {
  10. test:/\.css$/,
  11. loader:'style!css'
  12. }
  13. ]
  14. }
  15. });
  16. mix.sass('app.scss')
  17. .webpack('app.js');
  18. });

可见:https://github.com/ElementUI/element-in-laravel-starter/commit/a988bd471af3b8253decde090e43b2163a0a4a8a#diff-b9e12334e9eafd8341a6107dd98510c9

之后在resources/assets/js/app.js中我们加入:

  1. importElementUI from 'element-ui';
  2. import'element-ui/lib/theme-default/index.css';
  3. Vue.use(ElementUI);

resources/views/welcome.blade.php改为:

  1. <!DOCTYPE html>
  2. <htmllang="en">
  3. <head>
  4. <metacharset="UTF-8">
  5. <title>Example</title>
  6. </head>
  7. <body>
  8. <divid="app">
  9. <example></example>
  10. <el-button>Hello</el-button>
  11. </div>
  12. <scriptsrc="{{ asset('js/app.js') }}"></script>
  13. </body>
  14. </html>

运行命令gulp watchphp artisan serve

等待编译完成后,我们就能看到正确的结果了。

当然,你可以直接引入一个App.vue文件,使用它来进行前后端分离式的开发。

app.js大概像这样:

  1. importApp from './App.vue';
  2. importElementUI from 'element-ui';
  3. import'element-ui/lib/theme-default/index.css';
  4. Vue.use(ElementUI);
  5. const app =newVue({
  6. el:'#app',
  7. render: h => h(App)
  8. });

App.vue

  1. <template>
  2. <div id="app">
  3. <example></example>
  4. <el-button>HelloElement</el-button>
  5. </div>
  6. </template>
  7. <script>
  8. importExample from './components/Example.vue';
  9. exportdefault{
  10. name:'app',
  11. components:{
  12. Example
  13. }
  14. };
  15. </script>

祝大家使用愉快。

相关仓库:

赞 (0) 打赏

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏