Vue引入Ant-Design组件库并且使用JSX编写

最新推荐文章于 2025-03-08 22:49:08 发布

yf_d

最新推荐文章于 2025-03-08 22:49:08 发布

阅读量7.1k

点赞数

分类专栏： Vue

本文链接：https://blog.youkuaiyun.com/u010913414/article/details/99442245

版权

本文介绍如何在Vue-cli3项目中引入Ant Design，并利用JSX进行组件编写。首先创建Vue项目，接着安装Ant Design并配置。在App.vue引入样式，按需引入组件。Vue中使用JSX需要通过render函数，注意事件绑定和属性绑定的调整。通过示例展示了一个使用JSX编写的antDemo，强调了在JSX中如何处理自定义事件和属性绑定。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

先使用Vue-cli3脚手架创建项目

yarn global add @vue/cli

创建项目

vue create antd-demo

安装ant-design

yarn add ant-design-vue

跑起来

yarn serve

yarn build

开始准备Ant的引入

引入样式表：App.vue就可以了

  import 'ant-design-vue/dist/antd.css'

按需引入：记得使用Vue.use安装

 import {Button, Icon, Row, Col, Divider} from 'ant-design-vue'；

  Vue.use(Button).use(Icon).use(Row).use(Col).use(Divider);

然后就可以使用JSX了。

由于之前一直使用React，最好使的就是JSX语法了，Vue里推崇template模板写法，很不习惯，但是模板语法提供的语法糖：v-指定在JSX里都不可以用了。尤其是v-model ，需要我们自己去实现管理，暂时忽略。

Vue也提供了render函数进行渲染，和React一样，我们想编写JSX，发现Ws里不识别了，因为现在的后缀是xx.Vue不是xx.jsx

可以做这么做：这样就可以在Render的return里写html了。

<script type="text/jsx">

下面是一个很长的antDemo，使用的是JSx写法，其中自定事件要注意：没有v-on和@ 我们需要遵循驼峰写法，如 @click 在JSx只要写成 onClick 自定义的 close事件要写成 onClose 一般都是加个on。

而属性也没有v-bind 和: 需要换成 {this.xx},JSX会识别的，有React经验的应该很熟悉，至于循环我使用的是map函数遍历。

而if可以使用三元运算来解决。

<script type="text/jsx">
    import Vue from 'vue'
    import {Button, Icon, Row, Col, Divider, Affix, Dropdown, Menu, Drawer, Modal, Popconfirm, Spin, BackTop

    ,Table
    }
    from
    'ant-design-vue'
    import ACol from "ant-design-vue/es/grid/Col";
    import ARow from "ant-design-vue/es/grid/Row";

    Vue.use(Button).use(Icon).use(Row).use(Col).use(Divider).use(Affix).use(Dropdown).use(Menu).use(Drawer).use(Modal).use(Popconfirm).use(Spin)
        .use(BackTop).use(Table);
    export default {
        name: "demo",
        render() {
            return (
                <div class="scroll-box">
                    <a-divider>按钮使用</a-divider>
                    <a-button type="primary">Button</a-button>
                    <a-divider>图标使用</a-divider>
                    <a-icon type="dribbble" style="color:red" spin/>

                    <a-divider>栅格布局</a-divider>
                    <a-row>
                        <a-col xs={4} md={8}>这是第1个</a-col>
                        <a-col xs={4} md={8}>这是第2个</a