Vue 所有代码资料仓库

# Vue 简介

• Vue 是一个渐进式框架，也是一个生态。
• 其功能覆盖了大部分前端开发常见的需求。
• 但 Web 世界是十分多样化的，不同的开发者在 Web 上构建的东西可能在形式和规模上会有很大的不同。
• 考虑到这一点，Vue 的设计非常注重灵活性和 “可以被逐步集成” 这个特点。
• 根据你的需求场景，你可以用不同的方式使用 Vue：
  • 无需构建步骤，渐进式增强静态的 HTML
  • 在任何页面中作为 Web Components 嵌入
  • 单页应用 (SPA)
  • 全栈 / 服务端渲染 (SSR)
  • Jamstack / 静态站点生成 (SSG)
  • 开发桌面端、移动端、WebGL，甚至是命令行终端中的界面
• 如果你是初学者，可能会觉得这些概念有些复杂。
• 别担心！理解教程和指南的内容只需要具备基础的 HTML 和 JavaScript 知识。
• 即使你不是这些方面的专家，也能够跟得上。
• 如果你是有经验的开发者，希望了解如何以最合适的方式在项目中引入 Vue，或者是对上述的这些概念感到好奇。
• 我们在使用 Vue 的多种方式中讨论了有关它们的更多细节。
• 无论再怎么灵活，Vue 的核心知识在所有这些用例中都是通用的
• 。即使你现在只是一个初学者，随着你的不断成长，到未来有能力实现更复杂的项目时，这一路上获得的知识依然会适用。
• 如果你已经是一个老手，你可以根据实际场景来选择使用 Vue 的最佳方式，在各种场景下都可以保持同样的开发效率。
• 这就是为什么我们将 Vue 称为 “渐进式框架”：它是一个可以与你共同成长、适应你不同需求的框架。

# 关于不同版本的 Vue

• vue.js 与 vue.runtime.xxx.js 的区别：
  • vue.js 是完整版的 Vue，包含：核心功能 + 模板解析器。
  • vue.runtime.xxx.js 是运行版的 Vue，只包含：核心功能；没有模板解析器。
• 因为 vue.runtime.xxx.js 没有模板解析器，所以不能使用 template 这个配置项，需要使用 render 函数接收到的 createElement 函数去指定具体内容。

# vue.config.js 配置文件

1. 使用 vue inspect > output.js 可以查看到 Vue 脚手架的默认配置。
2. 使用 vue.config.js 可以对脚手架进行个性化定制，详情见：https://cli.vuejs.org/zh

# 构建一个 Vue 应用

安装 Vue 官方脚手架

npm init vue@latest

你将会看到一些诸如 TypeScript 和测试支持之类的可选功能提示：

✔ Project name: … <your-project-name>

✔ Add TypeScript? … No / Yes

✔ Add htmlX 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 Cypress for both Unit and End-to-End testing? … No / Yes

✔ Add ESLint for code quality? … No / Yes

✔ Add Prettier for code formatting? … No / Yes

Scaffolding project in ./<your-project-name>...

Done.

如果不确定是否要开启某个功能，你可以直接按下回车键选择 No。
在项目被创建后，通过以下步骤安装依赖并启动开发服务器：

cd <your-project-name>

npm install

npm run dev

当你准备将应用发布到生产环境时，请运行：

npm run build

通过 CDN 使用 Vue
你可以借助 script 标签直接通过 CDN 来使用 Vue：

<script src="https://unpkg.com/vue@3/dist/vue.global.html"></script>

下一篇