vite 基础使用

[tiantingrui]

vite 的基础应用

vite 的优势

1. 上手非常简单
2. 开发效率极高
3. 社区成本低（兼容rollup插件）
4. 没有复杂晦涩的配置
5. 更合理的类比
   • vue-cli
   • create-react-app
   • cra 需要 eject
   • vue-cli 提供 configureWebpack 和 chainWebpack
6. vite 有自身的插件系统
7. 生态：兼容 rollup 插件
8. 快
   1. esbuild

vite 创建Vue3项目

注意点：

1. webpack\rollup 的入口文件 为 一个 js 文件
2. 而 vite 的入口文件则为 index.html 文件，vite 不需要去编译main.js app.vue 这些文件
   • 通过加载 index.html 文件之后 进入 script 去加载 main.js 文件
3. vite.config.js 文件配置 vite 相关配置
4. 推荐使用 yarn 去安装依赖

5. 使用 jsx 去开发 vue3 yarn add @vitejs/plugin-vue-jsx -D

   import { defineConfig } from 'vite'
   import vue from '@vitejs/plugin-vue'
   import vueJsx from '@vitejs/plugin-vue-jsx'
   
   export default defineConfig({
   plugins: [vue(), vueJsx()]
   })

vite 中使用CSS的各种功能

推荐使用原生 css variable

/* index.css */
:root {
  --main-bg-color: brown;
}

.root {
  @console.error hello root
  color: var(--main-bg-color)
}

vite 官方已经集成了 postcss

在项目根目录下 创建 postcss.config.js

// postcss.config.js

module.exports = {
  plugins: [require("@postcss-plugins/console")],
}

@import alias

在 vite.config.js 配置

export default defineConfig({
  resolve: {
    alias: {
      "@styles": "/src/styles"
    }
  }
})

css-modules

1. 创建一个 .module.css 文件

   /* test.module.css */
   .moduleClass {
   color: yellow
   }

2. 在App.jsx中使用

import classes from '@styles/test.module.css' 

export default defineComponent({
  setup() {
    return () => {
      return <div class={`root` ${classes.moduleClass}}> Hello vue3 jsx</div>
    }
  }
})

css pre-processors

1. 比如 less , 先去安装 yarn add less

2. 安装完成之后就可以去使用，创建一个 test.less 文件

   @bgColor: red;
   
   .root {
   background-color: @bgColor
   }

typescript 集成

vite 天生支持 ts

只编译，不校验

需要手动进行校验

tsc --noEmit

{
  "scripts": {
    "build": "tsc --noEmit && vite build"
  }
}

vite 中处理静态资源的方法

静态文件的处理

天然支持图片资源

types

1. url
2. raw
3. worker / worker inline

JSON

import {version} from '../package.json'

console.log(version)

Web Assembly

vite 集成 eslint 和 prettier

eslint

1. 安装插件

   yarn add eslint-config-standard eslint-plugin-import eslint-plugin-promise  eslint-plugin-node -D

2. 创建 .eslintrc.js

   module.exports = {
   extends: 'standard',
   rules: []
   }

prettier

1. 创建 .prettierrc

   {
   "semi": false; // 分号
   "singleQuote": true
   }

vite 中获取 env 环境变量

import.meta.env

Build In

1. MODE
2. BASE_URL
3. PROD
4. DEV
5. SSR

Production Replacement

自定义 env

<!-- .env -->
VITE_NAME=TERRY

Types

创建 vite-env.d.ts 文件

interface ImportMetaEnv {
  VITE_TITLE: string
}