美文网首页Web前端之路前端
《vue 3.0探险记》- 尝试安装And Design

《vue 3.0探险记》- 尝试安装And Design

作者: 张中华 | 来源:发表于2020-09-13 10:45 被阅读0次

    继上一篇:《vue 3.0探险记》- 尝试安装Element UI,我们发现element这是要跑路的节奏,那就赶紧找好下家,想一想饿了么被阿里给收购了,阿里有And Design, 一家公司确实不需要两种风格的UI。那接下来就看看And Design好了。打开And Design of Vue就看到了对vue 3.0的提示:



    那就尝试一下安装使用~

    第一步:安装Ant Design

    可以参照Ant Design快速上手:https://2x.antdv.com/docs/vue/getting-started-cn/

    npm i --save ant-design-vue@next
    

    第二步:在main.js中添加Ant Design 的引用

    我这里使用的是一次全部引用,也可以按需引用

    import { createApp } from 'vue'
    import App from './App.vue'
    import antd from 'ant-design-vue';
    
    import 'ant-design-vue/dist/antd.css'; // or 'ant-design-vue/dist/antd.less'
    
    const app = createApp(App);
    app
    .use(antd)
    .mount('#app');
    

    第三步: 使用

    在APP.vue中直接顶部添加一个Button

    <template>
      <a-button type="primary">
        Primary
      </a-button>
    
      <img alt="Vue logo" src="./assets/logo.png">
      <HelloWorld msg="Welcome to Your Vue.js App"/>
    </template>
    
    运行结果

    综上,当下Ant Design针对vue 3.0是可以使用的,而且Ant Design还在活跃的更新中,从github仓库的活跃度就可以看出:https://github.com/vueComponent/ant-design-vue

    相关文章

      网友评论

        本文标题:《vue 3.0探险记》- 尝试安装And Design

        本文链接:https://www.haomeiwen.com/subject/udpgektx.html