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

 

先使用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