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

一、简介

二、创建 vue 项目

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

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

    默认创建的 vue 项目为 vue3

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

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

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

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

三、接入 antdv@4.x

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

    sh 复制代码
    $ npm i --save ant-design-vue@4.x
  • main.js

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

    html 复制代码
    <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 版本,执行:

    sh 复制代码
    # 安装依赖
    $ npm i
  • 安装 antdv

    sh 复制代码
    $ npm i ant-design-vue@1.7.8
  • main.js

    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

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

    sh 复制代码
    $ npm run dev
  • 配置主题 main.js

    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);
  • 可能会报错:

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

    解决方案:

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

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

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

    js 复制代码
    ...
    {
            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 版本。

  • 接着可能会报错

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

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

    解决办法:

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

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

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

    js 复制代码
    ...
    {
            test: /\.less$/,
            use: ["vue-style-loader", "css-loader", {
                    loader: "less-loader",
                    options: {
                            modifyVars: {
                                    'primary-color': '#1DA57A'
                            },
                            lessOptions: {
                                    javascriptEnabled: true
                            }
                    }
            }],
            type: "javascript/auto"
    },
    ...
  • 更多 rspack.config.js 配置可以查看官方文档

相关推荐
摸鱼仙人~4 分钟前
React Ref 指南:原理、实现与实践
前端·javascript·react.js
teeeeeeemo5 分钟前
回调函数 vs Promise vs async/await区别
开发语言·前端·javascript·笔记
加油吧zkf9 分钟前
AI大模型如何重塑软件开发流程?——结合目标检测的深度实践与代码示例
开发语言·图像处理·人工智能·python·yolo
ejinxian25 分钟前
PHP 超文本预处理器 发布 8.5 版本
开发语言·php
zhanshuo1 小时前
鸿蒙UI开发全解:JS与Java双引擎实战指南
前端·javascript·harmonyos
JohnYan1 小时前
模板+数据的文档生成技术方案设计和实现
javascript·后端·架构
软件黑马王子1 小时前
C#系统学习第八章——字符串
开发语言·学习·c#
阿蒙Amon1 小时前
C#读写文件:多种方式详解
开发语言·数据库·c#
Da_秀1 小时前
软件工程中耦合度
开发语言·后端·架构·软件工程
Fireworkitte1 小时前
Java 中导出包含多个 Sheet 的 Excel 文件
java·开发语言·excel