前提准备

1. node 版本

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

PS C:\Windows\system32> nvm --version
1.1.12
PS C:\Windows\system32> nvm list
    20.5.0
  * 16.20.2 (Currently using 64-bit executable)
    10.17.0
PS C:\Windows\system32> nvm use 20.5.0
Now using node v20.5.0 (64-bit)

2. vscode

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

项目初始化

1. 创建

// yarn 方式
yarn create vite vue3project --template vue-ts
cd vue3project
yarn
yarn dev

// npm 方式
npm create vite@latest vue3project --template vue-ts
cd vue3project
npm install 
npm run dev

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

PS E:\wave\project\node\wave-vue3> npm create vite@latest wave-vue3-demo_1 --template vue-ts
Need to install the following packages:
create-vite@5.3.0
Ok to proceed? (y) y


> npx
> create-vite wave-vue3-demo_1 vue-ts

√ Select a framework: » Vue
√ Select a variant: » TypeScript

Scaffolding project in E:\wave\project\node\wave-vue3\wave-vue3-demo_1...

Done. Now run:

  cd wave-vue3-demo_1
  npm install
  npm run dev

2. 安装依赖

npm i

3. 查看目录

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

|   .gitignore
|   index.html
|   package-lock.json
|   package.json
|   README.md
|   tree.txt
|   tsconfig.app.json
|   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. 运行

npm run dev

示例：

  VITE v5.3.2  ready in 282 ms

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

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

loLEyfK.png