【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 5.5 + Vue 2.x + Element 2.x】使用Vue.js配合Laravel开发_第1张图片

Laravel中默认有vue example files。

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

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

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

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

将welcome.blade.php内容改为:

【Laravel 5.5 + Vue 2.x + Element 2.x】使用Vue.js配合Laravel开发_第2张图片

并将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中,然后打开浏览器可以看到如下页面:


【Laravel 5.5 + Vue 2.x + Element 2.x】使用Vue.js配合Laravel开发_第3张图片

vue的使用没有问题的话,

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

npm i element-ui@next -S

你可能感兴趣的:(【Laravel 5.5 + Vue 2.x + Element 2.x】使用Vue.js配合Laravel开发)