合集 - Vite4+Typescript+Vue3+Pinia 从零搭建
  1. Vite4+Typescript+Vue3+Pinia 从零搭建(1) - 项目初始化
  2. Vite4+Typescript+Vue3+Pinia 从零搭建(2) - ts配置
  3. Vite4+Typescript+Vue3+Pinia 从零搭建(3) - vite配置
  4. Vite4+Typescript+Vue3+Pinia 从零搭建(4) - 代码规范
  5. Vite4+Typescript+Vue3+Pinia 从零搭建(5) - 路由router
  6. Vite4+Typescript+Vue3+Pinia 从零搭建(6) - 状态管理pina
  7. Vite4+Typescript+Vue3+Pinia 从零搭建(7) - request封装

项目代码同步至码云 weiz-vue3-template

前提准备

1. node版本

Node.js版本 >= 12，如果有老项目需要旧版本的，推荐用 nvm 管理node版本。

1
2
3
4
5
6
7
PS C:\Users\Administrator> nvm --version
1.1.11
PS C:\Users\Administrator> nvm list
  * 16.20.2 (Currently using 64-bit executable)
    14.21.1
PS C:\Users\Administrator> nvm use 14.21.1
Now using node v14.21.1 (64-bit)

2. vscode

推荐使用 vscode 编辑器，安装插件以下插件：
EditorConfig for VS Code， Volar，TypeScript Vue Plugin，Prettier - Code formatter，ESlint

项目初始化

1. 创建

1
npm create vite@latest vue3project -- --template vue-ts

vue3project 替换为你想创建的项目名称，比如我的是 weiz-vue3-template，示例如下：

1
2
3
4
5
6
7
8
9
10
11
12
PS D:\workspace\vue3> npm create vite@latest weiz-vue3-template -- --template vue-ts
npx: installed 1 in 11.915s
√ Select a framework: » Vue
√ Select a variant: » TypeScript

Scaffolding project in D:\workspace\vue3\weiz-vue3-template...

Done. Now run:

  cd weiz-vue3-template
  npm install
  npm run dev

2. 安装依赖

1
npm i

示例：

1
2
3
4
5
6
7
8
9
10
11
PS D:\workspace\vue3\weiz-vue3-template> npm i

> esbuild@0.18.20 postinstall D:\workspace\vue3\weiz-vue3-template\node_modules\esbuild
> node install.js
…………省略
added 43 packages from 50 contributors and audited 65 packages in 16.086s

4 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities

3. 查看目录

执行 tree /f /a > tree.txt，即可生成目录树文件 tree.txt
项目目录如下：

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
|   .gitignore
|   index.html
|   package-lock.json
|   package.json
|   README.md
|   tree.txt
|   tsconfig.json
|   tsconfig.node.json
|   vite.config.ts
|   
+---.vscode
|       extensions.json
|       
+---node_modules     
+---public
|       vite.svg
|       
\---src
    |   App.vue
    |   main.ts
    |   style.css
    |   vite-env.d.ts
    |   
    +---assets
    |       vue.svg
    |       
    \---components
            HelloWorld.vue

4. 运行

1
npm run dev

示例：

1
2
3
4
5
6
7
8
9
10
11
PS D:\workspace\vue3\weiz-vue3-template> npm run dev

> weiz-vue3-template@0.0.0 dev D:\workspace\vue3\weiz-vue3-template
> vite


  VITE v4.5.0  ready in 427 ms

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

5. 查看界面

打开浏览器，输入 http://127.0.0.1:5173/ 查看项目
image