前言:我们在后台项目中,经常会使用到富文本,当我们需要把后台编辑的内容原封不动的展示到前台页面的时候,富文本是一个非常好用的东西~~今天主要记录我在项目中使用vue-quill-editor富文本的情况实现过程(可以直接复制代码使用,但是要注意新建文件的路径,改成自己的路径):1、首先我们需要安装vue-quill-editor富文本 npm install --save vue-qui
这两天看ant-design的文档,看到定制主题,就想自己也来试试。首先,我是用的vue-cli 2版本来做的。一、将项目搭建好1.创建一个vue项目vue create antd-demo2.安装ant-design-vuenpm install ant-design-vue --save3.按需引入这里强调一下,为什么按需引入更好,因为整个antd包其实不小,大部分我们都用不到,全局引入,是很
转载 2024-03-07 13:18:02
1467阅读
一、简介在样式引入时,对于变量的引入,需要在每个文件里都要引入一遍,为了避免每次使用时都需要单独引入一遍的问题,采用了 style-resources-loader。在确保安装指定 CSS 解析器 插件(less、less-loader | stylus、stylus-loader …)后。这里以 less 举例,新建一个 reset.less (文件名随
scoped与覆盖第三方组件样式vue中有很多第三方的UI库如:ElementUI、iView等,样式丰富且使用起来很方便,但在真实的使用场景中,我们可能需要在某些地方修改第三方组件的样式,但是通过传统方式,修改却不生效,以下是对于vue-scoped的理解,和如何覆盖第三方组件样式的总结。1. 什么是 Scoped ?作用在vue组件中,在style标签上添加scoped属性,以表示它的样式作用
在 ant-design-vue 中,提供 FormModel 表单组件,且支持 v-model 数据绑定,同时可以校验和提交功能的表单。一、表单验证<a-form-model ref="form" :rules="rules" :model="form" layout="inline" :label-col="
前端Vue(一)一、1、创建实例 这就创建了一个vue实例。2、vue的基本使用上图可以看到,el 是定义范围的,#app 就是定义id为app的元素,只有这个id代表的标签范围内(包括其子元素,孙子元素…等等)才能使用。data 是定义相关数据的。msg 是变量名,这个可以随便起。但是此时运行还是不能渲染的。使用的方法是 双大括号:{{ 变量名 }} ,这样就能渲染了。但是切记,script 的
转载 4月前
53阅读
1.1Vue-Router 使用步骤 yarn add vue-router --dev import Vue from 'vue' import VueRouter from 'vue-router' Vue.use(VueRouter) 样式案例:// view/Blog.vue 路由相关的组件(视图) 1.2动态路由 // router/index.js
例行惯例,欢迎来波star:为何造这个轮子:用惯了Antd,再看其他的总觉得没有Antd好用周边生态,组件数量及质量都是略胜一筹,至于样式,每个人的审美不一样,就不加评判了,不过个人还是喜欢antd的。社区很多Antd的Vue实现,大多已经弃坑,已经实现的也多是阉割版github搜索关键词 vue ant 共93条结果,搜索vue ant-design也有51条结果。希望让Vue开发者也能享受到A
转载 2024-06-13 22:11:31
133阅读
一、前言 利用Sass预处理实现换肤和字体大小调整。 思路及达到的效果:字体大小的适配使用window.devicePixelRatio的值和需要调整的差量进行控制。页面初始化是的字体适配可以根据devicePixelRatio和css3 media进行适配. 实现方法:1.利用全局变量和bus事件,使用js方式调整字体和颜色(这里暂不讨论);      2.利用scss预处理方式实现      
转载 2024-02-21 14:14:14
2031阅读
概述Ant Design作为一门设计语言面世,经历过多年的迭代和积累,它对UI的设计思想已经成为一套事实标准,受到众多前端开发者及企业的追捧和喜爱,也是React开发者手中的神兵利器。ant-design-vueAnt DesignVue实现,组件的风格与Ant Design保持同步,组件的html结构和css样式也保持一致,真正做到了样式0修改,组件API也尽量保持了一致。 
Ant Design Pro of Vue——蚂蚁金服中后台系统框架搭建Ant Design Pro of Vue下载安装启动步骤:一、Ant Design Pro of Vue 的介绍Ant Design Pro 是一个企业级中后台前端/设计解决方案,我们秉承 Ant Design 的设计价值观,致力于在设计规范和基础组件的基础上,继续向上构建,提炼出典型模板/业务组件/配套设计资源,进一步提升
转载 2024-04-26 11:08:13
259阅读
开发模式预览 demo在开发一个 ui 组件库时,肯定需要一边预览 demo,一边修改代码。常见的解决方案是像开发一般项目一样使用 webpack-dev-server 预览组件,比如通过 vue-cli 初始化项目,或者自己配置脚本。文艺一点儿地可能会用到 parcel 来简化 demo 的开发配置(比如 muse-ui)。展示文档作为一个 ui 组件库,也肯定要有自己的组件展示文档。一般业界常
https://www.antdv.com/docs/vue/introduce-cn/ ...
转载 2021-09-09 07:54:00
366阅读
2评论
支持的环境: 现代浏览器和 IE9 及以上(需要 polyfills)。 支持服务端渲染。 Electron(一个跨平台的、基于 Web 前端技术的桌面 GUI 应用程序开发框架。可以使用 HTML、CSS 来绘制界面和控制布局,使用 JavaScript 来控制用户行为和业务逻辑,使用 Node. ...
转载 2021-07-13 14:28:00
402阅读
2评论
1.简介动态模型是一个基于结构化数据的编程方法。目前已经在动态模型里初步集成了vue和antdesign,这里讲述下如何运行动态模型下的vue-antdesign的示例。简单介绍下动态模型的优点先。使用动态模型可以让编程更加简单和快捷,并且模型也可以保存知识和经验。也就是说使用动态模型可以让vue-antdesign编程简单化,并且如果你有vue-antdesing的相关知识和经验,那么也可以把这
一.项目要求1.要求:点击新增按钮弹出新增页面,在输入名称时进行验证,当输入名称和列表下的名称相同,即后台数据库中存在,此时将会提醒用户,该名称已存在, 2.要求:该名称不存在,则新增成功二.思路1.错误的思路 我刚开始的思路是,准备在点击新增页面中的确定按钮时进行验证,但此时会存在一个问题: ——点击确定时,已经调用了后台新增接口,此时新增的需要输入的表单数据已经传给后台,此时并不能做到验证名称
转载 2024-03-22 14:11:55
151阅读
vue3.0正式版-语法一.vue3.0版本中elementui-plus的安装和使用1.安装:npm i element-plus扩展: vue3.0和antdesign一起使用,ant-design-vue需要v2的版本,否则当行这样的样式就会出现问题。import Antd from "ant-design-vue"; import "ant-design-vue/dist/antd.css
转载 2024-04-12 22:07:40
189阅读
一、Ant Design Pro 介绍1、访问地址:https://pro.ant.design/zh-CN/2、开箱即用的中台前端/设计解决方案二、使用Vue CLI3快速创建项目1、创建步骤:vue create ant-design 依据需要选择相应的依赖 cd ant-design 打开项目文件 npm i ant-design moment 安装项目中的依赖,依据momen
转载 2024-04-01 10:53:27
97阅读
ant Design Vue 自定义loading今天又来更新一下 踩坑日记 希望 大家不要跟着一起填坑 就好!事情了,是这样的 UI设计 提出一个需求 认为 ant Design 的Spin 图标不好看 和我们的风格不搭 需要换成我们自己的图标!首先是看文档 能不能更换,果不然文档上写的很清楚 perfect,我就跟着他的demo 写了 但是感觉不对 因为只能添加 自带的icon 但自带的 i
转载 2024-04-01 12:48:27
335阅读
Ant Design Pro Vue不完全开发手册前言准备工作:1、安装npm2、可选安装3、安装 vue-cli 工具:4、参考文档基础开发学习:1、git项目拉取2、安装项目3、启动项目4、文件解析vue.config.jsrouter.config.jsviews(1)api.js(2)vue开发浅谈问题与解惑1、如何把父组件的值传到子组件2、父组件调如何用子组件方法3、子组件如何调用父组
  • 1
  • 2
  • 3
  • 4
  • 5