谷城建设局网站,河南建站网站,荣耀正品查询入口,东莞企业网站开发一、简介 Rspack CLI 官方文档。 rspack.config.js 官方文档。
二、创建 vue 项目 创建项目#xff08;文档中还提供了 Rspack 内置 monorepo 框架 Nx 的创建方式#xff0c;根据需求进行选择#xff09; # npm 方式
$ npm create rspacklatest# yarn 方式
$ yarn create…一、简介 Rspack CLI 官方文档。 rspack.config.js 官方文档。
二、创建 vue 项目 创建项目文档中还提供了 Rspack 内置 monorepo 框架 Nx 的创建方式根据需求进行选择 # npm 方式
$ npm create rspacklatest# yarn 方式
$ yarn create rspack# pnpm 方式
$ pnpm create rspacklatest创建好项目并运行目前 Rspack 版本支持的工程模版 默认创建的 vue 项目为 vue3 如果需要其他版本或其他框架的基础工程可到官方提供的 rspack 工程拷贝一个基础工程模版进行使用 在拷贝出来的基础工程找到 package.json 中的 rspack/cli将它改为指定版本或看当前下载的 rspack 是属于什么版本的也可以直接改成使用最新版本 # 默认的
rspack/cli: workspace:*,# 改成最新版本
rspack/cli: latest,执行 $ npm i 安装依赖就可以进行开发了。
三、接入 antdv4.x antdv 快速上手直接使用官方最新版本 4.x 试试 $ npm i --save ant-design-vue4.xmain.js ...
import Antd from ant-design-vue;
import ant-design-vue/dist/reset.css;createApp(App).use(Antd).mount(#app);App.vue templatea-button typeprimary ghostPrimary1/a-buttona-config-provider:theme{token: {colorPrimary: #00b96b}}a-button typeprimary ghostPrimary2/a-button/a-config-providera-button typeprimary ghostPrimary3/a-button
/template四、接入 antdv1.7.8 老版本并通过 rspack.config.js 配置主题 通过上面创建 vue2 项目并修改好 rspack/cli 版本执行: # 安装依赖
$ npm i安装 antdv $ npm i ant-design-vue1.7.8main.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 templatediv classcontainera-button typeprimaryPrimary/a-button/div
/template运行项目 $ npm run dev配置主题 main.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);可能会报错: error[internal]: Napi Error: GenericFailure -
// https://github.com/ant-design/ant-motion/issues/44
.bezierEasingMixin();解决方案 方案一【推荐】找到 rspack.config.js 中的 module里面使用了 less-loader对它进行调整 ....
{test: /\.less$/,use: [vue-style-loader, css-loader, less-loader],type: javascript/auto
},
...将上面的配置方式按下面的调整就解决报错了 ...
{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 版本。 接着可能会报错 error[internal]: Napi Error: GenericFailure - position: absolute;top: 8px font-size-base * line-height-base / 2 - font-size-base / 2;原因less 在第 7 版本改变了原有的除法运算所以无法识别 解决办法 # 移除高版本less-laoder
$ npm uni less-loader# 指定安装 less-loader 6 版本
$ npm i less-loader6 -D解决之后就能正常运行项目了。 rspack.config.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 配置可以查看官方文档
