Lrave + Vue

1.创建larave项目

composer create-project laravel/laravel --prefer-dist

2.创建vue项目
vue init webpack 项目名
3.打开vue项目,把src下的文件全部复制(不是整个src文件夹)。
打开larave项目清空resources/assets/ ,将文件复制到resources/assets/下打开larave文件夹根目录的webpack.mix.js,将原来的注释下面的代码删除。添加代码:

mix.js('resources/assets/main.js','public/js').extract(['vue'])

.js(vue的入口文件,打包编译后的文件).extract(需要分离的代码模块)
larave官方推荐extract分离代码后会生成这几个文件[public/js/manifest.js]

public/js/manifest.js:Webpack manifest runtime
public/js/vendor.js:vendor 库
public/js/main.js:应用代码一般来说manifest.js和vendor.js是不会变的,变的只是应用代码main.js,
这样每次代码更新时只会打包应用代码。
4.修改模板文件
打开larave项目下的esources/views/welcome.blade.php文件用下面的代码覆盖原来的代码。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd](http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd)"><html xmlns="[http://www.w3.org/1999/xhtml](http://www.w3.org/1999/xhtml)" xml:lang="en"><head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <title>Title</title></head><body><div id='app'></div><script src="{{ [asset('js/manifest.js')](http://asset%28%27js/manifest.js')) }}"></script><script src="{{ [asset('js/vendor.js')](http://asset%28%27js/vendor.js')) }}"></script><script src="{{ [asset('js/main.js')](http://asset%28%27js/main.js')) }}"></script></body></html>

5.下载vue依赖包
打开larave更目录下的package.json将devDependencies 下的jquery和bootstrap这两个用不到的库删除(vue官方不推荐使用jquery)。
打开命令行执行下面两个命令:

npm install  npm install vue-router

依赖下完之后运行 npm run dev这时在public/js下生成编译后的文件,在浏览器中访问public/index.php。

npm run watch-poll

这个命令有点用处,它会自动检查到前端代码变化之后自动打包。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • GitChat技术杂谈 前言 本文较长,为了节省你的阅读时间,在文前列写作思路如下: 什么是 webpack,它要...
    萧玄辞阅读 12,744评论 7 110
  • 在实现 egg + vue 服务端渲染工程化实现之前,我们先来看看前面两篇关于Webpack构建和Egg的文章: ...
    hubcarl阅读 6,071评论 0 19
  • 每天最幸福的事莫过于每晚躺床上悠闲地看会娱乐短视频了,从来没这么迷恋过我的床,一躺再要起来,就得全凭意志了。不能喊...
    唯i阅读 134评论 0 0
  • 心,在枯燥乏味的雨夜淋湿了翅膀,沉重无力,黎明的曙光唤醒时空之旅,微醉的眼神迷离,懒懒的伸展运动梳理一下林...
    艳青阅读 1,372评论 4 4
  • 你有没有过这种情况:比如,突然不开心,或者突然不想说话,或者是想一首歌单曲循环一下午,又或者想抱抱自己…… 大概孤...
    Han小小小阅读 246评论 0 0