精华内容
下载资源
问答
  • ant-design-vue is an MIT-licensed open source project. In order to achieve better and sustainable development of the project, we expect to gain more backers. You can support us in any of the following...
  • 1、导入并配置ant-design-vue 官网说的十分清楚,我直接copy官网的操作 npm i --save ant-design-vue 在main.js中完整引入 ant-design-vue import Vue from 'vue'; import Antd from 'ant-design-vue'; import App ...

    1、导入并配置ant-design-vue

    官网说的十分清楚,我直接copy官网的操作

    npm i --save ant-design-vue
    

    在main.js中完整引入 ant-design-vue

    import Vue from 'vue';
    import Antd from 'ant-design-vue';
    import App from './App';
    import 'ant-design-vue/dist/antd.css';
    Vue.config.productionTip = false;
    
    Vue.use(Antd);
    
    /* eslint-disable no-new */
    new Vue({
      el: '#app',
      components: { App },
      template: '<App/>',
    });
    

    2、阿里巴巴矢量图标库创建项目

    在这里插入图片描述

    3、全局配置阿里巴巴矢量图标(也可以局部vue文件使用,单独导入component)

    在main.js中

    //全局引入阿里巴巴矢量图标
    import Icon from 'ant-design-vue/es/icon/index'
    const MyIcon = Icon.createFromIconfontCN({
      scriptUrl: '//at.alicdn.com/t/font_2253742_i247dt9fum.js' // 在 iconfont.cn 上生成
    });
    Vue.component('MyIcon', MyIcon);
    

    4、使用阿里巴巴矢量图标

    直接使用就行了
    在这里插入图片描述

    <my-icon style="color:#686868;font-size:58px;"type="icon-jiantou2"/>
    
    展开全文
  • [异常]npm install ant-design-vue --save - Vue

    千次阅读 2019-04-08 11:22:52
    如下操作均在 macOS 系统下进行的,Windows 环境下暂未...npm install ant-design-vue --save 异常如下: 解决办法: 在命令前加入 "sudo" 后面命令不变,命令如下: sudo npm install ant-design-vue --sa...

    如下操作均在 macOS 系统下进行的,Windows 环境下暂未尝试仅供参考。

    向 vue 项目中集成 ant-design 的时候执行如下命令出现异常

    npm install ant-design-vue --save

    异常如下:

     

    解决办法:

    在命令前加入 "sudo" 后面命令不变,命令如下:

    sudo npm install ant-design-vue --save

    结果如下:

     

    当前各版本如下:

     

    ——————

    以上便是此次内容的小结,希望能对大家有所帮助!

    展开全文
  • 1、首先我在创建项目的时候就选择了antd这个框架,所以插件那块会有一个antd-ui.js...npm i ant-design-vue 1、按需导入 import Vue from 'vue' import { Carousel } from 'ant-design-vue/lib'; import 'ant-des...

    1、所有文章优先发表在个人博客上: https://www.xdx97.com
    2、后续如果有修改的话,可能忘记更新到CSDN了,给你带来不便,抱歉。
    3、个人博客本篇文章地址 : https://www.xdx97.com/article/647074798064631808
    1、首先我在创建项目的时候就选择了antd这个框架,所以插件那块会有一个antd-ui.js
    在这里插入图片描述
    如果没有的话,可以npm安装一下antd,然后在plugins目录下建立一个antd-ui.js
    在这里插入图片描述

    npm i ant-design-vue
    

    配置按需导入

    1、配置JS
    在这里插入图片描述

    import Vue from 'vue'
    import Carousel from 'ant-design-vue/lib/carousel'; // 加载 JS
    import Spin from 'ant-design-vue/lib/spin'; // 加载 JS
    import Tag from 'ant-design-vue/lib/tag'; // 加载 JS
    import Icon from 'ant-design-vue/lib/icon'; // 加载 JS
    import Input from 'ant-design-vue/lib/input'; // 加载 JS
    import Button from 'ant-design-vue/lib/button'; // 加载 JS
    import Pagination from 'ant-design-vue/lib/pagination'; // 加载 JS
    import Modal from 'ant-design-vue/lib/modal'; // 加载 JS
    import Tooltip from 'ant-design-vue/lib/tooltip'; // 加载 JS
    import Steps from 'ant-design-vue/lib/steps'; // 加载 JS
    import Collapse from 'ant-design-vue/lib/collapse'; // 加载 JS
    import Divider from 'ant-design-vue/lib/divider'; // 加载 JS
    import message from 'ant-design-vue/lib/message'; // 加载 JS
    
    
    
    Vue.use(Carousel)
    Vue.use(Spin)
    Vue.use(Tag)
    Vue.use(Icon)
    Vue.use(Input)
    Vue.use(Button)
    Vue.use(Pagination)
    Vue.use(Modal)
    Vue.use(Tooltip)
    Vue.use(Steps)
    Vue.use(Collapse)
    Vue.use(Divider)
    Vue.prototype.$message = message;
    message.config({
        top: `70px`,
        duration: 2,
        maxCount: 3,
    });
    
    

    2、配置css
    在这里插入图片描述

    在这里插入图片描述
    最终效果
    在这里插入图片描述

    展开全文
  • ant-design-vue UI组件使用讲解

    万人学习 2019-06-10 11:26:25
    通过jeecg-boot项目实战,详细介绍 ant-design-vue UI组件使用,细致的讲解每个组件的用法,教你学会如何看ant-design-vue的官方文档。 对于初学入门者来讲,非常实用。
  • ant-design-vue-pro-master之前版本的源码,该版本支持多页签,实现页面页签显示,返回不刷新。新版本代码改动较大,此版本慎用,可参考多页签的实现方式;
  • ant-design-vue - Ant Design Of Vue vue-cropper - Picture edit @antv/g2 - AntV G2 Viser-vue - Antv/G2 of Vue Note: Yarn package management is recommended, the exact same version loaded with the ...
  • vue-cli ant-design-vue使用

    2020-06-02 14:55:00
    1、vue create antd-demo 2、修改src/main.js 修改 src/main.js,引入 antd 的按钮组件以及全部样式文件。...import Button from 'ant-design-vue/lib/button'; import 'ant-design-vue/dist/antd.css'; import ...

    1、vue create antd-demo

    2、修改src/main.js

    修改 src/main.js,引入 antd 的按钮组件以及全部样式文件。
    
    import Vue from 'vue';
    import Button from 'ant-design-vue/lib/button';
    import 'ant-design-vue/dist/antd.css';
    import App from './App';
    
    Vue.component(Button.name, Button);
    
    Vue.config.productionTip = false;
    
    new Vue({
      render: h => h(App),
    }).$mount('#app');
    

    3、修改src/App.vue

    修改 src/App.vue的 template 内容。
    
    <template>
      <div id="app">
        <img src="./assets/logo.png">
        <a-button type="primary">Button></a-button>
      </div>
    </template>
    ...
    

    我们现在已经把组件成功运行起来了,但是在实际开发过程中还有很多问题,例如上面的例子实际上加载了全部的 antd 组件的样式(对前端性能是个隐患)。
    此时我们需要对 vue-cli 的默认配置进行自定义。

    4、安装babel-plugin-import插件

    babel-plugin-import 是一个用于按需加载组件代码和样式的 babel 插件
    npm install babel-plugin-import

    5、修改babel.config.js文件

    修改babel.config.js文件,配置 babel-plugin-import
    
     module.exports = {
      presets: ["@vue/app"],
    +  plugins: [
    +    [
    +      "import",
    +      { libraryName: "ant-design-vue", libraryDirectory: "es", style: true }
    +    ]
    +  ]
    };
    

    6、修改src/main.js

    然后移除前面在 src/main.js 里全量添加的 import 'ant-design-vue/dist/antd.css'; 样式代码,并且按下面的格式引入模块。

      // src/main.js
      import Vue from 'vue'
    - import Button from 'ant-design-vue/lib/button';
    + import { Button } from 'ant-design-vue';
    - import 'ant-design-vue/dist/antd.css'
      import App from './App'
    
      Vue.component(Button.name, Button)
    
      Vue.config.productionTip = false
    
      new Vue({
        render: h => h(App)
      }).$mount("#app");
    

    7、vue.config.js

    不配置less-loader会报如下错误
    // https://github.com/ant-design/ant-motion/issues/44
    .bezierEasingMixin();
    ^
    Inline JavaScript is not enabled. Is it set in your options?
    in F:\iBlockChain\iblockchain-client\node_modules\ant-design-vue\lib\styl
    ————————————————
    版权声明:本文为CSDN博主「Urmsone」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。
    原文链接:https://blog.csdn.net/Urms_handsomeyu/article/details/105804303

    module.exports = {
        css: {
            loaderOptions: {
                less: {
                    javascriptEnabled: true
                }
            }
        }
    }
    
    展开全文
  • vue安装 ant-design-vue

    2020-11-24 19:24:06
    ant-design-vue 属于阿里下的 还在维护 使用步骤 终端执行命令 npm install --save ant-design-vue 或者 cnpm install --save ant-design-vue ``` 在src/main.js下全局注册 //
  • 基于vue-cli2引入ant-design-vue. vue-cli2构建的项目目录如下: 1.安装ant-design-vue. npm install ant-design-vue 2. 在src/main.js中引入组件和样式 import Vue from 'vue' import Antd from 'ant-...
  • Ant-design-vue + vue-i18n配置前端国际化

    千次阅读 热门讨论 2019-03-28 14:33:06
    项目基于Vue进行开发,使用了ant-design-vue框架,然后需要做国际化。此时做国际化需要考虑两方面的国际化,一个是ant-design-vue内部组件的国际化,一个是国际化我们的业务显示,业务显示我们选用vue-i18n进行国际...
  • Ant-Design-Vue 安装

    2021-04-19 18:06:10
    # 安装ant-design-vue最新版 npm install ant-design-vue --save # 安装ant-design-vue 指定版本 npm install ant-design-vue@2.1.2 --save # 配置 ant-design-vue import Antd from 'ant-design-vue'; import ...
  • vue-cli3.0 ant-design-vue快速上手

    千次阅读 2019-08-20 15:27:32
    在vue-ui中,安装插件:ant-design-vue 或者在vscdoe中输入: npm install ant-design-vue --save 2.vscode中输入: npm install babel-plugin-import --save-dev 3.配置babel.config.js module....
  • vue问题-ant-design-vue按需引入问题

    千次阅读 2020-11-10 17:00:28
    插件按需引入 ...在vue3.0如何引入ant-design-vue,我在ant-design-vue官方网站看到了,但是说明有问题。 我引入了babel-plugin-import插件,但是页面仍旧提示引入该插件,然后babel-plugin-import
  • 项目基于Vue-cli3.x进行开发,使用了ant-design-vue框架,然后需要做国际化。此时做国际化需要考虑两方面的国际化,一是ant-design-vue内部组件的国际化,二是国际化我们的业务显示,业务显示我们选用vue-i18n进行...
  • ant-design-vue的兼容问题

    万次阅读 热门讨论 2019-05-07 00:44:59
    ant-design-vue的兼容问题 问题:ant-design-vue不兼容ie浏览器 要求:ie兼容 >= 9 环境:vue cli3搭建项目,ant-design-vue@1.3.8 babel.config.js文件 module.exports = { presets: [ '@vue/app', // 兼容...
  • 蚂蚁设计学习专业版 项目设置 npm install 编译和热重装以进行开发 npm run serve 编译并最小化生产 npm run build 运行单元测试 npm run test:unit 整理和修复文件 npm run lint 自定义配置 请参阅。
  • ant-design-vue-pro

    千次阅读 2020-05-27 10:04:03
    有大佬用过ant-design-vue-pro这个框架嘛?求借阅一份路由文件~ 主要是写不了详情页,就是那种menu不展示的页面但是需要选中状态 多谢!
  • vue ui框架 ant-design-vue

    千次阅读 2019-12-31 12:32:00
    ant-design-vue 官方地址:http://vue.ant-design.cn/docs/vue/introduce-cn/
  • vite2 + vue3 + vuex + vue-router +打字稿+ ant-design-vue +模拟 推荐的IDE设置 + 。确保在设置中启用vetur.experimental.templateInterpolationService ! 如果使用[removed] 是当前处于RFC阶段的功能。要获得...
  • 开始从这里开始是用ant-design-vue组件写ant-design-vue-pro这个后台项目实现步骤的从零开始搭建的过程,视频地址,它采用了ant-desgin-vue的组件库作为素材开发,进一步提炼了中后台管理系统的产品原型,可以帮助...
  • import { PageHeaderWrapper } from '@ant-design-vue/pro-layout' components:{ PageHeaderWrapper } 页面引用: <page-header-wrapper :title="false"></page-header-wrapper>
  • ant-design-vue锚点

    2021-03-17 08:14:57
    ant-design-vue锚点 1.npm install ant-design-vue 2.main.js引入 import Antd from 'ant-design-vue'; import 'ant-design-vue/dist/antd.css'; Vue.config.productionTip = false; Vue.use(Antd); 3.使用· <...
  • English | 蚂蚁设计Vue Pro 适用于企业应用程序的即用型UI解决方案,作为Vue样板。 基于 预览: : 主页: : 文档: : 变更日志: : 常见问题解答: : ...git clone https://github.com/vueComponent/ant-
  • error in …/node_modules/_ant-design-vue@1.6.5@ant-design-vue/es/button/style/index.less Module build failed (from ./node_modules/less-loader/dist/cjs.js): // ...
  • /deep/.ant-card .ant-card-head { padding: 4px 32px; } 避免全局渲染可以在<style> 上加 scope属性, 或者自定类名 react: :global{ .ant-card .ant-card-head { padding: 4px 32px; } } 避免全局渲染可以...
  • Vue安装ant-design-vue和ElementUI

    千次阅读 2018-10-18 02:40:13
    npm install ant-design-vue --save 复制代码 或者 yarn add ant-design-vue 复制代码 安装ant-design-vue相关插件之后,然后在项目的核心文件引入相关的东西,在src目录下的main.js引入 import Antd from 'ant-...
  • 项目基于Vue-cli3.x进行开发,使用了ant-design-vue框架,然后需要做国际化。此时做国际化需要考虑两方面的国际化,一是ant-design-vue内部组件的国际化,二是国际化我们的业务显示,业务显示我们选用vue-i18n进行...
  • Vue项目如何ant-design-vue框架?

    千次阅读 2020-12-28 20:52:15
    cnpm i --save ant-design-vue moment // 安装最新版的ant-design-vue,支持vue3 cnpm i --save ant-design-vue@next 这里我们使用的是淘宝的景象cnpm,因为npm在国内使用很慢,这里安装了两个组件分别是ant-...
  • ant-design-vue(可拖拽table).vue

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 2,988
精华内容 1,195
关键字:

ant-design-vue

vue 订阅