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

相关推荐
前端Hardy23 分钟前
纯HTML&CSS实现3D旋转地球
前端·javascript·css·3d·html
susu108301891126 分钟前
vue3中父div设置display flex,2个子div重叠
前端·javascript·vue.js
湫ccc1 小时前
《Python基础》之字符串格式化输出
开发语言·python
mqiqe1 小时前
Python MySQL通过Binlog 获取变更记录 恢复数据
开发语言·python·mysql
AttackingLin2 小时前
2024强网杯--babyheap house of apple2解法
linux·开发语言·python
Ysjt | 深2 小时前
C++多线程编程入门教程(优质版)
java·开发语言·jvm·c++
ephemerals__2 小时前
【c++丨STL】list模拟实现(附源码)
开发语言·c++·list
码农飞飞2 小时前
深入理解Rust的模式匹配
开发语言·后端·rust·模式匹配·解构·结构体和枚举