vue项目实战系列三十：vue3升级

最新推荐文章于 2024-08-08 15:28:54 发布

Sunny_媛

最新推荐文章于 2024-08-08 15:28:54 发布

阅读量130

点赞数 2

文章标签： vue.js 前端 javascript 系统架构软件工程架构性能优化

本文链接：https://blog.csdn.net/m0_68635815/article/details/136121815

版权

本文介绍了如何使用VueCLI初始化Vue4项目，选择默认配置并手动添加Vue3预览支持。此外，还详细讲解了如何通过Yarn安装Vite并配置lessloader，以便在项目中使用Less预处理器。

摘要由CSDN通过智能技术生成

1. 初始化webpack项目:

$ vue create vue4
  ? Please pick a preset:
    Default ([Vue 2] babel, eslint)
  ❯ Default (Vue 3 Preview) ([Vue 3] babel, eslint)
    Manually select features

2. vite安装:

yarn create vite <project-name> --template vue

(1). 安装less:

yarn add -D less less-loader

// vite.config.js
export default defineConfig({
  plugins: [vue()],
  css: {
    // css预处理器
    preprocessorOptions: {
      less: {
        charset: false,
        additionalData: '@import "./src/assets/style/global.less";',
      },
    },
  }
})