zoukankan      html  css  js  c++  java
  • Vue3学习(二)之 集成Ant Design Vue

    一、集成Ant Design Vue

    npm install ant-design-vue@2.0.0-rc.3 --save
    

    兼容性

    Ant Design Vue 2.x 支持所有的现代浏览器。

    如果需要支持 IE9+,你可以使用 Ant Design Vue 1.x & Vue 2.x。

    对于 IE 系列浏览器,需要提供 es5-shim 和 es6-shim 等 Polyfills 的支持。

    二、组件的使用

    官网地址: https://2x.antdv.com/docs/vue/getting-started-cn

    1、完整引用

    在main.ts中修改内容如下:

    import { createApp } from 'vue';
    import Antd from 'ant-design-vue';
    import App from './App.vue';
    import 'ant-design-vue/dist/antd.css';
    import router from './router';
    import store from './store';
    //优点就是方便开发,缺点就是打包的时候会使文件较大(但不并影响什么)
    createApp(App).use(store).use(router).use(Antd).mount('#app')
    

    2、组件引用

    完整引入后,我们就能快乐的使用组件了,如果你之前使用过Vue2.0或者 Element UI相对上后会更快。

    三、组件使用示例

    我们来为home主页,添加一个按钮,如下图:

    1、我们在home主页做修改

    <template>
      <div class="home">
        <a-button type="primary" danger>Primary</a-button>
        <img alt="Vue logo" src="../assets/logo.png">
        <HelloWorld msg="Welcome to Your Vue.js + TypeScript App"/>
      </div>
    </template>
    
    <script lang="ts">
    import { defineComponent } from 'vue';
    import HelloWorld from '@/components/HelloWorld.vue'; // @ is an alias to /src
    
    export default defineComponent({
      name: 'Home',
      components: {
        HelloWorld,
      },
    });
    </script>
    
    

    2、重新启动服务查看效果

    双击server启动,查看结果如下图:

    四、写在最后

    本来很简单个事,可惜身体不佳(不能久坐),但是还是想坚持下来,只有技术你的投入,才会有产出,也不会骗你,踏实的去学习吧

  • 相关阅读:
    android cocos2d-x视频
    Android OpenGL 学习笔记 --开始篇
    Nginx配置详解
    扩展RBAC用户角色权限设计方案
    几种序列化与Get、Set方法的关系
    Kettle大量数据快速导出的解决方案(利用SQL导出百万级数据,挺快的)
    SpringBoot 标准集成MyBatis的2种方式
    Apache Commons io FileUtils 详解
    SpringBoot在工具类中读取配置文件(ClassPathResource)
    利用guava封装RateLimiter 令牌桶算法(AOP实现)
  • 原文地址:https://www.cnblogs.com/longronglang/p/15414971.html
Copyright © 2011-2022 走看看