- ubuntu12.04环境下使用kvm ioctl接口实现最简单的虚拟机
- Ubuntu 通过无线网络安装Ubuntu Server启动系统后连接无线网络的方法
- 在Ubuntu上搭建网桥的方法
- ubuntu 虚拟机上网方式及相关配置详解
CFSDN坚持开源创造价值,我们致力于搭建一个资源共享平台,让每一个IT人在这里找到属于你的精彩世界.
这篇CFSDN的博客文章vue3.0中友好使用antdv示例详解由作者收集整理,如果你对这篇文章有兴趣,记得点赞哟.
随着我们vue3.0的出现,我们的ui组件库也有了一些变化,像我们的旧版的element-ui已经不能在vue3.0中使用了,如果要使用element的话需要使用最新版的element-plus,由于发现它并不太好用,因此我选择了Ant Design Vue.
如果我们以前经常使用antd的话,我们使用起来这个上手会非常方便.
1.首先使用我们的vue/cli创建vue3.0项目并使用less 。
2. 在vue3.0中使用的话我们需要安装 ant-design-vue@next 版本,安装完之后,我们只需要在main.js文件中把antdv引入到全局(由于博主比较懒,为了省事,并没有按需加载),这样我们就可以使用所有的组件了(icon除外)。如果想按需加载请参考 官方文档.
1
2
3
4
5
6
7
8
9
|
import { createApp } from
'vue'
;
import Antd from
'ant-design-vue'
;
import App from
'./App'
;
import
'ant-design-vue/dist/antd.css'
;
const app = createApp();
app.config.productionTip =
false
;
app.use(Antd);
|
在我们vue3.0中我们使用icon需要在我们使用的地方额外的引入我们的icon库,如下写法 。
1
|
import { UserOutlined } from
'@ant-design/icons-vue'
;
|
由于我们的vue的标签并不支持驼峰命名法,在我们的template中使用的时候需要,换成短横线的连接的方式如下:
1
|
<user-outlined />
|
antd 的样式使用了 Less 作为开发语言,并定义了一系列全局/组件的样式变量,你可以根据需求进行相应调整。 我们有两种方式可以定制主题:一是创建我们的vue.config.js文件进行配置,二是创建一个less文件进行变量覆盖.
创建vue.config.js文件 。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
module.exports = {
css: {
loaderOptions: {
less: {
lessOptions: {
modifyVars: {
'primary-color'
:
'#1DA57A'
,
'link-color'
:
'#1DA57A'
,
'border-radius-base'
:
'2px'
,
},
javascriptEnabled:
true
,
},
},
},
},
};
|
并且我们要把main中改为如下 。
1
2
3
4
5
6
7
8
9
|
import { createApp } from
'vue'
;
import Antd from
'ant-design-vue'
;
import App from
'./App'
;
- import
'ant-design-vue/dist/antd.css'
;
+ import
'ant-design-vue/dist/antd.less'
;
const app = createApp();
app.config.productionTip =
false
;
app.use(Antd);
|
经过这个配置后我们可能会发现我们的主题并没有生效。他不报错也没有任何提示,这个时候我又去看文档发现自己遗漏了很重要的一条信息,如下图:
我们的这个less-loader必须是6.0.0的 。
但是这个啥时候我看vue/cli中默认下载的是5.0.0的包。因此在把less-loader升级到6.0.0之后,问题也就解决了.
2. 建立一个单独的 less 变量文件,引入这个文件覆盖 antd.less 里的变量.
1
2
|
@import
'~ant-design-vue/dist/antd.less'
;
// 引入官方提供的 less 样式入口文件
@import
'your-theme-file.less'
;
// 用于覆盖上面定义的变量
|
具体还是参考我们的 官方文档.
按需加载很重要!!! 但是由于博主很懒。暂时还没有在vue3.0尝试.
到此这篇关于vue3.0中友好使用antdv的文章就介绍到这了,更多相关vue3.0使用antdv内容请搜索我以前的文章或继续浏览下面的相关文章希望大家以后多多支持我! 。
原文链接:https://blog.csdn.net/qq_44983621/article/details/112195879 。
最后此篇关于vue3.0中友好使用antdv示例详解的文章就讲到这里了,如果你想了解更多关于vue3.0中友好使用antdv示例详解的内容请搜索CFSDN的文章或继续浏览相关文章,希望大家以后支持我的博客! 。
为了我们公司的 SEO 需求,我们需要通过 301 将一些 SEO URL 更改为另一个 URL。 示例: /seo/keywords-1-2-3/ 到 /seo/mynew301page-1-2-3
使已经开发的 Vue 应用程序对 SEO 友好的最简单方法是什么(搜索引擎可以读取所有标题元标记)。 我已经研究过 NUXT,我将不得不再次重新构建整个过程,而且除了 SSR(服务器端渲染)部分之外,
我正在使用 Azure 数据库进行一些数据库管理,我需要执行查询,例如删除数据库中的所有约束。 sp_MSForEachTable 在使用 Azure 数据库时不可用,因此我正在采用不同的方法来实现此
在我的研究中,我发现了 2 种方法。 两者都需要修改 Global.Asax 中的 Application_BeginRequest 过程,您可以在其中运行代码来进行实际的 URL 映射(我的数据库
例如我有这个字符串: make no@ sen# `se ! 我会像这样生成 url make-no-sen-se! 我有这个: var value = $('.titleVal').val(
我有一个网站,我想开始使用友好的 URL。 所以不是: http://server.com/company.php?id=12 我可以使用: http://server.com/company/ste
我正在用 pandas 编写一些数据分析管道。我一直在使用的数据框中的一列是由自定义编写的类的对象组成的,每个类都用一个字符串初始化,我用正则表达式从中读取各种信息并存储在对象的属性中。子类结构类似于
这个问题已经存在: C++ create new windows command [closed] 关闭 4 年前。 我正在尝试创建一个 C++ 控制台应用程序并创建新命令。 我想做的事的例子:在终
关闭。这个问题不符合Stack Overflow guidelines .它目前不接受答案。 这个问题似乎与 help center 中定义的范围内的编程无关。 . 关闭 8 年前。 Improve
我一直在尝试为 prestashop 中的产品创建第二个 url 重写选项.在 SEO 和 URL 部分的标准 Prestashop 安装中,我得到了以下产品 url 构建: {category:/}
我在使用重写引擎通过友好的 url 实现我的目标时遇到了一些问题。 基本上我有以下结构:- 索引.php - 吃下 - index.php 我在主索引中的链接是这样的:下载/index.php?dow
我真的不喜欢在链接中使用选择/选项元素: 但是他们已经找到了作为一种选择进入设计师组合的方式,并尽我所能劝阻他们不要使用它们,我知道如果没有谷歌的力量,我会输掉这场战斗,而且“这对 SEO 不利”。
dispose: function() { var disposer; while (disposer = this._disposers.shift()) { // expected
我将 Heroku 应用程序上的自定义域更改为新域。现在我将创建一个新的 Heroku 应用程序,它的唯一目的是重定向到第一个应用程序。 我在 Google Webmasters 中读到我应该像这样进
我有一个类。这个类有2个字段。 我有一个整数数组。我的任务是重载友好的“+”运算符,以便可以将数组中的字段值与数组元素的值相加。 例如: class Test { public: double
这个问题在这里已经有了答案: Encode URL in JavaScript (22 个答案) 关闭 9 年前。 您好,我有这个 URL(顶部),我正在尝试与“pinterest”一起使用,他们会
jQuery 模式对话框 seo 友好吗?如果不是,我们可以进行哪些更改,以便爬虫可以轻松读取模态对话框中的内容? 提前致谢。 编辑:抱歉忘记提及模式中的内容来自服务器端。所以它也使用 ajax。 最
这是我的 main.js 文件: jQuery(function($) { $('LI.tree-item-name').has('ul').click(function() { if (
static func randomShape() -> Shape { // Find out count of possible shapes var maxValue = 0
我正在构建一个通过 index.php 运行所有代码的网站。 例如 index.php?controller=something&id=01234。 我想使用 PHP 创建友好的 URL,所以我这样做
我是一名优秀的程序员,十分优秀!