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
这个命令有点用处,它会自动检查到前端代码变化之后自动打包。