Laravel5.5+vue+elementUI

sizuka
607 阅读4分钟

说明：

网上存在很多关于项目搭建的教程，但是本人是初次搭建项目，所以想记录一下过程，避免以后再次踩坑

注意：

本教程项目的搭建是基于laravel5.5版本，现在最新的laravel版本是6.5，而6.5版本resource/asstes没有asstes目录

搭建laravel项目以及指定laravel的版本号,请参考教程：https://juejin.cn/post/6844903984524689421#heading-12

如果你的larave项目搭建完成，并且执行 php artisan serve 能够正常运行项目，请开始下面的步骤：

  1. 安装前端依赖库

    进入laravel项目，执行

    cnpm install

  2. 修改laravel路由

    修改 routes/web.php 文件为

    Route::get('/', function () {
    return view('index');
});

  3. 新建Hello.vue

    在 resource/asstes/js/components/Hello.vue

    <!--  -->
<template>
  <div class="">
      <h1>Hello,Laravel!</h1>
      <p class="hello">{{ msg }}</p>
  </div>
</template>

<script>
export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    //这里存放数据
    return {
        msg: "Laravel+vue+elementUI",
    };
  }
};
</script>
<style lang="scss" scoped></style>

  4. 修改app.js文件，渲染组件

    require('./bootstrap');

window.Vue = require('vue');

// Vue.component('example-component', require('./components/ExampleComponent.vue'));

import Hello from './components/Hello.vue';

const app = new Vue({
    el: '#app',
    render: h => h(Hello)
});

    说明：app.js 是构建 Vue 项目的主文件，最后所有的组件都会被引入到这个文件，在引入所有组件之前，bootstrap.js 文件做了一些初始化的操作。同时，因为有了 window.Vue = require(‘vue’) 这句话，就不再需要使用 import Vue from ‘vue’ 重复导入 Vue 了

  5. 新建laravel视图，和vue交互

    resource/views/index.blade.vue

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div id="app"></div>
    <script src="{{ mix('js/app.js') }}"></script>
</body>
</html>

    说明：你可能在其他教程中看到有的在使用 assets 函数，这两个函数的主要区别就是 assets 函数会直接使用所填路径去 public 文件夹下找文件，而 mix 函数会自动加载带 hash 值的前端资源。这是和 Laravel 前端资源的缓存刷新相关的

  6. 编译前端组件

    npm run watch 或者运行  npm run dev

    二者的区别：每次修改过vue文件之后，都需要先执行 npm run dev 编译项目，但是这样比较麻烦， npm run watch 能够监听改变的文件，从而做到自动编译

    **注意：需要同时打开两个终端，一个终端运行 ** npm run watch 另外一个终端运行: php artisan serve 启动项目 (当然也可以自己去配置，使用域名访问项目，并且不用一直开着终端运行 php artisan serve)

    到这里 Laravel+vue的项目构建已经完成了，下面是讲解在项目中使用 element-ui和vue-router

    引入elementUI

  7. 安装

    cnpm i element-ui -S

  8. 在app.js中引入element

    import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);

  9. 在文件中使用

    在Hello.vue中使用element的组件
在app.js中引入Hello.vue; // import Hello from './components/Hello.vue';
注入到页面中：
const app = new Vue({
    el: '#app',
    router,
    render: h => h(Hello)
});

    引入vue-router

  10. 安装

    cpm install vue-router --save-dev

  11. 配置vue-router

     // 在assets/js下新建：router/index.js

import Vue from 'vue';
import VueRouter from 'vue-router';
Vue.use(VueRouter);
import Hello from './../components/Hello.vue';

export default new VueRouter({
    saveScrollPosition:true, // 记住页面滚动的位置，H5适用
    routes:[{
        name:'hello',
        path:'/hello',
        component:Hello
        // component: resolve => void(require(['../components/Hello.vue'], resolve))
    }]
});

  12. 创建项目的启动页面 App.vue

    <template>
  <div>
        <h1>Hello, Vue!</h1>
       <router-view></router-view> <!-- 路由引入的组件将在这里被渲染 -->
  </div>
</template>

  13. 注入到vue中

    在app.js中引入vue-router

import App from './App.vue';
import router from './router/index.js';

const app = new Vue({
    el: '#app',
    router,
    render: h => h(App)
});

代码拆分

代码拆分是将一些不经常变动的代码提取出来，以避免每次都要重新编译，如果你频繁更新应用的 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 文件为

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <title>Larvuent</title>
</head>
<body>
    <div id="app"></div>
      
    <script src="{{ mix('js/manifest.js') }}"></script>
    <script src="{{ mix('js/vendor.js') }}"></script>
    <script src="{{ mix('js/app.js') }}"></script>
</body>
</html>

全局的 mix 函数会根据 public/mix-manifest.json 中的路径去加载对应的文件，同时也要注意引入三个 js 文件的顺序，以避免出错。

avatar
文章
阅读
粉丝