Vue3 项目创建及运行全流程

前提准备

1. node 版本

Node.js 版本需 >= 12，如果有老项目需要旧版本的，推荐用 nvm 管理 node 版本。以下是相关命令及示例展示（在 Mac 终端中执行）：

$ nvm --version
1.1.11
$ nvm list
  * 16.20.2 (Currently using 64-bit executable)
    14.21.1
$ 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. 创建

使用以下命令创建项目（vue3project替换为你想创建的项目名称）：

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

示例如下（假设在 ~/workspace/vue3 路径下操作，你可根据实际情况调整路径）：

$ cd ~/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 ~/workspace/vue3/weiz-vue3-template...
 
Done. Now run:
 
  cd weiz-vue3-template
  npm install
  npm run dev

2. 安装依赖

使用命令 npm i 安装依赖，示例如下（以下示例路径为 ~/workspace/vue3/weiz-vue3-template，按需修改）：

$ cd ~/workspace/vue3/weiz-vue3-template
$ npm i
> esbuild@0.18.20 postinstall ~/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 （如果 Mac 系统没有预装 tree 命令，可能需要先通过 brew install tree 等方式安装），即可生成目录树文件 tree.txt。项目目录如下（以下展示的是大致结构示例，路径以 ~/workspace/vue3/weiz-vue3-template 为例，可自行替换）：

| .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. 运行

使用命令 npm run dev 运行项目，示例如下（路径以 ~/workspace/vue3/weiz-vue3-template 为例）：

$ cd ~/workspace/vue3/weiz-vue3-template
$ npm run dev
> weiz-vue3-template@0.0.0 dev ~/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