1. 修改 app.js 文件，渲染组件
window.Vue = require('vue');
// Vue.component('example', require('./components/Example.vue')); // 注释掉
import Hello from './components/Hello.vue'; // 引入Hello 组件
说明：app.js 是构建 Vue 项目的主文件，最后所有的组件都会被引入到这个文件，在引入所有组件之前，bootstrap.js 文件做了一些初始化的操作。同时，因为有了 window.Vue = require(‘vue’) 这句话，就不再需要使用 import Vue from ‘vue’ 重复导入 Vue 了。
2. 新建 Laravel 视图文件，和 Vue 交互
assets 函数会直接使用所填路径去 public 文件夹下找文件，而 mix 函数会自动加载带 hash 值的前端资源。
3. npm run dev
该命令默认会去执行根目录下的 webpack.mix.js 文件，使用 Laravel 提供的 Laravel Mix 编译资源，并将编译好的资源放在根目录 public 文件夹下。
4. 添加组件
以后如果要添加组件，只需在 resources/assets/js/components 目录下新建 vue 文件，在 resources/assets/js/router/index.js 文件里引入，然后就可以通过路由访问了。
5. 代码拆分
代码拆分是将一些不经常变动的代码提取出来，以避免每次都要重新编译，如果你频繁更新应用的 JavaScript，需要考虑对 vendor 库进行提取和拆分，这样的话，一次修改应用代码不会影响 vendor.js 文件的缓存。
Laravel Mix 的 extract 方法可以实现这样的功能：
修改项目根目录下的 webpack.mix.js 文件
mix.js('resources/assets/js/app.js', 'public/js')
.sass('resources/assets/sass/app.scss', 'public/css')
.extract(['vue','axios']);
extract 方法接收包含所有库的数组或你想要提取到 vendor.js 文件的模块，使用上述代码作为示例，Mix 将会生成如下文件：
public/js/manifest.js // Webpack manifest runtime
public/js/vendor.js // vendor 库
public/js/app.js // 应用代码
同时修改 resources/views/index.blade.php 文件为
全局的 mix 函数会根据 public/mix-manifest.json 中的路径去加载对应的文件，同时也要注意引入三个 js 文件的顺序，以避免出错。
网友评论