Rumah > pembangunan bahagian belakang > tutorial php > 用VueJS+webpack+semantic-UI+Laravel开发单页应用

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

WBOY
Lepaskan: 2016-06-23 13:09:54
asal
2054 orang telah melayarinya

**实验性项目**https://github.com/zgldh/vuejs-laravel结合当前最酷的几样玩意儿,制作单页面Web APP。# vuejs-laravelVueJS + 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服务器即可浏览。### 参考资料- Laravel: [http://www.laravel.com](http://www.laravel.com)- VueJS:  [http://www.vuejs.org](http://www.vuejs.org)- Webpack: [http://webpack.github.io](http://webpack.github.io)- Semantic-UI: [http://semantic-ui.cn](http://semantic-ui.cn)待续
Salin selepas log masuk

sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan