Rspack 创建 vue2/3 项目接入 antdv(rspack.config.js 配置 less 主题)

一、简介

  • Rspack CLI 官方文档。

  • rspack.config.js 官方文档。

二、创建 vue 项目

  • 创建项目(文档中还提供了 Rspack 内置 monorepo 框架 Nx 的创建方式,根据需求进行选择)

    # npm 方式
    $ npm create rspack@latest# yarn 方式
    $ yarn create rspack# pnpm 方式
    $ pnpm create rspack@latest
    
  • 创建好项目并运行,目前 Rspack 版本支持的工程模版:

    image.png

    默认创建的 vue 项目为 vue3

    image.png

  • 如果需要其他版本,或其他框架的基础工程,可到官方提供的 rspack 工程拷贝一个基础工程模版进行使用:

    image.png

    在拷贝出来的基础工程找到 package.json 中的 @rspack/cli,将它改为指定版本,或看当前下载的 rspack 是属于什么版本的,也可以直接改成使用最新版本:

    # 默认的
    "@rspack/cli": "workspace:*",# 改成最新版本
    "@rspack/cli": "latest",
    

    执行 $ npm i 安装依赖就可以进行开发了。

三、接入 antdv@4.x

  • antdv 快速上手,直接使用官方最新版本 4.x 试试:

    $ npm i --save ant-design-vue@4.x
    
  • main.js

    ...
    import Antd from 'ant-design-vue';
    import 'ant-design-vue/dist/reset.css';createApp(App).use(Antd).mount("#app");
    
  • App.vue

    <template><a-button type="primary" ghost>Primary1</a-button><a-config-provider:theme="{token: {colorPrimary: '#00b96b'}}"><a-button type="primary" ghost>Primary2</a-button></a-config-provider><a-button type="primary" ghost>Primary3</a-button>
    </template>
    

    image.png

