文档建议反馈控制台
首页
学习
活动
专区
工具
TVP
最新优惠活动
文章/答案/技术大牛
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

Angular实战之使用NG-ZORRO创建一个企业级中后台框架（新手入门篇）

这篇文章就是为了让大家熟悉了解我们该如何在Angular项目中使用到NG-ZORRO UI组件库搭建后台管理框架。...自动完成 ng-zorro-antd 的初始化配置（推荐，简单快速）： 进入新建的Angular项目目录(YyFlight-NG-ZORRO)中: cd YyFlight-NG-ZORRO 初始化ng-zorro-antd...配置： 注意：执行以下命令后将自动完成 ng-zorro-antd 的初始化配置，包括引入国际化文件，导入模块，引入样式文件等工作。...引入样式： 在 angular.json 中引入： { "styles": [ "node_modules/ng-zorro-antd/ng-zorro-antd.min.css" ]...} 在 style.css 中引入css样式文件： @import "~ng-zorro-antd/ng-zorro-antd.min.css"; 在 style.less 中引入 less 样式文件：

3.6K11
    • 您找到你想要的搜索结果了吗？
    是的
    没有找到

    webpack4大结局：加入腾讯IM配置策略，实现前端工程化环境极致优化

    preload是首屏优化的巅峰，但是pwa无法缓存预渲染的html文件 本文的webpack主要针对React技术栈，实现功能如下： 开发模式热更新 识别JSX文件 识别class组件 代码混淆压缩，防止反编译代码...主要看一下React技术栈，如何在构建中接入热刷新 无论什么技术栈，都需要在dev模式下加上 webpack.HotModuleReplacementPlugin插件 devServer: {...: { test: /[\\/]node_modules[\\/]antd/, name: 'antd', priority: 15...将react全家桶打入react.js bundle中； 如果项目依赖了antd，那么将antd打入单独的bundle中；（其实不用这样，可以看我下面的babel配置，性能更高） 最后剩下的业务模块超过...node 服务需要的html/js通过webpack插件动态输出，当nodemon检测到变化后将自动重启，html文件中的静态资源全部替换为dev模式下的资源，并保持socket连接自动更新页面。

    2.1K30

    新框架又出来了，你还卷的动吗？

    前端已经有许多框架了，比如Ract、Vue、Angular、Svelte等等。...消除了 TCP 慢启动算法和渐进增强带来的 “地狱” 使用基于 HTML 的模板语法 具有响应式和异构组件模型，适合创建各种类型应用程序 允许在单个文件中定义多个组件来简化依赖管理 简化工具链：包含了...render 函数进行服务器端渲染以及 compile 函数生成浏览器端组件，在开发环境无需复杂打包工具如 Webpack 或 Vite 也能正常运行 安装使用 创建nue # 下载项目 git clone...li :for="(item, index) in items"> { index }: { item.text } 自定义语法 组件是 HTML 片段，其组件名称在 @name 属性中给出...stop防止事件进一步传播 selfevent.target仅在元素本身时触发处理程序 once事件最多触发一次 enter捕获“Enter”和“Return” delete捕获“Delete”和“Backspace

    20210

    低代码引擎实战-从零封装低代码组件

    上一篇文章讲了如何开始使用阿里低代码引擎 low-engine，以及如何在引擎 demo 中引用自定义组件，本篇将基于 vant 和 antd 封装一些低代码组件，带领大家熟悉自定义组件的封装和注意事项...想要更多自定义配置，有两种方式： 在代码中写 propTypes自动生成 手动配置 定义好组件的 Props 之后，运行 npm run lowcode:dev命令会根据当前定义的 props 自动生成描述文件...注意这里有个坑，只有第一次运行以上命令才会自动生成描述文件，如果这个组件的描述文件已经存在，我们又修改了组件，再次运行命令则不会将新增的属性追加进描述文件中，换句话说以后都需要手动配置了。...本组件基于 antd 的 Table 扩展。...四、坑点 如果你用的是 antd 组件库，那么会遇到个大坑。

    2.4K21

    两步实现让antd与IDE和睦相处的处理案例

    你可以看到 ▫ 一个新的web UI轻量级框架 ▫ 同用IDE组件库和antd产生的冲突如何解决 ▫ 它们如何在Taier上完美配合 Keep It Simple, Stupid....在Taier经过数百家企业客户的生产环境实战检验之后的今天，我们想用今天这篇文章跟大家分享一些在 Taier 的搭建过程中时遇到的Molecule 与antd如何适配的解决经验和它们在 Web IDE...而一个前端项目里两个组件库同时使用立刻出现了样式冲突的问题，Molecule的加入让原本仅由antd参与的开发界面“破坏”得让我们哭笑不得。...除此之外，我们还修改了其他一些样式使 Ant Design 的整体风格更偏向 Molecule，如圆角属性，超链接属性等。 除了主题色的修改以外，还需要解决动态主题色的适配问题。...在引入 Molecule 后，在Taier 上的开发不再需要从零开始布局，对单个组件进行一一搭建， 而是可以直接将不同的组件填充到对应的布局区域中。

    1.2K30

    前端: 开发一款有点意思的仿微信朋友圈应用

    使用umi快速创建一个应用 笔者将采用umi作为项目的前端集成解决方案，其提供了非常多了功能，使用起来也非常方便，并且对于antd和antd-mobile自动做了按需导入，所以熟悉react的朋友可以尝试一下...object-fit属性，有点类似于background-size，我们可以把img便签看作一个容器，里面的内容如何填充这个容器，完全用object-fit来设置，具体属性如下： fill 被替换的内容正好填充元素的内容框...整个对象将完全填充此框。如果对象的宽高比与内容框不相匹配，那么该对象将被拉伸以适应内容框 contain 被替换的内容将被缩放，以在填充元素的内容框时保持其宽高比。...整个对象在填充盒子的同时保留其长宽比，因此如果宽高比与框的宽高比不匹配，该对象将被添加“黑边” cover 被替换的内容在保持其宽高比的同时填充元素的整个内容框。...当我们点击动态中的某一张图片时，我们可以看到它的大图，并通过手势进行切换。 6.

    2K10

    基于reactvue开发一个专属于程序员的朋友圈应用

    有关服务端部分笔者在本文中不会细讲，后续会在cms2.0中详细介绍。...使用umi快速创建一个应用 笔者将采用umi作为项目的前端集成解决方案，其提供了非常多了功能，使用起来也非常方便，并且对于antd和antd-mobile自动做了按需导入，所以熟悉react的朋友可以尝试一下...object-fit属性，有点类似于background-size，我们可以把img便签看作一个容器，里面的内容如何填充这个容器，完全用object-fit来设置，具体属性如下： fill 被替换的内容正好填充元素的内容框...整个对象将完全填充此框。如果对象的宽高比与内容框不相匹配，那么该对象将被拉伸以适应内容框 contain 被替换的内容将被缩放，以在填充元素的内容框时保持其宽高比。...整个对象在填充盒子的同时保留其长宽比，因此如果宽高比与框的宽高比不匹配，该对象将被添加“黑边” cover 被替换的内容在保持其宽高比的同时填充元素的整个内容框。

    99010

    React 折腾记 - (10) UmiJS 2.x + antd 重写后台管理系统记录的问题及解决姿势

    create-react-app, 也是一套方案的集合体,亮点很多.可以具体官网去看 声明式的路由(nuxtjs既视感) dva(基于redux+redux-saga的封装方案):写起来有vuex的感觉; 主要记录我在过程中遇到的问题及解决的姿势...,技术栈 antd 3.11.x + umi 2.x + react 16.7 ---- 问题汇总及解决姿势 moment的一些用法及antd 日期组件的细节 关于moment 为什么说另类..就是原生日期...找了下官方文档,发现有这么两个API: React.Children : 提供了几个遍历子元素(React Element)的方法,与常规数组用法类似,只是参数不一样 React.cloneElement: 如名字所示...(比如官方自己过滤的models),都会自动产生可访问的页面, 也就是说文件会被当做路由组件; 屏蔽的话, 打开项目的配置文件.umirc.js const path = require('path')...changeOrigin: true, secure: false, // pathRewrite: { '^/api': '/' }, }, }, }; 复制代码 ---- 如何在

    3.3K20

    前端自动化测试

    前言 本文主要是介绍基于React+Ant Design（以下用Antd表示Ant Design）的项目，在对于自己封装的，或者基于Antd封装的公共组件的自动化测试技术的选型和实践。...Enzyme：源自Airbnb，封装了React官方测试API，类Jquery风格简洁的API, 使得Dom操作变得十分友好 综合目前市面上的轮子，我们技术选型为Jest+Enzyme 实践 例子是一个基于Antd...二次封装的单选年的日期选择器，如下演示： 图片 代码结构如下 图片 其中测试相关的文件，在test中，后缀名为xxx.test.js的文件，在运行测试时会自动执行，snapshots为自动生成的页面快照...value).toBe('2018'); }); }); 这里定义了3个测试内容 测试默认值，即检查输入框的值是否为默认值 测试清除按钮是否可用，通过模拟点击清除按钮，测试是否能按照预期清除输入框内填充的默认值...测试设置值，点击输入框，弹出选择框，选择值，检查输入框中的值是否为选择的值

    2K20

    modelscope-studio: 更定制化更丰富的 Gradio 三方组件库

    huggingface.co/spaces/modelscope/modelscope-studio在原有 Gradio 组件之上，modelscope-studio提供了多种基础组件来辅助开发者优化界面布局，如div...比如在 Ant Design 中，有一些类型为ReactNode的属性（可以简单理解为它们接收的参数是一个个组件），这些属性就无法直接通过 Python 传入，只能通过Slot组件实现。...在上面的示例中，我们希望给 Card 的顶部添加一些额外的样式：with antd.Card(): with ms.Slot("title"): # 与 card 的属性名对应，会覆盖原有 card...("GithubOutlined")组件上下文联动在modelscope-studio中，也支持不同组件之间的联动效果，以常见的表单提交场景为例：import gradio as grimport modelscope_studio.components.antd...（自动收集只有 Ant Design 提供的表单组件才能触发哦）自定义主题与多语言通过为antd.ConfigProvider组件传递theme和locale等参数实现自定义主题和多语言。

    15310

    精通ReactVue系列之手把手带你实现一个功能强大的通知提醒框(Notification)

    该组件在诸如Antd或者elementUI等第三方组件库中也都会出现,主要用来为用户提供系统通知信息的.我们在调用它时并不像其他组件一样，通过引入组件标签来调用。...2.1 搭建通知提醒框(Notification)的基本骨架 首先按照笔者的代码风格，一般会考虑组件设计的框架，然后再一步步往里面填充内容和逻辑。通过这种渐进式的设计思路，能让我们逻辑更严谨，更清晰。...我们在全局使用的配置方法是xNotification.config(config), 在通知框实例中我们使用xNotification.pop(config)。...}) antd同样的方式会这么调用： // antd Notification.info({//...})...} 100% { right: 0; } } 通过以上步骤, 一个功能强大的通知提醒框(Notification)就完成了.Notification组件算是组件库中中等复杂的组件

    2K10

    读书笔记《CSS权威指南》

    第1章 CSS和文档 1.1 WEB的衰落（为了表现增加很多标记元素如font等，这些阻碍了页面的结构化） 1.2 CSS作救星（95年W3C发布正在进行的CSS计划） CSS特点：丰富的样式；易于使用和维护...：用来替换元素内容的部分并未由文档内容直接表示，如img、input等 　　非替换元素：大多数都属于非替换元素，内容由用户在元素本身生成的框中显示，如段落、标题、单元格等 　　元素显示角色（块级元素：生成一个元素框...，它会填充其父元素的内容区；行内元素：在一个文本行内生成元素框，而不会打断这行文本） 　　在HTML和XHTML中块级元素不能嵌套在行内元素中，但在CSS中对嵌套没有任何限制 1.4 结合CSS和XHTML...inherit） 　　偏移属性（top|right|bottom|left） 　　内容溢出（overflow：visible|hidden|scroll|auto|inherit） 　　内容剪裁（clip：ract...|inherit） 11.3 表大小 　　宽度：固定布局和自动布局 　　高度和对齐 第12章 列表与生成内容 12.1 列表 　　列表类型（list-style-type）、列表项图像（list-style-image

    1.2K50

    带你了解一些package.json的骚操作

    的最新版本： 查看 antd 的所有历史版本： 可以看到，antd 是严格按照 SemVer 规范来发版的，版本号是严格按照主版本号.次版本号.修订号的格式命名和严格递增的，在发布的版本改动较大时...安装项目依赖（dependencies & devDependencies） dependencies字段指定了项目运行所依赖的模块（生产环境使用），如 antd、 react、 moment等插件库：...package...> --dev # 写入 devDependencies 属性 有了 package.json 文件，开发直接使用 npm install / yarn install 命令，就会在当前目录中自动安装所需要的模块...antd 包是下面的目录结构： 另外，我们还可以通过配置一个 .npmignore 文件来排除一些文件， 防止大量的垃圾文件推送到 npm 上。...定义私有模块（private） 一般公司的非开源项目，都会设置 private 属性的值为 true，这是因为 npm 拒绝发布私有模块，通过设置该字段可以防止私有模块被无意间发布出去。

    1.9K40

    React知识图谱

    使用场景如Antd4 Form实现useForm的时候。 useImperativeHandle useImperativeHandle 可以让你在使用 ref 时自定义暴露给父组件的实例值。...使用场景如Antd4 Form实现Form的时候。 状态管理库 redux：函数式编程 redux是JavaScript应用的状态容器。它保证程序行为一致性且易于测试。...创建视图以响应状态的变化 • observer HOC • 返回响应式组件，它可以自动追踪哪个可观察量被使用了以及当值改变的时候自动重新渲染这个组件。...MemoryRouter：把 URL 的历史记录保存在内存中的 （不读取、不写入地址栏）。在测试和非浏览器环境中很有用，如React Native。...组件库 Antd 蚂蚁的，使用很广泛，风格素雅简洁。 Antd-Mobile 用于移动端，比Antd差很多，不过最近正在重构，期待吧。

    38420
    点击加载更多

    扫码

    添加站长 进交流群

    领取专属 10元无门槛券

    手把手带您无忧上云

    扫码加入开发者社群

    相关资讯

    热门标签

    更多标签

    活动推荐

      运营活动

      活动名称
      广告关闭

      腾讯云开发者

      扫码关注腾讯云开发者

      扫码关注腾讯云开发者

      领取腾讯云代金券

      热门产品

      热门推荐

      更多推荐

      Copyright © 2013 - 2025 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有

      深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 深公网安备号 44030502008569

      腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号 | 京公网安备号11010802020287

      领券