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 = falseVue.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