四、接入 antdv@1.7.8 老版本(并通过 rspack.config.js 配置主题)

  • 通过上面创建 vue2 项目,并修改好 @rspack/cli 版本,执行:

    # 安装依赖
    $ npm i
    
  • 安装 antdv

    $ npm i ant-design-vue@1.7.8
    
  • main.js

    import Antd from 'ant-design-vue';
    import 'ant-design-vue/dist/antd.css';
    // import 'ant-design-vue/dist/antd.less';
    Vue.config.productionTip = false;
    Vue.use(Antd);
    
  • App.vue

    <template><div class="container"><a-button type="primary">Primary</a-button></div> 
    </template>
    
  • 运行项目

    $ npm run dev
    

    image.png

  • 配置主题 main.js

    import Antd from 'ant-design-vue';
    // import 'ant-design-vue/dist/antd.css';
    // 使用 less 展示方式
    import 'ant-design-vue/dist/antd.less';
    Vue.config.productionTip = false;
    Vue.use(Antd);
    
  • 可能会报错:

    error[internal]: Napi Error: GenericFailure - 
    // https://github.com/ant-design/ant-motion/issues/44
    .bezierEasingMixin();
    

    解决方案:

    方案一:【推荐】找到 rspack.config.js 中的 module,里面使用了 less-loader,对它进行调整:

    ....
    {test: /\.less$/,use: ["vue-style-loader", "css-loader", "less-loader"],type: "javascript/auto"
    },
    ...
    

    将上面的配置方式,按下面的调整,就解决报错了

    ...
    {test: /\.less$/,use: ["vue-style-loader", "css-loader", {loader: "less-loader",options: {lessOptions: {javascriptEnabled: true}}}],type: "javascript/auto"
    },
    ...
    

    方案二:打开项目 package.json,将 less 版本降到 3.0 以下,例如 2.7.3 版本。

  • 接着可能会报错

    error[internal]: Napi Error: GenericFailure - position: absolute;top: 8px + @font-size-base * @line-height-base / 2 - @font-size-base / 2;
    

    原因:less 在第 7 版本改变了原有的除法运算,所以无法识别

    解决办法:

    # 移除高版本less-laoder
    $ npm uni less-loader# 指定安装 less-loader 6 版本
    $ npm i less-loader@6 -D
    

    解决之后,就能正常运行项目了。

  • rspack.config.js 中添加一个主题色,保存重新运行,主题色生效。

    ...
    {test: /\.less$/,use: ["vue-style-loader", "css-loader", {loader: "less-loader",options: {modifyVars: {'primary-color': '#1DA57A'},lessOptions: {javascriptEnabled: true}}}],type: "javascript/auto"
    },
    ...
    

    image.png

  • 在配置路由页面的时候,记得都带好后缀,之前 import 组件、页面地址的时候一般不带后缀,但是在这里需要带上,除非自己能修改 rspack.config.js,不会修改又不带上后缀会报错:

    @.. 方式都不行,其实就是缺少了 .vue 后缀,必须要带上。

    error[internal]: Resolve error┌─ src/router/index.js:10:406{7 │       path: '/home',8 │       name: 'home',9// component: () => import('@/views/home/Home'),
    10component: () => import('../views/home/Home'),│ ╭────────────────────────────────────────^
    11 │ │     // component: Home,│ ╰────────────────^ Failed to resolve ../views/home/Home in /Users/dengzemiao/Desktop/Project/rspack/test/src/router/index.js
    12 │       meta: { title: '首页', keepAlive: false, icon: 'idcard' }
    13}
    14]
    

    提示:vue-router 需要单独安装,rspack 提供的基础库好像并不自带,可以查看下 package.json 确定下。

    import Vue from 'vue'
    import Router from 'vue-router'
    import Home from '../views/home/Home.vue'export const routes = [{path: '/home',name: 'home',// component: () => import('@/views/home/Home.vue'),// component: () => import('../views/home/Home.vue'),component: Home,meta: { title: '首页' }}
    ]Vue.use(Router)export default new Router({mode: 'history',scrollBehavior: () => ({ y: 0 }),routes
    })
    
  • 更多 rspack.config.js 配置可以查看官方文档

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/106407.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Linux 终端命令之文件目录操作,对比Dos相关命令

目录 前言 基础命令&#xff08;文件目录相关的&#xff09; cd命令 【英文帮助】 【对应Dos命令】 pwd命令 【英文帮助】 【对应Dos命令】 ls命令 【英文帮助】 【对应Dos命令】 tree命令 【英文帮助】 【对应Dos命令】 mkdir命令 【英文帮助】 【对应Dos命令…

718. 最长重复子数组

718. 最长重复子数组 原题链接&#xff1a;完成情况&#xff1a;题解&#xff1a;方法一&#xff1a;动态规划方法二&#xff1a;滑动窗口方法三&#xff1a;二分查找 哈希 原题链接&#xff1a; 718. 最长重复子数组 https://leetcode.cn/problems/maximum-length-of-repe…

二甲医院信息管理系统源码 his系统源码 java+Angular+JavaScript

云HIS系统采用SaaS软件应用服务模式&#xff0c;提供软件应用服务多租户机制&#xff0c;实现一中心部署多机构使用。主要包含收费计费、药品管理、门诊医生工作站、住院医生工作站、护士工作站、数据统计、电子病历、医保接口等功能&#xff0c;能够满足医院及诊所日常业务开展…

人力资源小程序的设计方案与实现

随着互联网的发展&#xff0c;人才招聘已经成为许多企业的一项重要任务。为了提高招聘效率和便利求职者&#xff0c;许多企业开始采用小程序作为招聘平台。本文将为大家介绍一个搭建本地人才招聘网小程序的实用指南。 首先&#xff0c;我们需要登录【乔拓云】制作平台&#xff…

GNU-gcc编译选项-1

include目录 -I &#xff0c;比如: -I. -I ./Platform/include -I ./Platform/include/prototypes -I ./tpm/include -I ./tpm/include/prototypes -I ./Simulator/include -I ./Simulator/include/prototypes 编译选项 在GCC编译器中&#xff0c;-D是一个编译选项&…

基于开源IM即时通讯框架MobileIMSDK:RainbowChat-iOS端v7.0版已发布

关于MobileIMSDK MobileIMSDK 是一套专门为移动端开发的开源IM即时通讯框架&#xff0c;超轻量级、高度提炼&#xff0c;一套API优雅支持 UDP 、TCP 、WebSocket 三种协议&#xff0c;支持 iOS、Android、H5、标准Java、小程序、Uniapp&#xff0c;服务端基于Netty编写。 工程…

区分什么是Java内存模型(JMM)和 JVM运行时数据区

文章目录 一、概念区分1、什么是内存模型&#xff1f;什么是&#xff08;内存区域&#xff09;运行时数据区&#xff1f;2、为什么要有Java内存模型&#xff1f;2.1、硬件的效率与一致性2.2、 CPU和缓存的一致性2.2.1、为什么需要CPU cache&#xff1f;2.2.2、三级缓存&#xf…

Redis知识点总结

概述 Redis诞生于2009年&#xff0c;全称是Remote Dictionarty Server(远程词典服务器) 只支持单线程 非关联&#xff1a;主要指的是表中没有主外键等概念 Redis是一款内存数据库&#xff0c;主要存储键值对类型的数据 基本用法 注意&#xff1a;该操作是在cli中进行的 首…

【MySQL系列】统计函数(count,sum,avg)详解

&#x1f490; &#x1f338; &#x1f337; &#x1f340; &#x1f339; &#x1f33b; &#x1f33a; &#x1f341; &#x1f343; &#x1f342; &#x1f33f; &#x1f344;&#x1f35d; &#x1f35b; &#x1f364; &#x1f4c3;个人主页 &#xff1a;阿然成长日记 …

【面向大一新生IT技术社群招新啦,不来瞅瞅?】

个人名片&#xff1a; &#x1f43c;作者简介&#xff1a;一名大三在校生 &#x1f43b;‍❄️个人主页&#xff1a;落798. &#x1f43c;个人WeChat&#xff1a;落798. &#x1f54a;️系列专栏&#xff1a;【零基础学java】 ----- 【重识c语言】 ---- 【计算机网络】—【Spri…

接口测试时遇到接口加密了该如何处理?

对明文编码生成信息摘要&#xff0c;以防止被篡改。比如MD5使用的是Hash算法&#xff0c;无论多长的输入&#xff0c;MD5都会输出长度为128bits的一个串。摘要算法不要秘钥&#xff0c;客户端和服务端采用相同的摘要算法即可针对同一段明文获取一致的密文。 对称加密 对称加密…

设计模式之工厂模式(万字长文)

文章目录 概述工厂模式的优点包括工厂模式有几种主要的变体看一个具体需求使用传统的方式来完成传统的方式的优缺点 简单工厂模式基本介绍使用简单工厂模式简单工厂模式的优缺点优点&#xff1a;缺点&#xff1a; 工厂方法模式看一个新的需求思路 1思路 2工厂方法模式介绍工厂方…

macOS上编译obs-studio

前言 最近基于obs的1个二开程序&#xff0c;需要移植到macOS平台上&#xff0c;由于遇到些问题&#xff0c;本文记录下如何在macOS上配置&编译&运行obs程序完整过程。 下载 首先下载cmake-gui工具&#xff0c;下载CMAKE&#xff0c;选择对应macOS平台的cmake版本&…

【ArcGIS微课1000例】0074:ArcGIS热点分析(Getis-Ord Gi*)---犯罪率热点图

严重声明:本文来自专栏《ArcGIS微课1000例:从点滴到精通》,为CSDN博客专家刘一哥GIS原创,原文及专栏地址为:(https://blog.csdn.net/lucky51222/category_11121281.html),谢绝转载或爬取!!! 文章目录 一、热点分析工具介绍二、ArcGIS热点分析案例1. 普通热点分析2. 加…

【ArcGIS微课1000例】0072:如何生成空间权重矩阵

严重声明:本文来自专栏《ArcGIS微课1000例:从点滴到精通》,为CSDN博客专家刘一哥GIS原创,原文及专栏地址为:(https://blog.csdn.net/lucky51222/category_11121281.html),谢绝转载或爬取!!! 文章目录 一、空间权重矩阵工具介绍二、ArcGIS生成空间权重矩阵三、注意事项…

从零开始配置Jenkins与GitLab集成:一步步实现持续集成

在软件开发中&#xff0c;持续集成是确保高效协作和可靠交付的核心实践。以下是在CentOS上安装配置Jenkins与GitLab集成的详细步骤&#xff1a; 1.安装JDK 解压JDK安装包并设置环境变量&#xff1a; JDK下载网址 Java Downloads | Oracle 台灣 tar zxvf jdk-11.0.5_linux-x64_b…

设计模式三原则

1.1单一职责原则 C 面向对象三大特性之一的封装指的就是将单一事物抽象出来组合成一个类&#xff0c;所以我们在设计类的时候每个类中处理的是单一事物而不是某些事物的集合。 设计模式中所谓的单一职责原则&#xff0c;就是对一个类而言&#xff0c;应该仅有一个引起它变化的原…

怎么借助ChatGPT处理数据结构的问题

目录 使用ChatGPT进行数据格式化转换 代码示例 ChatGPT格式化数据提示语 代码示例 批量格式化数据提示语 代码示例 ChatGPT生成的格式化批处理代码 使用ChatGPT合并不同数据源的数据 合并数据提示语 自动合并数据提示语 ChatGPT生成的自动合并代码 结论 数据合并是…

RT-Thread内核学习

内核框架 内核是操作系统最基础也是最重要的部分&#xff0c;内核处于硬件层之上&#xff0c;内核部分包括内核库、实时内核实现。 内核库是为了保证内核能够独立运行的一套小型的类似C库的函数实现子集。这部分根据编译器不同自带C库的情况也会不同。 当使用GNU GCC编译器时&…

波奇学C++:stl的list模拟实现

list是双向带头链表。所以迭代器end()相当于哨兵卫的头。 list不支持和[]重载&#xff0c;原因在于list空间不是连续的&#xff0c;和[]的代价比较大。 访问第n个节点&#xff0c;只能用for循环&#xff0c;来实现 list<int> l; l.push_back(0); l.push_back(1); l.pu…