AntDesign vue学习笔记（一）初始化项目

最新推荐文章于 2024-08-31 22:02:55 发布
最新推荐文章于 2024-08-31 22:02:55 发布
阅读量22 收藏
点赞数
文章标签： vue.js 学习 笔记 javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zhaogaojian/article/details/132443339
版权

最近学习AntDesign组件使用，官方Pro例子集成度太高，不容易学习，将从最基础组件一个一个搭建。

1、创建Vue Cli项目

2、引入ant design组件

$ cnpm i --save ant-design-vue

3、安装组件babel-plugin-import

4、修改babelrc文件

cnpm install babel-plugin-import --dev

5、mainjs中引用button组件

6、Vue组件中添加按钮

7、实际效果

zhaogaojian
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Ant Design Vue项目(3)
weixin_43162630的博客
07-05 232
VUE项目实战 Ant Design Vue项目 第三步（整体运用） 新建导航栏的跳转界面 以view文件夹的menu1、menu2网页为例，项目文件目录： router里的index.js配置如下： import Vue from 'vue' import Router from 'vue-router' import Layout from '../layout/index.vue' Vue.use(Router) export default new Router({ routes:
Ant Design Vue 初步使用
Sitarry的博客
04-21 3446
注意：本文使用 npm 进行构建，yarn 方式请参考官方文档。 一、安装 vue-cli 3 脚手架，可以帮我们自动初始化一个脚手架并安装 Vue 项目的各种必要依赖 npm install -g @vue/cli 二、创建项目 vue create file-viewer 三. 在项目安装引入 Ant Design Vue 依赖 npm i --save ant-design-vue 四. 在项目中声明使用 Ant Design Vue，有两种方式：全量使用（导入 Antd 全部组件
Ant Design of Vue详细学习笔记（持续更新）
qq_44891434的博客
02-05 6475
Ant Design of Vue（里面有什么问题希望大家批评，有什么好的解决方案和优化，大家可以一起分享） 一. 项目初始化 初始化cnpm install 启动：npm run serve 注：这里也是可以用yarny 本地启动地址:Local: http://localhost:8000/ 建议使用yarn 拉取项目代码 git clone https://github.com/sendya/ant-design-pro-vue.git cd ant-design-pro-v
AntDesign vue学习笔记（七）Form 读写与图片上传
zhaogaojian的专栏
07-07 34
AntDesign Form使用布局相比传统Jquery有点繁琐 (一)先读写一个简单的input为例 <a-form :form="form" layout="vertical" hideRequiredMark> <a-row> <a-col :span="8"> <a-form-item...
ant vue 语言_从零开始ant-design-vue-pro开发笔记（一）
weixin_42305041的博客
12-30 1693
开始从这里开始是用ant-design-vue组件写ant-design-vue-pro这个后台项目实现步骤的从零开始搭建的过程，视频地址，它采用了ant-desgin-vue的组件库作为素材开发，进一步提炼了中后台管理系统的产品原型，可以帮助快速搭建后台页面。技术栈： ES2015+、Vue.Js、Vuex、Vue-Router、g2 和 antd-vue。初始化项目采用Vue cli工具帮我们...
VUE学习笔记
07-17
Vue的学习笔记将涵盖其核心概念、基本用法以及实际应用。 一、Vue的核心概念 1. 双向数据绑定：Vue采用MVVM（Model-View-ViewModel）模式，通过`v-model`指令实现了视图与数据模型之间的双向绑定，使得数据变化时...
Vue学习笔记
大圣你在哪
04-20 1958
Vue：前端体系、前后端分离 一、V前端核心分析 1、Vue概述 Vue (读音 /vjuː/，类似于 view)是一套用于构建用户界面的渐进式JavaScript框架(渐进式意味着你可以将Vue作为你应用的一部分嵌套其中)，发布于2014年2月。与其他大型框架不同，Vue被设计为可以自底向上逐层应用。Vue的核心是只关注视图层，不仅易于上手，还便于与第三方库(如：vue-router：跳转，vue-resource：通信，vuex：状态管理)或既有项目整合。 Vue官网：https://v3.cn.vue
ant design pro 5 企业级后台前端框架自定义根路径设置，解决public文件夹下资源在打包部署后出现找不到的问题_umi初始化没有public
2401_84447328的博客
04-28 144
一个好的心态和一个坚持的心很重要，很多冲着高薪的人想学习前端，但是能学到最后的没有几个，遇到困难就放弃了，这种人到处都是，就是因为有的东西难，所以他的回报才很大，我们评判一个前端开发者是什么水平，就是他解决问题的能力有多强。开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】分享一些前端面试题以及学习路线给大家外链图片转存中…(img-jsYtylM7-1714252550359)]
使用Ant Design Pro，一个企业级开箱即用的中后台前端
热门推荐
m0_37136491的博客
08-30 1万+
目录 * 此文仅是个人自学理解的学习笔记，若有不对之处敬请指导更正，谢谢！ * 目录 Ant Design Pro 了解 安装使用 方法一：clone 方法二： ant-design-pro-cli 运用 新手常遇到的问题 实战代码Download 快捷链接 Ant Design Pro 了解 Ant Design Pro 是一个企业级开箱即用的中后台前...
vue ref和reactive区别
灰海
08-25 5385
在第二个示例中，我们使用了reactive来创建一个名为state的响应式对象，它包含name和age两个属性。在模板中，我们通过{{ state.name }}和{{ state.age }}来显示state对象的属性值。在第一个示例中，我们使用了ref来创建一个名为count的响应式引用，它是一个简单的数字类型。在模板中，我们通过{{ count }}直接显示count的值，而不需要.value前缀，因为Vue的模板语法会自动处理ref的.value访问。
Vue的状态管理——Vuex3&4&Pinia
警警的博客
08-30 1523
Pinia是Vue.js 3.x的状态管理库，它可以看作是Vuex的升级版，旨在提供一种更简单、更直观的方式来管理Vue.js应用程序的状态。Vuex 4是Vue.js 3.x版本的状态管理库，它在Vuex 3的基础上进行了多项改进和优化，使其更加适用于大型应用和复杂场景。Vuex 3是Vue.js 2.x版本的状态管理库，它提供了一种集中式存储和管理组件状态的方式。：在 Vue 3 项目中，你通常会使用 Vuex 4 或 Pinia 而不是 Vuex 3。在 Vue 3 项目中，你可能会在。
足球联赛|基于SprinBoot+vue的足球联赛管理系统(源码+数据库+文档)
伟庭的博客
08-27 1212
系统阐述的是使用足球联赛管理系统的设计与实现，对于Java、B/S结构、MySql进行了较为深入的学习与应用。主要针对系统的设计，描述，实现和分析与测试方面来表明开发的过程。开发中使用了ssm框架和MySql数据库技术搭建系统的整体架构。
vue3中如何拿到element plus中el-tree多选的值？
爱敲代码的卡拉米的博客
08-30 425
首先我们要为el-tree设置show-checkbox（它的作用是：节点是否可被选择），然后为el-tree绑定ref。vue2中我们在标签中绑定过ref后会用this.$refs.xxx来进行获取。vue3中的ref跟vue2中的ref获取方式略有不同。
vue.js项目实战案例详细源码讲解
最新发布
yang_xs的博客
08-31 470
为帮助你更好地掌握Vue.js项目的开发流程，我将为你讲解一个完整的Vue.js实战案例，并提供详细的源码解析。这个案例将涵盖从项目创建到实现各种功能模块的全过程，适合用于构建一个具有基本CRUD功能的简单任务管理应用。我们将开发一个任务管理应用（Task Manager），它允许用户添加、查看、编辑和删除任务。任务列表显示：展示所有任务的列表。添加任务：允许用户添加新的任务。编辑任务：支持用户编辑现有任务。删除任务：允许用户删除任务。
vue+moment转化日期格式为年月日时分秒！最简洁版
demotang的博客
08-30 258
官网：https://momentjs.cn/
【已解决】Vue Duplicate keys detected: ‘[object Object]’
qq_34419312的博客
08-28 1018
【已解决】Vue Duplicate keys detected: ‘[object Object]’
ant design vue+vue3+ts实现一天内按钮只能点击2次，并置灰，且过当天0点时需复原~
m0_62626838的博客
08-31 252
第二步：针对一天内按钮只能点击2次需求，首先我们要拿到当前的系统日期及明天日期，并转化为“2024-09-01”格式，为后续通过Date.parse()转化为总毫秒数做对比，来实现点击次数，但此时容易忽略一个问题，即弹窗是通过v-if实现的，每一次进来都会重新渲染，在子组件中定义的点击次数变量会清零，所以此时需要进行状态管理，这里使用的是pinia来实现的，将点击次数等数据存储在pinia中，然后在弹窗组件中使用即可。第三步：针对过0点之后复原问题。（这里应计算大于等于，后续优化）
el-table利用折叠面板 type=“expand“ 嵌套el-table，并实现 明细数据多选，选中明细数据后返回原数据得嵌套格式
m0_47483157的博客
08-31 175
【代码】el-table利用折叠面板 type="expand" 嵌套el-table，并实现 明细数据多选，选中明细数据后返回原数据得嵌套格式。
Vue与Ant Design Vue学习心得与实战技巧
Vue-CLI是一个命令行工具，用于快速搭建Vue项目，它提供了预配置的脚手架，简化了项目初始化和构建流程。 使用Vue-CLI构建项目，首先需要安装全局Vue CLI，然后创建新项目，选择模板，最后启动服务进行开发。Vue...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值