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