文档章节

用VueJS+webpack+semantic-UI+Laravel开发单页应用

zgldh
 zgldh
发布于 2016/04/14 23:30
字数 306
阅读 2988
收藏 42

实验性项目

https://github.com/zgldh/vuejs-laravel

结合当前最酷的几样玩意儿,制作单页面Web APP。

vuejs-laravel

VueJS + webpack + semantic-UI + Laravel

  • 前后分离的快速开发框架。
  • 自带 Laravel 基础的账号系统。
  • 前端单页面Web应用
  • Webpack 构建前段页面
  • 使用 babel 来支持 ECMAScript6
  • 使用 Vue 的单文件组件
  • 使用 http-proxy 来解决前后端在开发模式下的Cookie问题。

安装

  1. 克隆代码

  2. 安装后台

        cd backend
        composer install
        // https://laravel.com/docs/5.2
        php artisan key:generate
        php artisan migrate
    
  3. 配置Web服务器,需要支持 PHP5.6 以上。 例如域名为 vuejs-laravel。服务器 root 配置到项目的public目录下。(千万注意不是backend/public)

  4. 安装前台

        cd frontend
        npm install
    
    
  5. 配置前台后台代理。打开 frontend/build/dev-server.js, 修改变量 devBackendDomain 为第三步的域名。

  6. 完毕

开发

    cd frontend
    npm run dev

然后访问 http://localhost:8080

frontend/src 目录包含了前端代码。代码改动能实时反映在浏览器里,我百思不得其解。

backend 目录里面就是典型的Laravel后端代码

发布

    cd frontend
    npm run build

然后编译过的前端代码就出现在 public 目录下。访问你本地的Web服务器即可浏览。

参考资料

待续

© 著作权归作者所有

zgldh
粉丝 101
博文 36
码字总数 47009
作品 2
高级程序员
私信 提问
加载中

评论(3)

SnowFlake
SnowFlake
79
ezburg
ezburg
0 楼主威武!
zgldh
zgldh 博主
别忘了把域名加入开发机的hosts文件里
相对于传统网站,单页Web应用的优势在哪里?

什么是单页应用? 单页应用是指在浏览器中运行的应用,它们在使用期间不会重新加载页面。像所有的应用一样,它旨在帮助用户完成任务,比如“编写文档”或者“管理Web服务器”。可以认为单页应...

生气的散人
2014/08/26
1K
1
React生态渐进系列-React-Router

首先,确实很久没有写过文章了,感觉很多东西需要重新梳理一遍,所以首先从React项目的基础生态圈,开始慢慢的梳理这些前端项目的知识点.这次便详细的梳理一下路由的知识点. 单页应用(SPA) 提到前...

pacopc
2018/07/31
0
0
全新单页JavaScript框架iceJS

单页Web应用作为新一代Web模式,为用户提供了更流畅的体验满足感。早在Chrome5、IE8和Firefox3的年代就可以通过hash技术实现单页Web应用,而HTML5新history API的出现让单页Web应用从幕后迅速...

JOU_icejs
2017/12/15
0
0
Webpack实战-管理多个单页应用

引入问题 上一节3-9为单页应用生成HTML中只生成了一个 HTML 文件,但在实际应用中一个完整的系统不会把所有的功能都做到一个网页中,因为这会导致这个网页性能不佳。 实际的做法是按照功能模...

2017/12/22
0
0
有奖试读&征文——我们在互联网上奋斗的故事

互联网是一个年轻的行业,同时也是一个推陈出新、不断进化的行业。 中国互联网行业在最近的十五年里,以怎样的方式在“进化”。我相信很多奋斗在互联网战线上的你们最深有感触。读一读《进化...

生气的散人
2014/10/14
88
0

没有更多内容

加载失败,请刷新页面

加载更多

微服务架构一直火,为什么服务化要搞懂?

微服务架构,这 5 年左右一直被认可,是软件架构的未来方向。需要大家理解的是,为什么需要服务化。比如微服务架构对企业来说,带来什么价值?有啥弊端? 这里浅谈一下微服务架构,主要还是在...

泥瓦匠BYSocket
32分钟前
3
0
总结:单机与分布式

传统计算方案演变 1、单机并行运算 1,打开数据源 2,统计出有多少个文件。 3,为每个文件执行相同的统计命令 4,等待所有命令执行成功。 5,合并统计后结果输出或执行进一步统计 2、分布式并...

浮躁的码农
43分钟前
5
0
关于怎么解决CENTOS7没有ETH0网卡这个问题

CentOS7系统安装完毕之后,输入ifconfig命令发现没有eth0,不符合我们的习惯。而且也无法远程ssh连接。 1.进入目录/etc/sysconfig/network-scripts/ 2.将文件ifcfg-ens33重命名为ifcfg-eth0;...

无名氏的程序员
49分钟前
5
0
HTML5 Web Storage 存储介绍

Web Storage是HTML5 API提供一个新的重要的特性; 最新的Web Storage草案中提到,在web客户端可用html5 API,以Key-Value形式来进行数据持久存储; 目前主要的浏览器已经支持该功能: 常见的...

前端老手
57分钟前
5
0
安装mxnet出现的错误

我出现下面的错误:是因为我前面的安装步骤都正确,只是这一步出现错误,sudo python setup.py install 其实我看了下我默认的python是3.6,是大于3.5 ,改为sudo python3 setup.py install就...

南桥北木
59分钟前
5
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部