生产材料
PHP:PHP 5.6+
Laravel 5.4:https://github.com/laravel/laravel/releases/
Composer:http://getcomposer.org/
Node.js:http://nodejs.org/
Node Package Manager:http://www.npmjs.com/
生产环境
系统环境:Windows 7 x64
Web服务器:WAMPServer 3 64bit:https://sourceforge.net/projects/wampserver/files/
生产工具
开发工具:PhpStorm 2016:http://www.jetbrains.com/phpstorm/

一、检测环境是否正常

打开Cmd,然后分别输入以下命令每个软件是否安装正确且版本是否符合要求。

1

2

3

4

5

6

7

php –v

composer -V

node –v

npm -v

二、创建Laravel项目

首先打开PhpStorm ,然后新建一个空项目,然后打开Terminal,我们用Composer来安装一个Laravel,在Terminal内输入
composer create-project --prefer-dist laravel/laravel temp

然后等待安装完毕。


安装完毕后会出现一个temp,然后我们将temp目录下所有文件剪切或拷贝到newproject根目录下,并删除temp即可(然后在Terminal输入一次 composer update 更新一下包防止出错)。

三、初次运行Laravel项目

安装好WAMPServer环境后运行 Laravel 项目。首先访问默认的地址localhost,然后点击 Add a Virtual Host,然后输入相应的参数,
如图

Virtual Host 的名字,其实就是我们浏览器访问时候要输入的域名,一般填写项目名,如newproject,
VirtualHost IP 一般填写127.x.y.z IP段,如127.0.0.8
Complete absolute path 就是我们这个项目的绝对路径,但是在项目最后记得加上/public,这样我们直接访问
http://newproject/ 时可以直接访问到public目录下的index.php,而无需输入 http://newproject/public/ 去访问,Laravel 官方(https://laravel.com/docs/5.4/)也是如此建议我们的,主要是为了考虑安全方面的问题。填好参数后然后点击Start the creation of the VirtualHost 创建VirtualHost,创建好后,你可以重开WAMPServer一次或Refresh。

然后在浏览器内输入http://newproject/ 访问当前项目,运行成功。


四、初次运行Vue组件

为了保证接下来的操作无其他影响,首先在Terminal输入 npm install ,来刷新项目内的nodejs module,这个过程会比较漫长。。。

