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 配置可以查看官方文档

相关推荐
寻星探路1 小时前
Java EE初阶启程记13---JUC(java.util.concurrent) 的常见类
java·开发语言·java-ee
哲Zheᗜe༘1 小时前
了解学习Python编程之python基础
开发语言·python·学习
落日漫游2 小时前
数据结构笔试核心考点
java·开发语言·算法
寻找华年的锦瑟2 小时前
Qt-配置文件(INI/JSON/XML)
开发语言·qt
HY小海2 小时前
【C++】AVL树实现
开发语言·数据结构·c++
workflower2 小时前
Fundamentals of Architectural Styles and patterns
开发语言·算法·django·bug·结对编程
Roc-xb2 小时前
ModuleNotFoundError: No module named ‘conda_token‘
开发语言·python·conda
人工干智能3 小时前
Python 开发中:`.ipynb`(Jupyter Notebook 文件)和 `.py`(Python 脚本文件)
开发语言·python·jupyter
爱生活的苏苏3 小时前
elementUI 表单验证-联动型校验
前端·javascript·elementui
Jay-juice3 小时前
QT信号与槽
开发语言·qt