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

基于Vue的前端架构，我做了这15点

放弃了 Element UI 选择了 Ant Design Vue（最近 Element 好像复活了，麻蛋）。 工具库选择 lodash。 建立脚手架 搭建 NPM 私服。...3.组件库 因为 Element UI 长期没更新，并且之前使用过 React 的 Ant Design（重点），所以组件库选择了Ant Design Vue。...是 Ant Design Vue 中有强依赖该插件，所以使用 webpack 插件减小打包体积，这里我们只保留 zh-cn 语言包： // vue.config.js module.exports =...建议当元素需要撑起高度以包含内部的浮动元素时，通过对伪类设置 clear 或触发 BFC 的方式进行 clearfix。尽量不使用增加空标签的方式。 除公共样式之外，在业务代码中尽量不能使用 !...定义 CLEAR，以确保路由切换时可以初始化数据。 Actions 页面重的数据接口尽量在 actions (opens new window)中调用。 服务端返回的数据尽量不作处理，保留原始数据。

2.6K20
您找到你想要的搜索结果了吗？
是的
没有找到

基于 Vue 的前端架构，我做了这 15 点

放弃了 Element UI 选择了 Ant Design Vue（最近 Element 好像复活了，麻蛋）。 工具库选择 lodash。 建立脚手架 搭建 NPM 私服。...3.组件库 因为 Element UI 长期没更新，并且之前使用过 React 的 Ant Design（重点），所以组件库选择了Ant Design Vue。...是 Ant Design Vue 中有强依赖该插件，所以使用 webpack 插件减小打包体积，这里我们只保留 zh-cn 语言包： // vue.config.js module.exports =...建议当元素需要撑起高度以包含内部的浮动元素时，通过对伪类设置 clear 或触发 BFC 的方式进行 clearfix。尽量不使用增加空标签的方式。 除公共样式之外，在业务代码中尽量不能使用 !...定义 CLEAR，以确保路由切换时可以初始化数据。 Actions 页面重的数据接口尽量在 actions (opens new window)中调用。 服务端返回的数据尽量不作处理，保留原始数据。

2.8K42

用 Eclipse 插件提高代码质量

这就促成了我称为渐进编程 的编程方式，在这种方式下，允许在编码过程中进行一定程度的质量检验 —— 再也不能比这个更早了！...单击 New Remote Site，输入要安装的插件名和 URL（参见图 2），单击 OK，然后单击 Finish 来显示 Eclipse 更新管理器。 图 2....这么做还有更多的好处，如节省时间、减少失败，也因此会减少项目的成本。没错，这就是一种积极主动的方式！...Cobertura 也提供一个 Ant 任务和 Maven 插件，但用 Cobertura，您可以在编写代码时 评估代码覆盖率。您见过这样的模式吗？...对于相同的信息，它们有着不同的传递机制；但 Eclipse 插件的特别之处和相应优点是：它能以更接近源代码（即，编码时）的方式传递这条信息。

88030

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

，如： 配置完上述属性后，Ant Design 所有组件用到的主品牌色就被修改成了 #3f87ff 这个颜色。...除此之外，我们还修改了其他一些样式使 Ant Design 的整体风格更偏向 Molecule，如圆角属性，超链接属性等。 除了主题色的修改以外，还需要解决动态主题色的适配问题。...如： 以上代码的大致意思是，当 Molecule 的主题发生改变的时候，如果改变后的主题是暗黑主题，那么我们就加载 Ant Design 的暗黑主题风格的样式文件，否则我们移除 Ant Design...例如在开发任务管理时，为了解决页面之间来回切换跳转的问题，我们通过将任务管理添加到 Molecule 的菜单栏中，并且监听菜单栏的事件后打开 Ant Design 的抽屉组件渲染不同组件内容。...同时， Molecule 的 引入优化了Taier的交互方式，在不舍弃已有的 Ant Design 的前提下，数栈设法兼容了 Molecule 的风格，提升了一站式大数据开发平台的用户体验。

1.1K30

React 毁了 Web 开发！

