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

相关推荐
XiaoLeisj2 小时前
【JavaEE初阶 — 多线程】单例模式 & 指令重排序问题
java·开发语言·java-ee
励志成为嵌入式工程师3 小时前
c语言简单编程练习9
c语言·开发语言·算法·vim
捕鲸叉3 小时前
创建线程时传递参数给线程
开发语言·c++·算法
A charmer3 小时前
【C++】vector 类深度解析:探索动态数组的奥秘
开发语言·c++·算法
Peter_chq3 小时前
【操作系统】基于环形队列的生产消费模型
linux·c语言·开发语言·c++·后端
记录成长java5 小时前
ServletContext,Cookie,HttpSession的使用
java·开发语言·servlet
前端青山5 小时前
Node.js-增强 API 安全性和性能优化
开发语言·前端·javascript·性能优化·前端框架·node.js
睡觉谁叫~~~5 小时前
一文解秘Rust如何与Java互操作
java·开发语言·后端·rust
音徽编程5 小时前
Rust异步运行时框架tokio保姆级教程
开发语言·网络·rust
观音山保我别报错5 小时前
C语言扫雷小游戏
c语言·开发语言·算法