Vite4+Typescript+Vue3+Pinia 从零搭建(1) - 项目初始化-工具盒子

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

前提准备 {#前提准备}

1. node版本 {#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 {#2-vscode}

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

项目初始化 {#项目初始化}

1. 创建 {#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. 安装依赖 {#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 |

执行 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. 运行 {#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 |