这次的项目是一个管理后台,介于以下两点原因:
所以决定用laravel(后端同学熟悉的后端脚手架) + webpack + vue(入手较为容易的JS框架)
查看laravel的文档得知laravel 5.5(现在后端项目普遍用的版本)已经内嵌laravel-mix,提供的API支持利用webpack编译vue了。先试试能不能满足我们的要求:
结论
还是直接用webpack吧
打包编译
大概了解一下,laravel中跟前端关系最大的部分就是route(php)将请求解析给某个controller(php),controller组织数据后结合views/ .blade.php(html)来render出一个页面, .blade.php里引用css/js/image等静态资源丰富前端页面展示及完成前端功能。从上可知,从views开始的流程才和前端有较大关系。所以打包编译的过程可以简述成:
打包编译完成后,只需要将route和controller简单配置好即可。
生产环境(包括测试环境)和开发环境所用前端服务
生产环境不用多说,有现成的服务,只要完成html和所需静态资源的打包编译,即可。
至于开发环境,为了方便本地开发,可以起一个简易node服务来作web服务。
https://git.qufenqi.com/CM/component/auto.project.template
(开林搭的一个汽车项目laravel基础框架)copy一份现有的过来。以下简称这个项目的根目录为 proot
。 .git
文件夹替换到 proot
下,可以删掉刚clone下来的新仓储,并把laravel脚手架改名成新仓储的名称。 5.5.3
,与之对应的php版本必须≥7,但大部分同学的Mac自带的php版本并不满足,所以,要么更新本地php(很麻烦),要么找个php版本满足开发机直接操作。 cd ${proot} mv .env.example .env php artisan key:generate mv .env .env.example
smb://${开发机ip}
-> 连接 -> 输入用户名密码 -> 点自己的宗卷 -> 好 -> 关闭Finder -> 打开sublime -> 左上角菜单File -> Open -> 左侧Share底下的开发机ip -> 找到自己宗卷下的对应项目。 proot
下生成一个 sftp-config.json
文件,必须在.gitignore追加此文件名,告知git忽略此文件。 laravel仓储 ├─ ... ├─ public // 编译产出的静态文件目录 │ ├─ css │ ├─ fonts │ ├─ image │ └─ js ├─ resources │ ├─ assets // 代码源文件 │ ├─ build // 编译相关 │ ├─ ... │ └─ views // HTML模板文件、 │ // 编译生成的HTML文件、 │ // laravel自用的HTML文件 ├─ routes // laravel路由文件 ├─ ...
writeToDisk(filePath) { return /blade/.php$/.test(filePath); }当然html-webpack-plugin的作者还写了个html-webpack-harddisk-plugin,是可以强行将模板文件写到磁盘中的,但有点鸡肋。
读懂文档搞清楚流程永远比动手实践来得容易,且行且珍惜。