Laravel5.5+vue+elementUI

時間 2019-12-01

標籤 laravel5.5+vue+elementui laravel vue elementui 简体版

原文原文鏈接

說明：php

網上存在不少關於項目搭建的教程，可是本人是初次搭建項目，因此想記錄一下過程，避免之後再次踩坑css

注意：html

本教程項目的搭建是基於laravel5.5版本，如今最新的laravel版本是6.5，而6.5版本resource/asstes沒有asstes目錄前端

搭建laravel項目以及指定laravel的版本號,請參考教程：https://juejin.im/post/5dba81d0f265da4d525fd2ee#heading-12vue

若是你的larave項目搭建完成，而且執行 php artisan serve 可以正常運行項目，請開始下面的步驟：webpack

安裝前端依賴庫

進入laravel項目，執行ios

cnpm installlaravel

修改laravel路由

修改 routes/web.php 文件爲web

Route::get('/', function () {
    return view('index');
});
複製代碼

新建Hello.vue

在 resource/asstes/js/components/Hello.vuevue-router

<!--  -->
<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>
複製代碼

修改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 了

新建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 前端資源的緩存刷新相關的

編譯前端組件
```
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
安裝

cnpm i element-ui -S

在app.js中引入element

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

在文件中使用

在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

安裝

cpm install vue-router --save-dev

配置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))
    }]
});
複製代碼

建立項目的啓動頁面 App.vue

<template>
  <div>
        <h1>Hello, Vue!</h1>
       <router-view></router-view> <!-- 路由引入的組件將在這裏被渲染 -->
  </div>
</template>
複製代碼

注入到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 文件的順序，以免出錯。

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。

Laravel5.5+vue+elementUI

安裝前端依賴庫

修改laravel路由

新建Hello.vue

修改app.js文件，渲染組件

新建laravel視圖，和vue交互

編譯前端組件

代碼拆分