因为Laravel 用上了vue,而vue基于nodejs,需要用到构建工具gulp或webpack。而vue官方推荐用webpack来构建vue的代码,所以从5.4开始Laravel 抛弃gulp改用webpack来构建JavaScript代码,并用Laravel Mix 来编译SASS/Less成纯CSS代码。
这样我们就可以在Laravel项目根目录看到一下几个文件:webpack.mix.js(Mix编译SASS/Less 引用文件)、resources/assets/js/app.js(Vue组件的实例化文件或其他用途)、resources/assets/js/bootstrap.js(构建js代码的源构建引导js代码文件)、public/js/app.js(webpack 构建后的js代码文件)、public/js/app.js(Mix 编译后的css代码文件)。
接下来找到resources/views/welcome.blade.php ,删除部分无用内容,仅留html结构,然后引用 public/js/app.js,然后引用resources/assets/js/app.js 中被声明的vue component(http://vuejs.org/v2/guide/)。

然后在Terminal 输入 npm run dev  编译,然后打开浏览器再次输入http://newproject/ 访问成功。

Laravel 5.4+Vue.js 初体验:Laravel下配置运行Vue.js的更多相关文章

  1. node.js 初体验

    node.js 初体验 2011-10-31 22:56 by 聂微东, 174545 阅读, 118 评论, 收藏, 编辑 PS: ~ 此篇文章的进阶内容在为<Nodejs初阶之express ...

  2. 范仁义web前端介绍课程---4、html、css、js初体验

    范仁义web前端介绍课程---4.html.css.js初体验 一.总结 一句话总结: html:就是网站的骨架,比如div标签.a标签等 css:style标签或者style属性里面的就是css j ...

  3. Online开发初体验——Jeecg-Boot 在线配置图表

    Online开发——初体验(在线配置图表) 01 通过JSON数据,快速配置图形报表 02 通过SQL数据,快速配置图形报表 03 图表模板配置,实现不同数据源图表合并展示 04 图表布局,支持单排. ...

  4. vue.js 初体验— Chrome 插件开发实录

    欢迎大家关注腾讯云技术社区-博客园官方主页,我们将持续在博客园为大家推荐技术精品文章哦~ 作者:陈纬杰 背景 对于经常和动画开发打交道的开发者对于Animate.css这个动画库不会陌生,它把一些常见 ...

  5. vue.js——初体验

    看到最近很火的vue.js,于是开启了自己人生中首篇翻译之路,才意识到这个纯英文版的的确没有中文的通俗易懂~~~~~~不过, 还是硬着头皮把这篇英文版的博客给翻译完了,希望可以帮助自己的同时也方便别人 ...

  6. MVC + Vue.js 初体验(实现表单操作)

    Vuejs http://cn.vuejs.org/ Vue.js(读音 /vjuː/, 类似于 view) 是一套构建用户界面的 渐进式框架.与其他重量级框架不同的是,Vue 采用自底向上增量开发的 ...

  7. Knockout.js初体验

    前不久在网上看到一个轻量级MVVM js类库叫Knockout.js,觉得很好奇,搜了一下Knockout.js相关资料,也初体验了一下,顿时感觉这个类库的设计很有意思.接下来就搞清楚什么是Knock ...

  8. windows 10 下配置安装node.js

      环境配置 node.js windows10 25.5k 次阅读  ·  读完需要 6 分钟 5 在去年就自己配置安装过node.js,但是使用npm安装模块时安装成功后调用require('mo ...

  9. impress.js初体验

    概述 如果你已经厌烦了使用PowerPoint制作PPT,那么impress.js是一个非常好的选择,用它做的PPT更加直观,效果也非常的不错.装X是需要一定代价的,不过如果你是个前端爱好者那么一切就 ...

随机推荐

  1. Bogart gSub.vb

    '--------------Job No 0900408 -------------- '--DIM PART ONE ONLINE Update Order Qty '''主要新加過程名 Refr ...

  2. python聚合云图

    今天一时兴起,想用python爬爬自己的博客,通过数据聚合,制作高逼格的云图(对词汇出现频率视觉上的展示),看看最近我到底写了啥文章. 一.直接上几张我的博客数据的云图 1.1 爬取文章的标题的聚合 ...

  3. C# WEB.API 接收并解析保存base64格式的图片

    using System; using System.Collections.Generic; using System.Drawing; using System.IO; using System. ...

  4. 1.mysql ERROR 1045 (28000): 错误解决办法

    转自:https://www.cnblogs.com/jpwz/p/6061214.html ERROR 1045 (28000): Access denied for user 'ODBC'@'lo ...

  5. android中拷贝assets下的资源文件到SD卡中(可以超过1M)

    很多手机游戏,在安装APK之后都得需要下载相应的资源包,然后才能进入游戏. 有这样一个需求:就是游戏中需要的资源包打在APK内,随apk一起进行安装到手机中. 这样就不需要,在安装APK之后,去下载资 ...

  6. 管道限流利器pv

    pv 是什么 可不是 page view,是pipe viewer,管道偷窥器的缩写.这个东西的源站点在google code上,需要的话可以访问pv 的官网 . 这个东西的官方手册页(man pv或 ...

  7. 面向对象三大特性一一封装(encapsulation)

    为什么要封装? 我们看电视,只要按一下开关和换台就行了.有必要了解电视的内部结构吗?有必要了解显像管吗? 封装是为了隐藏对象内部的复杂性,只对外公开简单的接口.便于外界调用,从而提高系统的可扩展性,可 ...

  8. Electron mouse events 参数解析

    1.https://electronjs.org/docs/api/web-contents 2.通常用: monitorEvents(document.body, 'mouse')  检测正常的值: ...

  9. form 表单排序

    <html>  <head></head>  <body>   <form class="form-inline">  ...

  10. mysql 常用option

    [mysql 常用option] --host=host_name, -h host_name Connect to the MySQL server on the given host. --por ...