我们可以看一下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>
重新访问浏览器,能看到下图效果,说明你配置成功了