下面，我们以“状态管理”为例来说明。由于 React 缺少传统的依赖注入系统（DI 是通过组件组合实现的），所以社区不得不自己解决这个问题。...如何在JS框架中找到自己的方式 这与GitHub上的星星数量无关，你应该学习如今大多数 JS 框架都拥有的共同原则。了解其他框架的优缺点可以让你更好地了解自己选择的框架。...如何结对编程 因为结对编程与代码审查一样，这是最重要的共享知识和建立团队凝聚力的实践。而且也很有意思！ 如何持续重构 因为每个项目都有技术债务，你应该停止抱怨，并开始重构。...唐金州是开源组件库 Ant Design Vue 的作者，这一组件库已纳入 Ant Design 官方域名下，成为蚂蚁金服 Ant Design 官方唯一指定的 Vue 版组件库。...2017 年，开始开发基于 Ant Design 这一设计语言的 Vue 组件库，组件库开源后获得了众多好评，现已纳入 Ant Design 官方域名，成为了蚂蚁金服 Ant Design 官方唯一指定的

74230

JavaScript企业级编程规范(1)-文件命名-注释规范-id与class

· 正 · 文 · 来 · 啦 · 01 文件夹(项目)命名规范 项目名全部采用小写方式， 以中划线分隔。...比如：my-project-name, 例如:,ant-design-pro,ant-design-colors等大厂开源项目,当项目名称有多个字符时,不是说驼峰命名法myProjectName不行,用横杠中划线进行连接...,已经是约定俗成的习惯,一定要向大厂的标准看齐 下面以阿里的Ant Design Team团队出品为例 ?...,当遇到多个单词组成时，采用中划线连接方式，,比如说: error-report.html 06 图片资源命名 同样参照项目命名,多个单词组成时，采用中下划线连接方式,input_bg_search_default...@2x.png,组件_类别_功能_状态@2x.png,对应的中文是:输入框_背景色_搜索_默认,这种命名方式不是硬性的,应当是灵活的,语义化,最棒的就是让人一看名字就能理解这图片代表的含义 上面的命名规范

97120

ElementUI和Ant Design对比

