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

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

一、简介

二、创建 vue 项目

  • 创建项目(文档中还提供了 Rspack 内置 monorepo 框架 Nx 的创建方式,根据需求进行选择)
# npm 方式
$ npm create rspack@latest
# yarn 方式
$ yarn create rspack
# pnpm 方式
$ pnpm create rspack@latest
  • 创建好项目并运行,目前 Rspack 版本支持的工程模版:

    默认创建的 vue 项目为 vue3

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

    在拷贝出来的基础工程找到 package.json 中的 @rspack/cli,将它改为指定版本,或看当前下载的 rspack 是属于什么版本的,也可以直接改成使用最新版本:
# 默认的
"@rspack/cli": "workspace:*",
# 改成最新版本
"@rspack/cli": "latest",
  • 执行 $ npm i 安装依赖就可以进行开发了。

三、接入 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>

四、接入 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
  • 配置主题 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"
},
...
  • 在配置路由页面的时候,记得都带好后缀,之前 import 组件、页面地址的时候一般不带后缀,但是在这里需要带上,除非自己能修改 rspack.config.js,不会修改又不带上后缀会报错:
    @.. 方式都不行,其实就是缺少了 .vue 后缀,必须要带上。
error[internal]: Resolve error
   ┌─ src/router/index.js:10:40
 6 │     {
 7 │       path: '/home',
 8 │       name: 'home',
 9 │       // component: () => import('@/views/home/Home'),
10 │       component: () => 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 配置可以查看官方文档
相关文章
|
7天前
|
编解码 前端开发 JavaScript
js react antd 实现页面低分变率和高分变率下字体大小自适用,主要是配置antd
在React中结合Ant Design与媒体查询,通过less变量和响应式断点动态调整`@font-size-base`,实现多分辨率下字体自适应,提升跨设备体验。
30 2
|
7月前
|
JSON 自然语言处理 前端开发
【01】对APP进行语言包功能开发-APP自动识别地区ip后分配对应的语言功能复杂吗?-成熟app项目语言包功能定制开发-前端以uniapp-基于vue.js后端以laravel基于php为例项目实战-优雅草卓伊凡
【01】对APP进行语言包功能开发-APP自动识别地区ip后分配对应的语言功能复杂吗?-成熟app项目语言包功能定制开发-前端以uniapp-基于vue.js后端以laravel基于php为例项目实战-优雅草卓伊凡
303 72
【01】对APP进行语言包功能开发-APP自动识别地区ip后分配对应的语言功能复杂吗?-成熟app项目语言包功能定制开发-前端以uniapp-基于vue.js后端以laravel基于php为例项目实战-优雅草卓伊凡
|
7月前
|
资源调度 JavaScript 前端开发
前端开发必备!Node.js 18.x LTS保姆级安装教程(附国内镜像源配置)
本文详细介绍了Node.js的安装与配置流程,涵盖环境准备、版本选择(推荐LTS版v18.x)、安装步骤(路径设置、组件选择)、环境验证(命令测试、镜像加速)及常见问题解决方法。同时推荐开发工具链,如VS Code、Yarn等,并提供常用全局包安装指南,帮助开发者快速搭建高效稳定的JavaScript开发环境。内容基于官方正版软件,确保合规性与安全性。
5839 24
|
6月前
|
JavaScript 安全 前端开发
关于Node.js,一定要学这个10+万Star项目 !!
一篇关于Node.js的宝藏项目——Node.js Best Practices。该项目在GitHub上已有102k Star,汇集了100+条最佳实践,涵盖架构、安全、性能等多方面。每条实践不仅有简明说明和详细解释,还附带代码示例及资源链接。文中通过三个实战案例(利用CPU多核、避免阻塞事件循环、使用中间件处理错误)展示了其实际应用价值,并推荐了几条对前端转Node.js开发者特别有用的最佳实践。强烈建议每位Node.js开发者学习此项目,理解“怎么做”与“为什么要这么做”,以提升开发能力。
162 3
|
8月前
|
人工智能 JavaScript 关系型数据库
【02】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-ui设计图figmaUI设计准备-figma汉化插件-mysql数据库设计-优雅草卓伊凡商业项目实战
【02】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-ui设计图figmaUI设计准备-figma汉化插件-mysql数据库设计-优雅草卓伊凡商业项目实战
240 14
【02】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-ui设计图figmaUI设计准备-figma汉化插件-mysql数据库设计-优雅草卓伊凡商业项目实战
|
8月前
|
前端开发 JavaScript Java
【03】Java+若依+vue.js技术栈实现钱包积分管理系统项目-若依框架搭建-服务端-后台管理-整体搭建-优雅草卓伊凡商业项目实战
【03】Java+若依+vue.js技术栈实现钱包积分管理系统项目-若依框架搭建-服务端-后台管理-整体搭建-优雅草卓伊凡商业项目实战
338 13
【03】Java+若依+vue.js技术栈实现钱包积分管理系统项目-若依框架搭建-服务端-后台管理-整体搭建-优雅草卓伊凡商业项目实战
|
8月前
|
SQL JavaScript 安全
【04】Java+若依+vue.js技术栈实现钱包积分管理系统项目-若依框架二次开发准备工作-以及建立初步后端目录菜单列-优雅草卓伊凡商业项目实战
【04】Java+若依+vue.js技术栈实现钱包积分管理系统项目-若依框架二次开发准备工作-以及建立初步后端目录菜单列-优雅草卓伊凡商业项目实战
301 11
【04】Java+若依+vue.js技术栈实现钱包积分管理系统项目-若依框架二次开发准备工作-以及建立初步后端目录菜单列-优雅草卓伊凡商业项目实战
|
7月前
|
Prometheus 监控 JavaScript
Node.js连接池配置的五个隐形陷阱与防御体系:从创业公司血泪史说起
文章以创业公司血泪史为例,详细阐述了 Node.js 连接池配置的五个隐形陷阱及防御体系。包括连接泄漏、配置参数算术错误、异步异常导致崩溃、跨连接事务问题、监控缺失,并介绍了相应的解决办法和终极防御手段,强调在确定性与不确定性中寻找平衡,建立自适应机制。
126 13
|
8月前
|
人工智能 JavaScript 安全
【01】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-需求改为思维导图-设计数据库-确定基础架构和设计-优雅草卓伊凡商业项目实战
【01】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-需求改为思维导图-设计数据库-确定基础架构和设计-优雅草卓伊凡商业项目实战
308 13
【01】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-需求改为思维导图-设计数据库-确定基础架构和设计-优雅草卓伊凡商业项目实战
|
7月前
|
资源调度 JavaScript 前端开发
Pinia 如何在 Vue 3 项目中进行安装和配置?
Pinia 如何在 Vue 3 项目中进行安装和配置?
503 4

热门文章

最新文章