欢迎关注公众号:
CodeFit
。
创作不易,如果你觉得这篇文章对您有帮助,请不要忘了 点赞、分享 和 关注,为我的 持续创作 提供 动力!
欢迎订阅《Vue 3.x 必修课|2024》:http://t.csdnimg.cn/hHRrM
精品内容,物超所值,一杯咖啡的价格(9.9 元)只为持续创作提供动力。
1. 前言
-
最新的官方推荐方法是使用
create-vue
,这是 Vue 官方的项目脚手架工具。 -
创建项目的命令和以前略有变化。现在推荐使用:
npm create vue@latest
-
这个命令会启动一个交互式的过程,让你选择项目的配置,包括是否使用 TypeScript、是否使用 Vite 等。
-
Vite 是 Vue3 项目的推荐构建工具,不了解的同学可以查看后面的补充内容。
2. 环境搭建:使用 create-vue 创建 Vue3 + TypeScript 项目
现在开始介绍如何使用最新的官方推荐方法创建一个 Vue3 + TypeScript 项目。
我们将使用 create-vue
,这是 Vue 官方的项目脚手架工具,它默认使用 Vite 作为构建工具。
2.1 前置要求
确保你的系统中已安装:
- Node.js(推荐 v18 或更高版本)
- npm(通常随 Node.js 一起安装)、yarn 或 pnpm
以 Node.js 自带的 npm 举例,通过以下命令检查版本:
node --version
npm --version
运行结果:
当前 Node.js 的长期支持(LTS)版本的情况(截至本文更新 202407):
- Node.js 20.x 是最新的 LTS 版本,代号为 “Iron”。
- Node.js 18.x 也是一个活跃的 LTS 版本。
另外,在 Node.js 中,偶数版本(如 18.x, 20.x)通常是 LTS 版本。
2.2 具体步骤
步骤 1:创建项目
-
打开终端。
-
运行以下命令:
npm create vue@latest
-
这一指令将会安装并执行 create-vue,它是 Vue 官方的项目脚手架工具。
如果你第一次运行,那么会提示安装 create-vue输入 y 后,你将会看到一些诸如 TypeScript 和测试支持之类的可选功能提示,如下:
- Project name (项目名称)
- Add JSX Support? (是否添加 JSX 支持)
- Add Vue Router for Single Page Application development? (是否添加 Vue Router)
- Add Pinia for state management? (是否添加 Pinia 状态管理)
- Add Vitest for Unit Testing? (是否添加 Vitest 进行单元测试)
- Add an End-to-End Testing Solution? (是否添加端到端测试方案)
- Add ESLint for code quality? (是否添加 ESLint)
- Add Prettier for code formatting? (是否添加 Prettier)
根据你的需求选择这些选项。
如果不确定是否要开启某个功能,你可以直接按下回车键,代表选择 No。
结果如下所示:
当然,对于一个基本的 Vue3 + TypeScript 项目,至少选择 **TypeScript** 为 Yes。
步骤 2:进入项目目录并安装依赖
-
进入新创建的项目目录:
cd <你的项目名>
-
安装项目依赖:
npm install
-
执行结果:
步骤 3:启动开发服务器
安装完依赖后,启动开发服务器:
npm run dev
执行结果:
这将启动 Vite 的开发服务器。你会看到一个本地 URL,通常是 http://localhost:5173
。
现在,可以在浏览器中打开这个 URL 来查看我们刚才创建的 Vue 3 应用啦.
步骤 4:探索项目结构
create-vue
创建的项目结构可能会根据你选择的选项有所不同。
一个典型的使用 Vite 作为构建工具的 Vue 3 + TypeScript 的项目结构如下。
your-project-name(Vue.js 3.x 必修课 By CodeFit)/ -- 项目文件夹
├── public/ -- 公共目录
│ └── favicon.ico -- 网站的图标文件
├── src/ -- 源代码目录
│ ├── assets/ -- 存放静态资源,如图片、字体等
│ ├── components/ -- 存放 Vue 组件
│ ├── App.vue -- 应用的根组件
│ └── main.ts -- 应用的入口文件,用于初始化 Vue 应用
├── .gitignore -- 指定 Git 应该忽略的文件
├── env.d.ts -- 环境变量的类型声明文件
├── index.html -- 应用的 HTML 模板
├── package-lock.json -- 锁定依赖包的版本信息
├── package.json -- 项目的配置文件,包含依赖和脚本等信息
├── README.md -- 项目说明文档
├── tsconfig.app.json -- TypeScript 配置文件(针对应用)
├── tsconfig.json -- 主 TypeScript 配置文件
├── tsconfig.node.json -- TypeScript 配置文件(针对 Node.js 环境)
└── vite.config.ts -- Vite 构建工具的配置文件
我们主要的编码开发工作将在 src 目录中进行,其他则大部分是配置文件,用于设置项目的各种参数和行为。
步骤 5:开始开发
现在我们可以开始在 src
目录下编写你的 Vue 组件和 TypeScript 代码了。
例如,可以修改 src/App.vue
文件来开始你的开发。
3. 总结
使用 create-vue
创建 Vue3 + TypeScript 项目是目前最新和推荐的方法。
它提供了一个灵活的设置过程,让你可以根据项目需求选择所需的功能。
如果你是刚开始接触 Vue 或现代前端开发,可能会觉得这个项目目录结构有些复杂。
但不用担心,前期我们可以先专注 src 目录中的内容,特别是 App.vue 和 components 目录,这些是我们主要编写代码的地方。
随着课程的进展,其他文件的作用也会变得更清晰。
Happy coding!
补充内容:Vite介绍
Vite:当前流行的前端构建工具
1. 什么是 Vite?
Vite(法语中 “快速” 的意思)是一个由 Vue.js 的创建者尤雨溪带领开发的新一代前端构建工具。
它旨在提供更快速的开发体验,适用于现代 web 项目。
Vite 利用了现代浏览器的新特性,如 ES 模块,并结合了 esbuild 和 Rollup 的优势,提供近乎即时的服务器启动和闪电般的热模块替换(HMR)。
2. Vite 的核心特性
-
极速的服务器启动:Vite 通过在一开始就将应用中的模块区分为 依赖 和 源码 两类,并使用 esbuild 预构建依赖,大大提升了开发服务器启动时间。
-
快速的热模块替换(HMR):无论应用大小如何,都可以保持快速更新。Vite 只需精确地使已编辑的模块与其最近的 HMR 边界之间的链失活,使得无论应用大小如何,HMR 始终能保持快速更新。
-
真正的按需编译:Vite 以原生 ESM 方式提供源码。这实际上是让浏览器接管了部分打包程序的工作:Vite 只需要在浏览器请求源码时进行转换并按需提供源码。
-
优化的构建:当需要打包到生产环境时,Vite 使用 Rollup 进行构建,输出高度优化的静态资源,并且可以轻松地部署到任何地方。
-
灵活的插件系统:Vite 支持使用 Rollup 兼容的插件,并且在开发环境中也可以使用特定的 Vite 插件,提供了强大的可扩展性。
3. Vite 的工作原理
3.1 开发阶段
-
依赖预构建:Vite 使用 esbuild 在首次启动时预构建依赖。由于 esbuild 使用 Go 编写,比基于 JavaScript 的打包器预构建依赖快 10-100 倍。
-
ES 模块支持:Vite 利用浏览器原生的 ES 模块支持,直接提供源码,无需打包。
-
按需编译:当浏览器请求某个模块时,Vite 才会编译该模块。这意味着在开发模式下,你的源代码并不会被打包在一起。
-
源码转换:Vite 使用 esbuild 进行源码转换,如 TypeScript 和 JSX 的转译,这比传统工具快得多。
3.2 生产构建
在生产环境中,Vite 默认使用 Rollup 进行构建。这样可以利用 Rollup 在静态资源打包方面的优势,如:
- 代码分割:更细粒度和更可配置的代码分割策略。
- CSS 处理:提取 CSS、压缩 CSS 等。
- 资源处理:静态资源的处理和优化。
- 树摇(Tree-shaking):去除未使用的代码。
值得注意的是,Vite 允许使用 esbuild 进行生产环境的代码压缩,这通常比使用 Terser(许多构建工具的默认压缩器) 更快。
3. Vite vs 传统构建工具
与 webpack 等传统工具相比,Vite 有以下优势:
- 更快的启动时间:得益于 esbuild 的预构建和按需编译策略。
- 更快的热更新:利用原生 ES 模块,Vite 的 HMR 性能与项目复杂度解耦。
- 更简单的配置:Vite 的配置更加简洁直观,同时保留了高度的可扩展性。
- 优化的构建输出:利用 Rollup 的优势,生产构建针对静态托管进行了优化。
- 灵活的工具选择:在开发和生产环境中分别使用最适合的工具(esbuild 和 Rollup)。
4. Vite 的应用场景
Vite 特别适合以下场景:
- 现代框架开发:Vue、React、Svelte 等现代前端框架的项目。
- 大型单页应用(SPA):可以显著提升开发效率。
- 快速原型开发:快速启动和热更新特别适合快速验证想法。
- 静态站点生成:结合静态站点生成器使用。
- 需要快速开发环境的项目:特别是那些对开发体验要求较高的项目。
5. Vue 选择了 Vite
通过上述描述,可以说 Vite 代表了前端构建工具的新方向,它巧妙地结合了 esbuild 和 Rollup 的优势,在开发和生产环境中分别使用最适合的工具。
通过利用现代浏览器的能力和新的 web 技术标准,Vite 提供了一种更快、更简单的开发体验。
你还没有订阅吗?快动动你的手指,点击订阅《Vue 3.x 必修课|2024》:http://t.csdnimg.cn/hHRrM
精品内容,物超所值,一杯咖啡的价格(9.9 元)只为持续创作提供动力。
各位看官,本文结束,下文更精彩!
感谢你的阅读!
如果觉得这篇文章对您有所帮助,请 点赞、分享,并关注,这样就不会错过更多的 精彩内容。
同时,您的 支持 和 反馈 对 CodeFit 来说非常重要,欢迎在评论区留言,与我互动。
谢谢大家,下次见!