而作为对比的Ant Design，也有一定的优势。 从功能上来讲，后者更加齐全。比如回到顶部组件：树形选择：，Ant Design更加适合管理平台的开发。...    总之： 如果是想快速上手，又希望ui更加漂亮，建议用elementUI；如追求的是比较复杂的后台管理平台，可以考虑采用ant-design-pro，而且ant-design-pro...一些建议和经验 以下代码部分都是vue，不涉及react 1. elementUI的菜单组件在手机端点击会回弹的问题 修改trigger为click的方式，因为默认hover时...，就是利用Vue的插槽实现，这种方式也适合ant-design的可配置表单的实现。...ps: 注意插槽名称不要带数字，最好不要 下面是利用插槽实现可配置的例子，这里以ant-design为例： form.json { "props": { "layout": "inline

22.9K60

9个值得推荐的 VUE3 UI 框架

Ant Design Vue Ant Design Vue 是一个非常成熟的框架，使用 Ant Design Vue 创建用户界面非常简单，这些组件可以适应各种图标样式、字体和黑色主题。...Ant Design Vue 不断改进其60多个组件，基本覆盖项目大部份需求，而且使它们变得更好，更易于访问。...Vue3 上的 Ant Design 包更小，感觉更轻，并且支持 SSR（还包括组合API），Ant Design 拥有成熟的复杂组件，如数据表、统计框、pop确认、模态和弹出窗口。...BalmUI 发展非常迅速，如果想使用 Material Design 风格，使用复杂的内置指令（如 debouncing 和 UI 波纹）在创建自定义组件时能派上用场，那么它非常适合 Vue3 项目。...Quasar 框架似乎是基于 Material Design，但是一旦开始，一切都可以很好地定制以适应自己的设计体系。

4.5K30

9 个值得推荐的 VUE3 UI 框架

Ant Design Vue 官方网站：https://2x.antdv.com/components/overview/ Ant Design Vue 是一个非常成熟的框架，使用 Ant Design...Ant Design Vue 不断改进其60多个组件，基本覆盖项目大部份需求，而且使它们变得更好，更易于访问。...Vue3 上的 Ant Design 包更小，感觉更轻，并且支持 SSR（还包括组合API），Ant Design 拥有成熟的复杂组件，如数据表、统计框、pop确认、模态和弹出窗口。...BalmUI 发展非常迅速，如果想使用 Material Design 风格，使用复杂的内置指令（如 debouncing 和 UI 波纹）在创建自定义组件时能派上用场，那么它非常适合 Vue3 项目。...Quasar 框架似乎是基于 Material Design，但是一旦开始，一切都可以很好地定制以适应自己的设计体系。

5.8K30

使用Vue3.0，我收获了哪些知识点（一）

本文所有的示例均使用ant design vue2.0实现，关于ant design vue2.0请参考 https://2x.antdv.com/docs/vue/introduce-cn/ 初始化环境...输入y` 然后css预处理器选择Less 然后是Lint on save和In dedicater config files 启动项目 新建完项目之后，进入到项目中cd my-vue3-test,然后执行...库中率先将Vue3.0继承到自家的UI库中的，PC端主要是ant-design-vue，移动端主要是vant, 本文所有示例代码都会基于ant-design-vue来进行，首先我们先安装ant-design-vue...安装依赖 yarn add ant-design-vue@2.0.0-beta.6 yarn add babel-plugin-import -D 配置ant-design-vue按需加载 进入项目根目录...本节我们将主要为大家带来如何在Vue3.0中使用v-model,Vue3.0中的v-model提供了哪些惊喜以及如何在Vue3.0中自定义v-model。

57020

扒个知名项目的 Bug！

我们在学编程时难免会遇到各种各样的 Bug，这种时候你一般会怎么处理呢？ 我估计大多数同学会在第一时间选择百度谷歌，也有同学会选择直接求助他人，仅有极少数同学会通过查文档、看源码等方式硬核解决。 ?...个人成长 以刨根问底的心态来面对和解决问题，我们就会收获很多学编程的乐趣和进步的空间，每个 Bug 的解决都是一项比增删改查更有意义的工作。...因此，在找 Bug 的起源时，我先登录 GitHub，找到 Ant Design 官方仓库，打开了版本（Releases）列表： ? 版本列表 如上图，每一次版本的更新都做了哪些事，一目了然。...大家看，Ant Design 不愧为知名项目，Bug 多问题多也很正常，都有 20724 个问题了！ ?...Ant Design Issues 咱也有样学样提一个 issue，Ant Design 团队为了管理大家的问题，提供了一个问题表单页面，并且给你定好了一些规矩，避免一些乱七八糟不经搜索就直接提出的低质量问题

67930

【腾讯云 Cloud Studio 实战训练营】快速构建React完成点餐H5页面

，随时随地打开浏览器就能在线编程，给开发者带来极大便利。...三，开发一个简版的点餐系统 主旨是为了开发一个 React H5 的页面，为了快速开发，常会使用到UI组件库，这里我们使用的是 antd-mobile UI库，antd-mobile 是 Ant Design...图片 输入github邮箱和用户名图片图片图片 这里可以选择将代码托管到GitHub还是CODING，我选择的是GitHub图片图片或者在这里点击设置图标添加关联账号 图片图片图片点击"Publish...图片为了防止误删除，已删除的工作空间会展示在下方“已删除的工作空间”列表中，保留24小时。在此之前您可以随时单击【恢复】，还原您的工作空间，超过 24 小时未恢复的工作空间将被永远销毁。...Cloud Studio 还支持您连接自己的云服务器，这样就可以在编辑器中查看云服务器上的文件，进行在线编程和部署工作。

20430

ant-design-vue运行时动态切换主题色

1.创建项目 使用vue-cli V3.0+创建项目 vue create antd-vue-theme-demo 选择css预处理器（其他的根据项目所需选择） 由于ant-design-vue的样式使用的是...改完后保存，并重新下载依赖 yarn install 下载完后启动项目 yarn serve 在浏览器输入localhost:8080就可以看到创建好的项目 项目已经启动成功，接下来ant-design-vue...2.安装ant-design-vue yarn add ant-design-vue 然后在main.js中添加所需的antd组件 注意：ant-design-vue支持完整引入和按需加载，这里我们不要用完整引入...2px" }, javascriptEnabled: true } } } }; 保存重启并访问页面后就可以看到定制的主题了 但官方提供的这种方式只能在编译时改变主题...提取antd的less变量文件 我们的思路就是提取ant-design-vue中所有的less代码汇总到一个文件中，然后在index.html页面中直接引用，最后使用less.js中的modifyVars

5.8K1513
点击加载更多

扫码

添加站长 进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

更多标签

活动推荐

    运营活动

    活动名称
    广告关闭

    腾讯云开发者

    扫码关注腾讯云开发者

    扫码关注腾讯云开发者

    领取腾讯云代金券

    热门产品

    热门推荐

    更多推荐

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

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

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

    领券