npm创建Vue3项目
- 1 创建Vue项目
-
- 说明
- 2 安装
- 3 运行
1 创建Vue项目
创建最新版的Vue项目，已经不推荐使用CLI构建方式了。参考如下即可。
npm create vue@latest如果发现一直动不了，切换网络试一下，个人热点尝试一下。
按下图的选项按需引入自己需要的功能：
说明
| 选项 | 说明 |
|---|---|
| TypeScript 语法 | TypeScript 是一种由 Microsoft 开发的开源编程语言，它是 JavaScript 的超集，可以编译为纯 JavaScript。就是一种编程语言。 |
| JSX 支持 | JSX 是一种 JavaScript 的语法扩展，通常用于构建 React 应用程序的用户界面。JSX 允许开发者在 JavaScript 中直接编写类似 HTML 的标记语法，使得编写和管理复杂的用户界面变得更加简单和直观。const element = \<div>Hello, World!\</div>; |
| Vue Router | Vue Router 是 Vue.js 官方提供的路由管理器，用于构建单页面应用程序（SPA）。它允许你在 Vue.js 应用程序中实现基于 URL 的导航，并且能够以声明式的方式定义应用程序的路由映射关系。多组件开发选上，就是对页面每个部分解耦，可以按需导入。比如组成页面的nav、main、footer等分开开发。 |
| Pinia | Pinia 是一个用于 Vue.js 的状态管理库，它专注于提供简单、轻量级且可扩展的状态管理解决方案。Pinia 提供了一种基于 Vue 3 的响应式 API 构建状态管理的方式，与 Vuex 相比，Pinia 更加灵活，并且在性能上有一些优势。在小型的Vue项目中，使用Vuex便足以，选否默认使用Vuex |
| Vitest | Vitest 是一个用于 Vue.js 应用程序的测试运行器，它专注于提供简单、快速和可扩展的测试解决方案。Vitest 基于 Vite 构建，并且支持 Vue 3 和 Vue 2，能够帮助开发者在项目中进行单元测试和端到端测试。 |
| 端到端（End-to-End）测试 | 在 Vue.js 项目中进行端到端（End-to-End）测试时，常用的工具包括 Cypress、Puppeteer、TestCafe 等。这些工具都能帮助你编写和执行端到端测试，并生成详细的测试报告 |
| ESLint | ESLint 是一个开源的 JavaScript 代码检查工具，用于检查代码中的潜在问题、风格错误和代码质量问题。它可以帮助开发团队规范代码风格、发现潜在的错误，并提高代码的质量和可读性。 |
2 安装
npm install
3 运行
npm run dev
| 部署命令 | 说明 |
|---|---|
| npm run dev | 通常用于启动开发环境下的服务器或者构建工具。npm run dev 命令用于启动开发服务器，例如 webpack-dev-server、Vue CLI 的开发服务器等。npm run dev 可能会执行诸如编译、热重载、自动刷新等开发相关的任务，以提供一个方便的开发环境，使开发人员能够实时预览和调试项目。 |
| npm run build | 用于构建项目的生产版本，生成用于部署的静态文件。当项目开发完成后，通常需要将项目打包成静态文件，以便部署到生产环境中。npm run build 命令会执行项目的构建过程，包括编译、压缩、打包等操作，最终生成用于生产环境的静态文件。 |