vite+vue3+ts搭建项目一（初始化，环境，运行）

发表于 分类于 ， 阅读次数： 本文字数： 2.2k 阅读时长 ≈ 2 分钟
vite+vue3+ts搭建项目一（初始化，环境，运行）

vite+vue3+ts搭建项目一（初始化，环境，运行）

相关环境

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
nvm use node // Now using node v19.7.0 (npm v9.5.0)

node -v      // v19.7.0（建议16.0.0+）

npm -v       // 9.5.0

//非必要
vite -v      // vite/4.1.4 darwin-arm64 node-v19.7.0
// 安装 vite
npm install vite -g

//非必要
vue -V       // @vue/cli 5.0.8
// 安装 vue/cli
npm install -g @vue/cli

npm版本太低无法运行

初始化项目

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
npm create vite@latest
Need to install the following packages:
  create-vite@4.1.0
Ok to proceed? (y) y
✔ Project name: … vitetest
? Select a framework: › - Use arrow-keys. Return to submit.
    Vanilla
❯   Vue
    React
    Preact
    Lit
    Svelte
    Others
? Select a variant: › - Use arrow-keys. Return to submit.
    JavaScript
❯   TypeScript
    Customize with create-vue ↗
    Nuxt ↗

Scaffolding project in xx/vitetest...

Done. Now run:

  cd vitetest
  npm install
  npm run dev

项目目录如下

配置文件为vite.config.ts

运行

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
cd xx/vitetest

// 安装依赖包
npm install

// 运行
npm run dev
> vitetest@0.0.0 dev
> vite

  VITE v4.1.4  ready in 385 ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose
  ➜  press h to show help

打包

1
2
3
4
5
6
7
8
9
10
11
npm run build

> vitetest@0.0.0 build
> vue-tsc && vite build

vite v4.1.4 building for production...
✓ 18 modules transformed.
dist/index.html                  0.45 kB
dist/assets/vue-5532db34.svg     0.50 kB
dist/assets/index-08cab964.css   1.30 kB │ gzip:  0.67 kB
dist/assets/index-316eef2e.js   54.50 kB │ gzip: 21.98 kB

项目结构如上图，打包后会生成dist目录

vscode设置

扩展 -> 搜索
禁用vetur，安装使用typescript volar

配合ts语法糖的vue3生命周期函数

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
34
35
36
37
38
39
40
41
42
43
44
45
<template>
  home
</template>

<script setup lang="ts">
import {
  onBeforeMount,
  onMounted,
  onBeforeUpdate,
  onUpdated,
  onBeforeUnmount,
  onUnmounted,
  onActivated,
} from 'vue'

// 通过compositon-api的形式去使用生命周期钩子

// 创建之前(无法读取dom)
onBeforeMount(() => {
  console.log("创建之前");
});
// 创建完成(可以读取dom)
onMounted(() => {
  console.log("创建完成");
});
// 更新之前(读取更新之前的dom)
onBeforeUpdate(() => {
  console.log("更新之前");
});
// 更新完成(读取更新之后的dom)
onUpdated(() => {
  console.log("更新完成");
});
// 卸载之前
onBeforeUnmount(() => {
  console.log("卸载之前");
});
// 卸载完成
onUnmounted(() => {
  console.log("卸载完成");
});

</script>

<style lang = "scss" scoped></style>