【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 项目配置文件，用来配置构建选项和插件。
