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

相关推荐
钮钴禄·爱因斯晨9 分钟前
深入剖析LLM:从原理到应用与挑战
开发语言·人工智能
知识分享小能手13 分钟前
React学习教程,从入门到精通,React 使用属性(Props)创建组件语法知识点与案例详解(15)
前端·javascript·vue.js·学习·react.js·前端框架·vue
六点半88825 分钟前
【C++】C++11 篇二
开发语言·c++
DDDDDDDRDDR33 分钟前
C++容器:list
开发语言·c++·stl
Elnaij38 分钟前
从C++开始的编程生活(7)——取地址运算符重载、类型转换、static成员和友元
开发语言·c++
chen_ever1 小时前
golang之go modules
开发语言·后端·golang
摸鱼的春哥1 小时前
前端程序员最讨厌的10件事
前端·javascript·后端
郝学胜-神的一滴1 小时前
Effective Modern C++ 条款26:避免在通用引用上重载
开发语言·c++·程序人生
草莓熊Lotso1 小时前
【C++】递归与迭代:两种编程范式的对比与实践
c语言·开发语言·c++·经验分享·笔记·其他
Aczone282 小时前
硬件(六)arm指令
开发语言·汇编·arm开发·嵌入式硬件·算法