📚 Vue.js 简介与快速上手
Vue 是一款用于构建用户界面的 JavaScript 框架。它基于标准 HTML、CSS 和 JavaScript 构建，并提供了一套声明式的、组件化的编程模型，帮助你高效地开发用户界面。无论是简单还是复杂的界面，Vue 都可以胜任。
下面是一个最基本的示例：
import { createApp } from 'vue'
createApp({
data() {
return {
count: 0
}
}
}).mount('#app')
<div id="app">
<button @click="count++">
Count is: {{ count }}
</button>
</div>
🚀 创建 Vue 应用程序
在本节中，我们将介绍如何在本地搭建 Vue 单页应用。创建的项目将使用基于 Vite 的构建设置，并允许我们使用 Vue 的单文件组件 (SFC)。
搭建步骤
确保你安装了最新版本的 Node.js，然后在命令行中运行以下命令：
npm init vue@latest
此命令将安装并执行 create-vue，这是官方的 Vue 项目脚手架工具。您将看到几个可选功能的提示，例如 TypeScript 和测试支持：
✔ Project name: … <your-project-name>
✔ 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 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
您现在应该可以运行您的第一个 Vue 项目了！
请注意： 生成的项目中的示例组件是使用 Composition API 和
<script setup>编写的，而不是 Options API。
提示和拓展资源
- 推荐的 IDE 设置为 Visual Studio Code + Volar 扩展。如果您使用其他编辑器，请查看 IDE 支持部分中讨论了更多工具细节，包括与后端框架的集成。
- 要了解有关底层结构工具 Vite 的更多信息，请查看 Vite 文档。
- 如果您选择使用 TypeScript，请查看 TypeScript 使用指南。
生产环境部署
当您准备好将您的应用程序发布到生产环境时，请运行以下命令：
npm run build
这将在项目目录中创建您的应用程序的生产就绪结构。查看 生产部署指南，了解了有关将应用程序交付生产的更多信息。
🌐 从 CDN 使用 Vue
您可以通过脚本标签直接从 CDN 使用 Vue：
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
这里我们使用了 unpkg，但你也可以使用任何提供 npm 包服务的 CDN，例如 jsdelivr 或 cdnjs。当然，你也可以下载此文件并自行提供服务。
注意： 通过 CDN 使用 Vue 时，不涉及“构建步骤”。这使得设置更加简单，并且可以用于增强静态的 HTML 或与后端框架集成。但是，你将无法使用单文件组件 (SFC) 语法。
使用全局架构
上面的链接加载了 Vue 的全局构建，其中所有顶级 API 都作为全局 Vue 对象的属性公开。这是使用全局构建的完整展示示例：
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<div id="app">{{ message }}</div>
<script>
const { createApp } = Vue
createApp({
data() {
return {
message: 'Hello Vue!'
}
}
}).mount('#app')
</script>
使用 ES 模块构建
在文档的其余部分，我们将主要使用 ES 模块语法。大多数现代浏览器现在都支持 ES 模块，因此我们可以通过原生 ES 导入，如下方所用：
<div id="app">{{ message }}</div>
<script type="module">
import { createApp } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'
createApp({
data() {
return {
message: 'Hello Vue!'
}
}
}).mount('#app')
</script>
请注意，我们正在使用 <script type="module">，导入的 CDN URL 指向 Vue 的 ES 模块构建。
启动导航地图 (Import Maps)
在上面的示例中，我们从完整的 CDN URL 导入，但在文档的其他部分，您将看到如下代码：
import { createApp } from 'vue'
我们可以使用 导入地图 (Import Maps) 告诉浏览器 vue 应该从哪个位置导入：
<script type="importmap">
{
"imports": {
"vue": "https://unpkg.com/vue@3/dist/vue.esm-browser.js"
}
}
</script>
<div id="app">{{ message }}</div>
<script type="module">
import { createApp } from 'vue'
createApp({
data() {
return {
message: 'Hello Vue!'
}
}
}).mount('#app')
</script>
您还可以将其他依赖项的条目添加到导入地图中 - 但请确保它们指示您使用的库的 ES 模块版本。
- 导入地图浏览器支持： 基于 Chromium 的浏览器默认支持导入地图，因此我们建议在学习过程中使用 Chrome 或 Edge。
生产使用注意事项
到目前为止的演示使用的是 Vue 的开发版本——如果您打算在产品中使用来自 CDN 的 Vue，请务必查看 生产目录指南。
拆分模块
随着我们深入研究指南，我们可能需要将代码拆分为单独的 JavaScript 文件，以方便管理。例如：
index.html
<script type="module">
import { createApp } from 'vue'
import MyComponent from './my-component.js'
createApp(MyComponent).mount('#app')
</script>
my-component.js
export default {
data() {
return { count: 0 }
},
template: `<div>count is {{ count }}</div>`
}
注意： 如果直接在浏览器中打开了上面的
index.html，它会抛出一个错误，因为 ES 模块不能通过file://协议工作。为了使其工作，你需要使用本地 HTTP 服务器通过http://协议提供index.html。
要启动一个本地的 HTTP 服务器，请先安装 Node.js，然后从命令行在 HTML 文件所在文件夹下运行：
npx serve
你也可以使用其他任何可以基于正确的 MIME 类型服务静态文件的 HTTP 服务器。
内联组件模板提示
你可能也注意到了，这里导入的组件模板是内联的 JavaScript 字符串。如果你正在使用 VSCode，你可以安装 es6-string-html 扩展，然后在字符串前加上一个前缀注释 /*html*/ 以高亮语法。
在没有构建步骤的情况下使用 Composition API
组合式 API 的许多示例将使用 <script setup> 语法。如果你想在无需构建的情况下使用组合式 API，请参阅 setup() 选项。
