# vue3 快速掌握vite (opens new window)

# 安装使用


npm install -g @vue/cli
npm init @vitejs/app my-vue-app --template vue-ts
cd my-vue-app 
npm run serve
可以选择下列几种模板
vanilla
vue
vue-ts
react
react-ts
preact
preact-ts

或者 
npm install -g create-vite-app
create-vite-app test-vite
cd test-vite
npm install
npm run dev

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

浏览器原生module，减少了编译过程，速度更快
可以直接引入TS文件，不做类型推断，只是做ts编译。使用esbuild做ts转换js，因为esbuild不携带类型信息。
rollup构建
vite.config.js

# CSS / JSON Importing

可以直接引入json 和css
json默认导出object
css啥也不导出，除非是以.module.css结束
css 和json 都支持热更新

# Asset URL Handling

可以是用绝对路径(基于项目根目录) 或者相对路径（根据文件系统）
项目中所有的图片，字体，媒体都会被自动检测并包含到assets下，打包的时候活打包到dist/_assets下，
未引用的不会被打包，小于4kb会打包成base64
可以用assetsInclude进行配置

TIP

img标签引入的时候 ./ 路径不能少 style标签里引入可以省略 ./ 直接引入的文件需要放到public下, 而且不需要带任何路径前缀，直接写文件名动态路径可以配合 import.meta.env.BASE_URL使用

# PostCSS

vite默认使用 PostCSS，在项目根目录直接新增 postcss.config.js就可以

# CSS Modules

如果想使用css modules，那么就不要配置PostCSS，直接在.vue文件中写

或者直接把css文件命名为 xxx.module.css

# css 预处理器

https://github.com/vitejs/vite/tree/master/#css-pre-processors

# JSX

.jsx 和 .tsx也是支持的，jsx也是用esbuild来编译的默认的jsx配置可以直接在vue3中用，目前jsx不支持热更新

# Config File

可以创建 vite.config.js 或者 vite.config.ts来配置项目 https://github.com/vitejs/vite/blob/master/src/node/config.ts

# Dev Server Proxy

使用基于http-proxy的 koa-proxies ：https://github.com/http-party/node-http-proxy#options

//  vite.config.js
export default {
  proxy: {
    // string shorthand
    '/foo': 'http://localhost:4567/foo',
    // with options
    '/api': {
      target: 'http://jsonplaceholder.typicode.com',
      changeOrigin: true,
      rewrite: path => path.replace(/^\/api/, '')
    }
  }
}

1
2
3
4
5
6
7
8
9
10
11
12
13

# Production Build

https://github.com/vitejs/vite/blob/master/src/node/build/index.ts

# Modes and Environment Variables

development is used by vite and vite serve
production is used by vite build 可以使用--mode 显示指定环境，比如 vite build --mode development .env # loaded in all cases .env.local # loaded in all cases, ignored by git .env.[mode] # only loaded in specified env mode .env.[mode].local # only loaded in specified env mode, ignored by git 仅仅以 VITE_开始的变量被支持

# build配置

https://github.com/vitejs/vite/blob/master/src/node/build/index.ts

# How and Why

使用了原生es module，每个import都进行http请求，

← CompositionAPI RFC 快速掌握Vue3 →