Ant Design 框架

2024-05-11 14:31:37

一、环境搭建

前提：已经安装好了nodejs

下载地址：Download | Node.js

NPM是随同NodeJS一起安装的包管理工具，能解决NodeJS代码部署上的很多问题

由于新版的nodejs已经集成了npm，所以安装nodejs时，npm也一并安装好了。可以通过输入 "npm -v"（查看npm版本）来测试是否成功安装。

如果你安装的是旧版本的 npm，可以通过 "npm install npm -g" 命令来升级。

参考链接：Ant Design Vue

1.新建目录

用于存放ant项目，项目路径：D:\Users\01397470\Ant

2. 安装脚手架工具

D:\Users\01397470\Ant> npm install -g @vue/cli

3.创建vue项目

D:\Users\01397470\Ant> vue create antd-demo

此过程较慢，耐心等待吧~

4.启动项目

$ npm run serve

5.测试

在浏览器中输入： http://localhost:8080/ 即可访问vue主页

二、Ant组件的使用

在ant官网中随意找个组件，将代码复制到新建的vue文件中，我这里只是测试下官网中的组件如何使用而已。

举个例子：比如我想使用ant官网中的table组件；官网地址：Ant Design Vue

1.安装ant

在vscode中打开刚新建好的ant项目，并在终端中执行：

$ npm i --save ant-design-vue

5.导入ant

在 src/main.js 中：

// 导入ant
import Antd from 'ant-design-vue';
// 导入ant样式
import 'ant-design-vue/dist/antd.css';
// 使用ant
Vue.use(Antd);

3.新建vue文件

在src/components目录下新建AntTable.vue文件，代码直接复制官网上的即可

4.使用组件

三部曲：导入组件 ---> 注册组件 ---> 使用组件

在src/App.vue文件中：

<template><div id="app"><!-- 3.使用组件 --><AntTable/></div>
</template><script>// 1.导入组件
import AntTable from './components/AntTable'export default {name: 'App',components: {// 2.注册组件AntTable}
}
</script>

5.启动项目

$ npm run serve

6.测试

在浏览器中输入： http://localhost:8080/

Ant Design 框架相关推荐

Ant Design（ui框架）
Ant Design of Vue https://vue.ant.design/docs/vue/introduce-cn/ 1.基于 Ant Design 框架使用案例:http://boot ...
react ant design pro typescript springboot activiti权限、工作流框架
是什么? 使用springboot,activiti,mybatis,react,ant design pro,typescript 开发的后台管理系统(包含权限管理.工作流等功能),真正前后端分离的 ...
阿里开源台柱 Ant Design 源码仓库被删了...
号外,号外,Ant Design 源码仓库被删除! 在广大中国人民还在欢天喜地过新年的时候,Ant Design项目组成员一定是焦头烂额. 因为就在2.15,也就是农历大年初四的时候,一位名叫Jegg ...
ant design vue利用rowClassName给table添加行样式
ant design vue利用rowClassName给table添加行样式目录 1. 需求:表格每行数据hasVerdict值不为'1'时标红显示 2. 实现方式:table属性rowClass ...
Ant Design中select框往下滑动会自动回到顶部的问题
问题重现: 用户在使用如下图所示的选择框时,在向下滑动时,鼠标再次移动,滑竿会自动回到顶部. 代码定位: 问题分析: 获取到的dataFromOptions中是以key,value形式存在的. 而当选 ...
Ant Design项目记录和CSS3的总结和Es6的基本总结
这里主要是介绍自己运用ANT框架的一些小总结,以前写到word里,现在要慢慢传上来, 辅助生殖项目总结:从每个组件的运用的方法和问题来总结项目. 1.项目介绍辅助生殖项目主要运用的是Ant.desi ...
基于Ant Design UI框架的React项目
概述这款基于React开发的UI框架,界面非常简洁美观,在这篇文章中我主要为大家介绍一下如何用Ant开始搭建React项目详细代码下载:http://www.demodashi.com/demo ...
基于 Vue3.0 和 Ant Design Vue ,高颜值管理后台UI框架vue-vben-admin运行
简介 Vue Vben Admin 是一个免费开源的中后台模版.使用了最新的vue3,vite2,TypeScript等主流技术开发,开箱即用的中后台前端解决方案,也可用于学习参考. Github地址 ...
Vue vben admin - 新鲜出炉的高颜值管理后台UI框架，基于 Vue3 和 Ant Design Vue
基于Vue3.0 / Vite / Ant Design 等火热开源项目构建,新鲜出炉,值得关注. 关于 Vue vben admin Vue Vben Admin 是一个基于 Vue3.0.Vite ...
Artiely Vue Admin - 基于蚂蚁金服Ant Design构建的高颜值开源管理后台UI框架
继承 Ant Design 专业美观的优点,支持PC/手机/平板的响应式布局的优秀后台管理系统 UI 框架. 关于 Artiely Vue Admin Ant Design 是阿里巴巴蚂蚁金服团队出品 ...

最新文章

热门文章