ant.design能不能直接编译成浏览器直接引用?
发布网友
发布时间:2022-04-19 09:48
我来回答
共1个回答
热心网友
时间:2023-07-04 09:29
肯定是可以的,但是官方不建议这样做,但如果题主真想这么做的话可以按照下面方法:
1. 下载并编译ant-design
git clone https://github.com/ant-design/ant-design.git
cd ant-design
npm i --registry=http://registry.npm.taobao.org
npm run just-deploy
2. 使用方法
编译完成后在dist目录下antd.js和demo.css就是它的js和css文件,但是antd.js依赖react和react-dom,所以要引用node_moles/react/dist/react.js和node_moles/react-dom/dist/react-dom.js。(外加一些es5-shim等)
在ant-design根目录下建立测试文件antd-test.html,内容如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="./dist/demo.css">
<script src="https://as.alipayobjects.com/??component/console-polyfill/0.2.2/index.js,component/es5-shim/4.1.14/es5-shim.min.js,component/es5-shim/4.1.14/es5-sham.min.js,component/html5shiv/3.7.2/html5shiv.min.js,g/component/media-match/2.0.2/media.match.min.js"></script>
<script src="./node_moles/react/dist/react.js"></script>
<script src="./node_moles/react-dom/dist/react-dom.js"></script>
<script src="./dist/antd.js"></script>
</head>
<body>
<div id="components-calendar-demo-basic"></div>
<script>
(function(){
'use strict';
function onPanelChange(value, mode) {
console.log(value, mode);
}
ReactDOM.render(React.createElement(antd.Calendar, {
onPanelChange: onPanelChange
}), document.getElementById('components-calendar-demo-basic'));})();
</script>
</body>
</html>
ant.design能不能直接编译成浏览器直接引用?
ant.design是能直接编译成浏览器直接引用的,具体操作如下:下载并编译ant-design git clone https://github.com/ant-design/ant-design.git cd ant-design npm i --registry=http://registry.npm.taobao.org npm run just-deploy 2. 编译完成后在dist目录下antd.js和demo.css就是它的js和css文件...
antdesign是否需要付费
不需要。AntDesign前端框架(包含Axure资源)是免费开源的,可直接拿来用的。AntDesign是一套提炼和应用于企业级后台产品的交互语言和视觉体系。AntDesign源自蚂蚁金服体验技术部的后台产品开发,经过大量的项目实践和总结,希望能抽象出一套企业级的交互视觉规范,统一后台项目的前端UI设计,屏蔽各种不必要的...
ant design vue 安装引入, ant-design-vue 中文文档
在浏览器中引入 Ant Design Vue:使用 script 和 link 标签直接引入文件,并使用全局变量 antd。在 npm 发布包的 ant-design-vue/dist 目录下,提供了 antd.js、antd.css、antd.min.js 和 antd.min.css 文件。强烈不推荐使用已构建文件,因为这样无法按需加载,而且难以获得底层依赖模块的 bug 快速...
antdesign能在手机浏览器运行吗
能。根据查询中关村在线官网信息显示,antdesign具有极强的性能,是能在手机浏览器上运行的,但是只能进行简单的工作。
IconFont图标引用的方法步骤(代码)
支持IE 9+ 及现代浏览器 使用步骤如下:切换到 Symbol 页签,复制项目生成的地址代码://at.alicdn.com/t/font_835630_0rudypqb4a.js 加入图标样式代码,如果没有特殊的要求,你可以直接复用 Ant Design 图标的样式 .icon { width: 1em; height: 1em; fill: currentColor; vertical-align: -....
引用的antdesign组件如何设置相对定位
点击Tree组件item,在右侧添加Tab,或者激活Tab。点击Tree组件item,在右侧添加Tab,或者激活Tab,这可以算是正向定位,那反向定位就是当右侧Tab页切换时左侧Tree组件选中对应item,核心代码也就是指定selectedKeys。相比较而言也不难,难点在默认打开相关父节点,当然前面过了控制好autoExpandParent这个属性就好...
react.js的ant design Pro 不知道怎样依靠npm安装脚手架?
二、修改npm源为淘宝源 npm config set registry “”加快npm下载速度,不这样做的话npm install会卡很久。三、安装脚手架 首先确保自己安装了nodejs,然后全局安装yeomannpm install -g yo然后直接安装脚手架npm install -g generator-reactpackage123456 四、创建React项目 在合适的地方新建一个文件夹,...
Element Plus 和 Ant Design Vue 对比测评,哪个更好?
Ant Design Vue 3.x 版本在易用性、功能与性能方面有显著提升,对 Vue 3 支持较为成熟,其与 Ant Design 的 UI 风格保持一致,适合追求统一设计风格的项目。在浏览器兼容性方面,两者均已放弃对 IE 的支持,建议结合 Babel、ESBuild 等工具与 polyfill 以适应低版本浏览器。Element Plus 和 Ant ...
vue常见项目源码(vue项目大全)
1.引入ant-design-vue: 具体引入操作可见官网 2.引入VueRouter 路由配置文件:router/index.js 3.引入vuex 新建store/index.js news/index.vue 4.页面顶部进度条插件Nprogress 使用: vue源码(1.初始化过程_init) 1.在init阶段inject是比provide更早,比initState(initProps、initMethods、initComputed、initWatch)都...
vue3版本下element-plus和antd-vue选哪个更好一些?
浏览器兼容性方面,Element Plus 和 Ant Design Vue 3 均不再支持 IE 浏览器,这与 Vue 3 本身的策略相一致。为了在低版本浏览器上使用这些框架,可以借助 Babel、ESBuild 或其他转换工具,并引入相应的 polyfill。Element Plus 使用了 ResizeObserver,对于需要兼容性处理的情况,开发者可以自行引入 ...