使用Vite搭建Vue3项目及环境配置

2024-08-02 11:12:14 浏览数 (2)

前言

Vite 和 Webpack 都是流行的前端构建工具，但它们在设计理念和实现方式上有一些关键区别，使得 Vite 在某些方面相比 Webpack 有明显的优势。

以下是 Vite 相比 Webpack 的一些主要优势：

  1. 更快的启动速度：Vite 使用原生的 ES 模块（ESM）来实现更快的开发服务器启动时间。它在开发过程中按需加载模块，而不是像 Webpack 那样在启动时打包整个应用。因此，Vite 的开发服务器能够快速响应和启动。
  2. 更快的热更新（HMR）：Vite 的热更新速度比 Webpack 更快。由于 Vite 直接利用浏览器的模块导入机制，只需要替换发生变化的模块，更新的速度和效率都得到了提升。
  3. 更简单的配置：Vite 的配置通常比 Webpack 更简单易用。Webpack 的配置文件可以非常复杂，而 Vite 通过合理的默认配置和更少的配置需求，简化了设置过程。
  4. 现代构建工具：Vite 是为现代浏览器和现代开发环境设计的，它充分利用了 ES 模块和浏览器的原生特性，避免了 Webpack 中的一些传统限制，如对 CommonJS 模块的处理。
  5. 更好的支持 TypeScript 和 JSX：Vite 对 TypeScript 和 JSX 的支持更加开箱即用，通常无需额外配置就可以在项目中使用这些特性。
  6. 更小的生产构建体积：Vite 在生产构建时使用了 Rollup 作为打包工具，这通常能生成更小的输出文件和更高效的代码分割，相比 Webpack 提供了更优的性能。
  7. 原生的动态导入：Vite 支持原生的动态导入（dynamic import），允许在应用运行时动态加载模块，而 Webpack 的实现可能需要更多配置和插件支持。

创建项目

首先要保证Node.js的版本为18.3 或更高版本

代码语言：javascript复制
nvm list
nvm install 18.20.4
nvm use 18.20.4

创建项目

代码语言：javascript复制
npm create vue@latest

根据提示创建即可。

添加Less

安装less

代码语言：javascript复制
npm install -D less

这样就安装好了可以使用了

自动引用变量

vite.config.js中添加以下配置

代码语言：javascript复制
import { fileURLToPath, URL } from 'node:url'

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  },
  css: {
    preprocessorOptions: {
      less: {
        additionalData: '@import "@/assets/css/_variables.less";',
        javascriptEnabled: true
      }
    }
  }
})

主要是

代码语言：javascript复制
css: {
    preprocessorOptions: {
      less: {
        additionalData: '@import "@/assets/css/_variables.less";',
        javascriptEnabled: true
      }
    }
}

添加我们的变量文件/assets/css/_variables.less

代码语言：javascript复制
@z_space_m: 1.6rem;

@z_font_m: 1.6rem;
@z_font_l: 1.8rem;

这个配置会自动将 _variables.less 文件引入到所有的 less文件中，这样我们定义的变量less文件就不用再引用就可以使用了。

全局样式

在main.js中添加全局样式

代码语言：javascript复制
import "@/assets/css/_common.less"

假如添加如下

代码语言：javascript复制
.z_font_m {
  font-size: @z_font_m;
}

.z_font_l {
  font-size: @z_font_l;
}

这样所有页面就可以直接使用这些样式了。

页面中引用

代码语言：javascript复制
<style lang="less">
@import "@/assets/css/home.less";
</style>

添加Sass

安装sass

代码语言：javascript复制
npm install -D sass

这样就安装好了可以使用了

自动引用变量

vite.config.js中添加以下配置

代码语言：javascript复制
import { fileURLToPath, URL } from 'node:url'

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  },
  css: {
    preprocessorOptions: {
      scss: {
        additionalData: '@import "@/assets/css/_variables.scss";',
        javascriptEnabled: true
      }
    }
  }
})

主要是

代码语言：javascript复制
css: {
    preprocessorOptions: {
      scss: {
        additionalData: '@import "@/assets/css/_variables.scss";',
        javascriptEnabled: true
      }
    }
}

添加我们的变量文件/assets/css/_variables.scss

代码语言：javascript复制
$z_space_m: 1.6rem;

$z_font_m: 1.6rem;
$z_font_l: 1.8rem;

这个配置会自动将 _variables.scss 文件引入到所有的 scss文件中，这样我们定义的变量scss文件就不用再引用就可以使用了。

全局样式

在main.js中添加全局样式

代码语言：javascript复制
import "@/assets/css/_common.scss"

假如添加如下

代码语言：javascript复制
.z_font_m {
  font-size: $z_font_m;
}

.z_font_l {
  font-size: $z_font_l;
}

这样所有页面就可以直接使用这些样式了。

页面中引用

代码语言：javascript复制
<style lang="scss">
@import "@/assets/css/home.scss";
</style>

添加Ant Design Vue

https://www.antdv.com/docs/vue/getting-started-cn

Ant Design 和 iView都是不错的UI框架，这里更推荐使用Ant Design，最大的原因是：

虽然Ant Design 和 iView都是使用的Less，但是Ant Design提供了一种新的设置主题的方式。

安装和引用

代码语言：javascript复制
npm i --save ant-design-vue@4.x

引用

代码语言：javascript复制
import {createApp} from 'vue'
import {createPinia} from 'pinia'

import App from './App.vue'
import router from './router'

import Antd from 'ant-design-vue';
import 'ant-design-vue/dist/reset.css';

const app = createApp(App)

app.use(createPinia())
app.use(router)
app.use(Antd)

app.mount('#app')

修改主题

https://www.antdv.com/docs/vue/customize-theme-cn

修改主题变量

通过在 ConfigProvider 中传入 theme，可以配置主题。

在升级 v4 后，将默认使用 v4 的主题，以下是将配置主题示例：

代码语言：javascript复制
<template>
  <a-config-provider
    :theme="{
      token: {
        colorPrimary: '#00b96b',
      },
    }"
  >
    <a-button />
  </a-config-provider>
</template>

添加iView

如果已经习惯使用iView可以参考下文设置。

安装和引用

安装

代码语言：javascript复制
npm install view-ui-plus --save

main.js中引用

代码语言：javascript复制
import "@/assets/css/_common.scss"

import {createApp} from 'vue'
import {createPinia} from 'pinia'

import App from './App.vue'
import router from './router'

import ViewUIPlus from 'view-ui-plus'
import 'view-ui-plus/dist/styles/viewuiplus.css'

const app = createApp(App)

app.use(createPinia())
app.use(router)
app.use(ViewUIPlus)

app.mount('#app')

自定义主题

如果你的项目使用了 webpack/vite 工程，可以通过变量覆盖的方式来实现主题定制。

创建文件/assets/css/my-theme/index.less。

并写入下面内容：

代码语言：javascript复制
@import '~view-ui-plus/src/styles/index.less';

// Here are the variables to cover, such as:
@primary-color: #FA7E31;

完整的变量列表可以查看 默认样式变量。

然后在入口文件 main.js 内导入这个 less 文件即可：

代码语言：javascript复制
import '@/assets/css/my-theme/index.less';
vite vue3 变量 配置 import

0 人点赞