【Laravel 5.5 + Vue 2.x + Element 2.x】使用Vue.js配合Laravel开发

请首先按照Laravel快速入门完成Laravel的基本了解和安装。

然后在根目录下的package.json文件中将vue的版本改成你希望使用的版本(Laravel 5.5 默认使用2.1.10),然后执行npm install.

也可以,直接npm install, 然后再运行npm install vue安装最新的稳定版vue.


Laravel中默认有vue example files。

/js                          这个目录js的源码目录,Vue的代码都放在这里。

/js/components      这个目录下存放的是Vue单文件组件。

js/bootstrap.js        所有的js依赖都写在这个文件里。

js/app.js                 这个文件是Vue的入口文件。

将welcome.blade.php内容改为:

并将app.js中

Vue.component('example-component',require('./components/ExampleComponent.vue'));

改为

Vue.component('example',require('./components/ExampleComponent.vue'));

(也可以只改welcome.blade.php中的example,我这是测试改了example后是否也可行)

命令行中执行npm run watch, 就会编译css 和js到public中,然后打开浏览器可以看到如下页面:


vue的使用没有问题的话,

接下来安装Element UI, 现在已经有2.0 alpha 版了。

npm i element-ui@next -S

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 本文作者 Jinkey(微信公众号 jinkey-love,官网 https://jinkey.ai)原文链接 h...
    JinkeyAI阅读 425,802评论 152 921
  • 原文链接 必备品 文档:Documentation API:API Reference 视频:Laracasts ...
    layjoy阅读 12,725评论 0 121
  • 想写书评很久了,一直苦于不会,今儿搜罗了网上的方法进行学习整理,准备牛刀小试,希望整理的内容对各位也有帮助。 ...
    金沙阅读 11,403评论 2 34
  • 不知道从什么时候开始,我喜欢说一句“好累哦”。其实真正的累是不会说出来的,因为真的累了,连喊累的力气都没有。但,这...
    纯兰阅读 12,248评论 0 1
  • (文/四口煮夫) 至今,我无论到哪儿都习惯带上一包家乡的大麦粯子,只要闲下来想起了粯子粥,我就会烧上少许,喝...
    thf1120阅读 10,099评论 4 7