指引

开始

初始化项目

yarn create @vitejs/app my-vue-app --template vue-ts or yarn create @vitejs/app my-vue-app --template vue
cd my-vue-app
yarn or npm i or npm install

安装相关依赖

tsx

一般我自己喜欢使用vue和tsx混用 所以需要安装jsx相关依赖,不用jsx可以忽略。

yarn add @vitejs/plugin-vue-jsx -D

ts

这边我们需要安装@types/node 以便使用ts的时候能识别到类型

yarn add @types/node -D

按需导入

yarn add vite-plugin-style-import -D

windicss

yarn add  vite-plugin-windicss windicss -D

// vite.config.js
import WindiCSS from 'vite-plugin-windicss'

export default {
  plugins: [
    WindiCSS(),
  ],
}

// main.js
import 'virtual:windi.css'

具体的可以访问文档windicss

CSS 预处理器

vite 已经对.scss, .sass, .less, .styl 和 .stylus 文件的内置了,但相应的预处理器依赖本身必须安装

// .scss and .sass
npm install -D sass

//  .less
npm install -D less

// .styl and .stylus
npm install -D stylus

vite.config

如果使用的是vue-ts模版可以把vite.config.js 后戳 改为.ts

import type { ConfigEnv, UserConfig } from 'vite';
import { loadEnv } from 'vite';
import vue from '@vitejs/plugin-vue';
import vueJsx from '@vitejs/plugin-vue-jsx'; //使用jsx 就需要引入
import WindiCSS from 'vite-plugin-windicss'; //windicss
import styleImport from 'vite-plugin-style-import'; //按需导入组件库样式
import path from 'path';

function resolve(dir: string) {
    return path.resolve(__dirname, dir);
}
//mode 是当前环境  development 开发环境 production 生产环境
export default ({ mode }: ConfigEnv): UserConfig => {
    const root = process.cwd(); //项目根目录
    const env = loadEnv(mode, root); //获得环境变量.env
      const { VITE_PORT, VITE_HOST, VITE_OUTPUT_DIR, VITE_BASE_URL } = env;
    return {
      root,
      base: VITE_BASE_URL,
      resolve: {
            alias: {
                '@': resolve('src'),  //使用ts 需要配置tsconfig.json paths字段
              },
          },
      server: {
            host: VITE_HOST, //服务器主机名
            port: +VITE_PORT, //端口号
            // strictPort: true, //设为 true 时若端口已被占用则会直接退出，而不是尝试下一个可用端口。
            https: false,
            open: true, //服务器启动后自动打开
            hmr: true,
            //本地代理
            proxy: {},
            },
      build: {
            target: 'es2015', //浏览器兼容性
            outDir: VITE_OUTPUT_DIR, //输出目录
            cssCodeSplit: true, //CSS 代码拆分
            chunkSizeWarningLimit: 1000, //小于此阈值的导入或引用资源将内联为 base64 编码，以避免额外的 http 请求。设置为 0 可以完全禁用此项。
            sourcemap: false, //构建后是否生成 source map 文件。
            brotliSize: true, // brotli 压缩大小报告
          },
              plugins: [
            vue(), //vue
            vueJsx(), //jsx
            WindiCSS(), //如果需要使用tailwindcss 可以到https://windicss.org/integrations/vite.html
      styleImport({
        libs: [
          {
            libraryName: 'ant-design-vue',
            esModule: true,
            resolveStyle: (name) => {
              return `ant-design-vue/es/${name}/style/index`;
            },
          },
          {
            libraryName: 'antd',
            esModule: true,
            resolveStyle: (name) => {
              return `antd/es/${name}/style/index`;
            },
          },
          {
            libraryName: 'vant',
            esModule: true,
            resolveStyle: (name) => {
              return `vant/es/${name}/style`;
            },
          },
          {
            libraryName: 'element-plus',
            resolveStyle: (name) => {
              return `element-plus/lib/theme-chalk/${name}.css`;
            },
            resolveComponent: (name) => {
              return `element-plus/lib/${name}`;
            },
          },
        ],
      }),
            }),
        ],
    }
}）

.env

//.env
VITE_HOST = '0.0.0.0'
VITE_PORT = 4000
VITE_BASE_URL = './'
VITE_OUTPUT_DIR = 'dist'
//.env.development
VITE_API_DOMAIN = '/api'
//.env.production
VITE_API_DOMAIN = '/api'

tsconfig

{
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "moduleResolution": "node",
    "strict": true,
    "jsx": "preserve",
    "allowJs": true,
    "sourceMap": true,
    "resolveJsonModule": true,
    "suppressImplicitAnyIndexErrors": true,
    "esModuleInterop": true,
    "lib": ["esnext", "es2015", "dom"],
    "baseUrl": ".",
    "types": ["vite/client"],
    "paths": {
      "@/*": ["src/*"]
    }
  },
  "include": [
    "src/**/*.ts",
    "src/**/*.d.ts",
    "src/**/*.tsx",
    "src/**/*.vue"
  ],
  "exclude": ["dist", "node_modules"]
}

如果需要使用eslint和prettier可以参考以下文章

相关依赖链接

vite

plugin-vue-jsx

windicss

vite-plugin-style-import