我們可以看一下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>
重新訪問瀏覽器,能看到下圖效果,說明你配置成功了