vite 是 vue 官方出品的一款静态服务器, 不仅可以根据多种预设模版快速创建项目, 还可以按需构建变化页面, 速度非常快。

https://cn.vitejs.dev/guide/

项目初始化

使用如下命令,根据操作提示进行

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

yarn create vite


# yarn create v1.22.11
# [1/4] 🔍  Resolving packages...
# [2/4] 🚚  Fetching packages...
# [3/4] 🔗  Linking dependencies...
# [4/4] 🔨  Building fresh packages...
# success Installed "[email protected]" with binaries:
#       - create-vite
#       - cva

### 输入项目名称
# ? Project name: › my-vite-project

### 选择框架
# ? Select a framework: › - Use arrow-keys. Return to submit.
#     vanilla
# ❯   vue
#     react
#     preact
#     lit
#     svelte

### 选择语言模式, 
# ? Select a variant: › - Use arrow-keys. Return to submit.
#     vue     # js 语言
# ❯   vue-ts  # ts 语言

### 创建成功
# Scaffolding project in /private/tmp/my-vite-project...
# Done. Now run:

随后根据提示, 进入项目目录, 执行命令安装依赖启动服务即可

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
cd my-vite-project
yarn
yarn dev


#   vite v2.8.6 dev server running at:

#   > Local: http://localhost:300/
#   > Network: use `--host` to expose

#   ready in 302ms.

访问 http://localhost:3000/ 即可访问页面

20220322074048

项目目录

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

./main.ts # 项目入口
./App.vue # 页面入口
./components/*.vue # 组件库

./package.json   # es 配置
./tsconfig.json  # ts 配置
./vite.config.ts # vite 配置


## vscode vue3 插件

+ vscode-typescript-vue-plugin: https://marketplace.visualstudio.com/items?itemName=johnsoncodehk.vscode-typescript-vue-plugin
+ volar : https://marketplace.visualstudio.com/items?itemName=johnsoncodehk.volar