laravel 使用 vue 及 Ant-design-vue 依赖（Laravel5.6+Vue+Ant-design-vue集成搭建）

最新推荐文章于 2024-04-23 09:46:01 发布

芥焉丶

最新推荐文章于 2024-04-23 09:46:01 发布

阅读量2.2k

点赞数

分类专栏： web前端 PHP laravel

原文链接：https://www.gitshow.cn/a/1115

版权

PHP 同时被 3 个专栏收录

23 篇文章 0 订阅

订阅专栏

web前端

8 篇文章 0 订阅

订阅专栏

laravel

4 篇文章 0 订阅

订阅专栏

在这里插入图片描述
我们可以看一下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

芥焉丶

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
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文件也可以去根目录中的 .
复制链接

扫一扫