【Vue3】工程创建及目录说明

背景

随着年龄的增长，很多曾经烂熟于心的技术原理已被岁月摩擦得愈发模糊起来，技术出身的人总是很难放下一些执念，遂将这些知识整理成文，以纪念曾经努力学习奋斗的日子。本文内容并非完全原创，大多是参考其他文章资料整理所得，感谢每位技术人的开源精神。

简介

本文介绍如何创建 Vue3 前端工程，并对自动创建的工程目录做个简单说明。

开发环境

分类	名称	版本
操作系统	Windows	Windows 11
IDE	Visual Studio Code	1.91.1

开发步骤及源码

1> 安装 Node.js，本文使用的版本是 v20.15.1。

C:\...>node -v
v20.15.1

2> 升级 npm。

C:\...>npm -v
10.7.0C:\...>npm install -g npmadded 1 package in 15s22 packages are looking for fundingrun `npm fund` for detailsC:\...>npm -v
10.8.2

3> 配置 NPM 国内镜像源。

C:\...> npm installadded 62 packages, and audited 63 packages in 7m7 packages are looking for fundingrun `npm fund` for detailsfound 0 vulnerabilities

4> 打开 Visual Studio Code，安装 Vue 官方插件。

5> 创建 Vue3 工程。

PS D:\temp\VUE> npm create vue@latest
Need to install the following packages:
create-vue@3.10.4
Ok to proceed? (y) y> npx
> create-vueVue.js - The Progressive JavaScript Framework√ Project name: ... vue3-demo
√ Add TypeScript? ... No / Yes
√ Add JSX Support? ... No / Yes
√ Add Vue Router for Single Page Application development? ... No / Yes
√ Add Pinia for state management? ... No / Yes
√ Add Vitest for Unit Testing? ... No / Yes
√ Add an End-to-End Testing Solution? » No
√ Add ESLint for code quality? ... No / Yes
√ Add Vue DevTools 7 extension for debugging? (experimental) ... No / YesScaffolding project in D:\temp\VUE\vue3-demo...Done. Now run:cd vue3-demonpm installnpm run dev

创建过程首先提示安装 create-vue 包，然后填写工程名并配置各项工程依赖，此处只配置了 TypeScript。

6> 进入新创建工程的根目录，执行 npm install 命令安装工程依赖。

PS D:\temp\VUE> cd vue3-demo
PS D:\temp\VUE\vue3-demo> npm install

7> 执行 npm run dev 启动工程。

PS D:\temp\VUE\vue3-demo> npm run dev> vue3-demo@0.0.0 dev
> viteVITE v5.3.4  ready in 1772 ms➜  Local:   http://localhost:5173/➜  Network: use --host to expose➜  press h + enter to show help

8> 浏览器访问 http://localhost:5173/。

9> 已创建好的工程目录说明。

说明：

• .vscode：此目录下只有一个文件 extensions.json，是 Visual Studio Code 插件配置，之前已安装 Vue 官方插件，所以文件内容如下：

  {"recommendations": ["Vue.volar"]
  }
  

• node_modules：存放工程依赖包，在执行 npm install 命令后才会有此文件夹。
• public：脚手架根目录，默认只有一个页签图片文件 favicon.ico。
• src：源代码目录，开发工作基本都集中在此目录中。
• src/assets：存放工程静态资源文件。
• src/components：存放 Vue 组件。
• src/App.vue：Vue 根组件，其他所有 Vue 组件都是其子组件。
• src/main.ts：应用入口文件，负责初始化 Vue 应用并将其挂载到 DOM 上。
• .gitignore：Git 配置文件，用于配置哪些文件/文件夹不需要提交到代码仓。
• env.d.ts：类型声明文件（declaration file），把 node_modules 中 vite 文件夹下 client 客户端类型声明文件导入到这个文件里，此文件无需修改，也不能删除。
• index.html：Vite 入口文件，与 webpack 不同，webpack 的入口文件是 main.ts / main.js。
• package-lock.json：锁定安装时的包的版本号，需要上传 Git 以保证其他人在执行 npm install 时大家的工程依赖保证一致。
• package.json：定义项目依赖与配置。
• README.md：工程描述文件。
• tsconfig.app.json：TypeScript 配置文件，为前端 Vue 应用提供了一套合理的默认 TypeScript 编译设置，通过继承、文件包含或排除规则和编译器选项来优化开发和构建过程。保持默认生成不要修改。
• tsconfig.json：TypeScript 项目核心配置文件，提供了对 TypeScript 编译器的全局设置，并决定了如何编译 TypeScript 源代码。保持默认生成不要修改。
• tsconfig.node.json：TypeScript 配置文件，专门用于配置 TypeScript 在 Node.js 环境下的行为。保持默认生成不要修改。
• vite.config.ts：Vite 项目配置文件，用来配置构建选项和插件。