laravel 使用 vue 及 Ant-design-vue 依賴(Laravel5.6+Vue+Ant-design-vue集成搭建)

在這裏插入圖片描述
我們可以看一下app.js的代碼,發現他是引入了vue,然後註冊了一個組件,也就時Example.vue , Example.vue 中輸出兩句話,這是一個完整的組件,我們可以直接使用。
在這裏插入圖片描述
我們找到resources\views\welcome.blade.php 文件,將其修改爲下面的代碼,也就是吧原來的HTML刪了,添加一個id爲app的div,在其中使用app.js 中註冊的組件,需要注意的就是要添加crsf-Token的驗證meta標籤,和引入 app.js 文件,這個js文件也可以去根目錄中的 webpack.mix.js 文集中修改。

<!doctype html>
<html lang="{{ app()->getLocale() }}">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta name="csrf-token" content="{{ csrf_token() }}">
 
        <title>Laravel</title>
 
        <!-- Fonts -->
        <link href="https://fonts.googleapis.com/css?family=Raleway:100,600" rel="stylesheet" type="text/css">
 
    </head>
    <body>
        <div id="app">
            <example-component></example-component>
        </div>
    </body>
    <script src="/js/app.js"></script>
</html>

然後,我們npm run dev 一下然後到瀏覽器中看一下,我配置的虛擬主機訪問地址是 vuxtest.cn npm編譯好之後我們在瀏覽器查看發現已經安裝好了。

Ant-design-vue安裝
import Vue from 'vue'
import Antd from 'ant-design-vue'
import 'ant-design-vue/dist/antd.css'
Vue.config.productionTip = false

Vue.use(Antd)

在這裏插入圖片描述

修改resource/js/components/ExampleComponent.vue

<template>
  <div id="components-button-demo-button-group">
    <h4>Basic</h4>
    <a-button-group>
      <a-button>Cancel</a-button>
      <a-button type="primary">OK</a-button>
    </a-button-group>
    <a-button-group>
      <a-button disabled>L</a-button>
      <a-button disabled>M</a-button>
      <a-button disabled>R</a-button>
    </a-button-group>
    <a-button-group>
      <a-button type="primary">L</a-button>
      <a-button>M</a-button>
      <a-button>M</a-button>
      <a-button type="dashed">R</a-button>
    </a-button-group>

    <h4>With Icon</h4>
    <a-button-group>
      <a-button type="primary">
        <a-icon type="left" />Go back
      </a-button>
      <a-button type="primary">
        Go forward<a-icon type="right" />
      </a-button>
    </a-button-group>
    <a-button-group>
      <a-button type="primary" icon="cloud" />
      <a-button type="primary" icon="cloud-download" />
    </a-button-group>
  </div>
</template>
<style>
#components-button-demo-button-group h4 {
  margin: 16px 0;
  font-size: 14px;
  line-height: 1;
  font-weight: normal;
}
#components-button-demo-button-group h4:first-child {
  margin-top: 0;
}
#components-button-demo-button-group .ant-btn-group {
  margin-right: 8px;
}
</style>

重新訪問瀏覽器,能看到下圖效果,說明你配置成功了

在這裏插入圖片描述

原文地址:https://www.gitshow.cn/a/1115

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章