专栏首页我的前端路web Laravel 5.3 + Vue2 + Element

web Laravel 5.3 + Vue2 + Element

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

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

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

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

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

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

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

Script php artisan optimize handling the post-install-cmd event returned with error code 255

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

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

"laravel-elixir-webpack-official":"https://www.3sjtw.com/SebastianS90/laravel-elixir-webpack-official/tarball/22a3805996dfb7ca3e4137e9bdcb29232ba9f519"

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

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

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

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

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

const path = require('path');

require('laravel-elixir-webpack-official');

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

然后在注释后加入:

Elixir.webpack.config.module.loaders =[];

Elixir.webpack.mergeConfig({

resolveLoader:{

root: path.join(__dirname,'node_modules'),

},

module:{

loaders:[

{

test:/\.js$/,

loader:'babel',

exclude:/node_modules/

},

{

test:/\.css$/,

loader:'style!css'

}

]

}

});

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

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

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');

});

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

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

importElementUI from 'element-ui';

import'element-ui/lib/theme-default/index.css';

Vue.use(ElementUI);

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

<!DOCTYPE html>

<htmllang="en">

<head>

<metacharset="UTF-8">

<title>Example</title>

</head>

<body>

<divid="app">

<example></example>

<el-button>Hello</el-button>

</div>

<scriptsrc="{{ asset('js/app.js') }}"></script>

</body>

</html>

运行命令gulp watch和php artisan serve。

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

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

则app.js大概像这样:

importApp from './App.vue';

importElementUI from 'element-ui';

import'element-ui/lib/theme-default/index.css';

Vue.use(ElementUI);

const app =newVue({

el:'#app',

render: h => h(App)

});

App.vue:

<template>

<div id="app">

<example></example>

<el-button>HelloElement</el-button>

</div>

</template>

<script>

importExample from './components/Example.vue';

exportdefault{

name:'app',

components:{

Example

}

};

</script>

祝大家使用愉快。

资料:

《Laravel》:www.pzzs168.com

《buble》:www.aiidol.com

《issue》:www.idiancai.com

原文链接:http://www.yyyweb.com/4734.html

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 前段:可能是最全的 “文本溢出截断省略” 方案合集

    在我们的日常开发工作中,文本溢出截断省略是很常见的一种需考虑的业务场景细节。看上去 “稀松平常” ,但在实现上却有不同的区分,是单行截断还是多行截断?多行的截断...

    用户4962466
  • 深入理解JavaScript系列(38):设计模式之职责链模式

    职责链模式(Chain of responsibility)是使多个对象都有机会处理请求,从而避免请求的发送者和接受者之间的耦合关系。将这个对象连成一条链,并沿...

    用户4962466
  • 前段:可能是最全的 “文本溢出截断省略” 方案合集

    在我们的日常开发工作中,文本溢出截断省略是很常见的一种需考虑的业务场景细节。看上去 “稀松平常” ,但在实现上却有不同的区分,是单行截断还是多行截断?多行的截断...

    用户4962466
  • 用一个场景概述你怎么使用移动办公

    管理者的问题? 你的员工和你说,今天他要上门拜访客户,你的心理可能早就有一串长长的疑问:他真的去客户哪儿了么?他真的是认真去做事情?而不是想着可以借着这个借口出...

    人称T客
  • diango路由分发

    1个Django 项目里面有多个APP目录大家共有一个 url容易造成混淆,于是路由分发让每个APP的拥有了自己单独的url

    py3study
  • 新冠疫情相似句对判定,快速匹配准确答案

    面对疫情抗击,疫情知识问答应用得到普遍推广。如何通过自然语言技术将问答进行相似分类仍然是一个有价值的问题。如识别患者相似问题,有利于理解患者真正诉求,帮助快速匹...

    机器学习AI算法工程
  • Segment Routing之概述(一)|必看

    Segment Routing(SR)是一种源路由协议,也称为段路由协议,由源节点指定转发路径,并将路径转换成一个有 序的Segment列表(SID列表)封装到...

    网络技术联盟站
  • java实现HTML转PDF

    windows 自带有这个文件 。但是linux 要自己去下载了 如果需要可以联系博主 (千万不要把windows s上的这个文件直接copy 到linux 系...

    斯文的程序
  • Leetcode 104 Maximum Depth of Binary Tree

    Given a binary tree, find its maximum depth. The maximum depth is the number o...

    triplebee
  • 修改源码实现小程序UI库iview weapp的modal组件自定义宽高

    因为项目需要在模态窗中显示内容,小程序端的iview没有类似popup这种的弹出框,所以就选择了modal对话框来承载弹出内容。一番引入使用后发现,当模态框中的...

    薛定喵君

扫码关注云+社区

领取腾讯云代金券