前言:网上能找到的关于这个方面的教程实在是太少啦,所以踩了好多坑,特意来分享一下,原创哦。想要打包带走的小伙伴还请注明出处??
1、下载laravel框架,这里我们使用composer(也可以直接搜索laravel学院,下载最新的一键安装包,这里就不放链接了,自行百度)(laravel从5.3版本开始使用vue.js作为默认的js前端框架了)
(注:这里说一下,其实composer不能称为一个包管理器,虽然它涉及到了"packages" 和 "libraries"但它在每个项目的基础上进行管理,在你项目的某个目录中(例如 vendor)进行安装。默认情况下它不会在全局安装任何东西。因此,这仅仅是一个依赖管理。再有就是,对一个相对的新手来说,composer也是方便实用的,建议小伙伴们去下载一个)
附一个简单的安装laravel的命令:composer create-project laravel/laravel 你的项目名。
2、修改package.json并下载相应依赖库
下面是package.json的源码
} 将红色部分修改为
"devDependencies": {
"axios": "^0.15.3",
"bootstrap-sass": "^3.3.7",
"jquery": "^3.1.1",
"laravel-mix": "^0.8.3",
"cross-env": "^3.2.3",
"lodash": "^4.17.4",
"vue": "^2.1.10",
"element-ui": "^1.2.8",
"vue-loader": "^11.3.4",
"vue-router": "^2.4.0"
}
(这里细心的小伙伴们可能已经看到我们的代码里有一行"laravel-mix",这是一个蛮好用的前端编译资源,有兴趣的小伙伴可以了解一下,附送链接:
http://laravelacademy.org/post/6798.html)
打开终端(windows下的命令窗口),cd进到项目目录下,运行:npm install(windows系统下开发的小伙伴要在运行这个命令时带上 --no-bin-links)
这里有了解或用过npm的小伙伴应该知道,如果安装了npm的国内镜像的话,我们也可以直接使用cnpm(墙内下载要比墙外下载快一些,不过网上好多大神说用cnpm有可能会少一些有用的扩展依赖库,会对项目造成影响,不过目前为止我还没有碰到过,当然,这里我们还是直接使用npm来安装了)
通过终端我们可以看到着实下载了不少东西,下载完成后你会看到项目目录下多了一个node_modules的目录。
到了这一步,我们的项目其实已经可以直接运行了:npm run dev(查看package.json会发现除了dev我们还可以run watch、run hot等,这里不做详解啦)
当然,打开浏览器访问我们还看不出哪里有变化,还是laravel自带的welcome界面(因为还没有正式使用vue和element-ui呀)
3、打开reresources/assets/js/components目录,我们会看到lavavel自带的一个.vue的example文件
<template> <div> <div> <div class="col-md-8 col-md-offset-2"> <div class="panel panel-default"> <div>Example Component</div> <div> </div> </div> </div> </div> </div> </template> <script> export default { mounted() { console.log('Component mounted.') } } </script> 为了测试,这里我们修改红色部分为:
require('./bootstrap'); window.Vue = require('vue'); /** * Next, we will create a fresh Vue application instance and attach it to * the page. Then, you may begin adding components to this application * or customize the JavaScript scaffolding to fit your unique needs. */ const app = new Vue({ el: '#app' }); 红色部分可以看出,laravel已经帮我们加载好了这个example组件,下一步,我们只需要在试图文件中引入这个app.js文件就好啦
<!DOCTYPE html> <html lang="{{ config('app.locale') }}"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="X-CSRF-TOKEN" content="{{csrf_token()}}"> <title>123</title> </head> <body> <div id="app"> </div> </body> </html>
相信来看这个教程的小伙伴都应该已经学过vue并至少会一些简单的编程了,这里红色部分就是引入app.js并加载example组件,具体就不再啰嗦了 刷新浏览器就可以看到
http://www.cnblogs.com/meng1314-shuai/p/7136049.html