快速体验
很容易在Vue的官方文档上找到QuickStart。使用npm init vue@latest 命令，会在当前路径下建立一个Vue3的工程。命令行会有类似如下的提示：
Vue.js - The Progressive JavaScript Framework
✔ Project name: … vue-project
✔ 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
Scaffolding project in /Users/milo/work/learntocode/vuejs/vue-project...
Done. Now run:
cd vue-project
npm install
npm run dev
参照最后的提示我们进入vue-project运行命令，会得到一个欢迎页面
image.png
Vue的官方还是比较贴心的，这个欢迎页面上介绍了我们可能会使用的工具，获取信息的渠道等等。
IDE和调试
IDE的选择上不需要费太多脑筋，基本上都是使用VS Code。上面的欢迎页也告诉了我们，在VS Code中安装“Volar”套件来获得更好的编程效果。
在调试方面，Vue建议直接使用VS Code默认的调试配置。VS Code中支持NodeJS调试，我们只需要引用就好了。
image.png
迈出第一步
整个工程的入口是在main.js中，打开这个文件，我们可以发现程序的主要内容是放在App.vue这个文件中
import { createApp } from 'vue'
import App from './App.vue'
import './assets/main.css'
createApp(App).mount('#app')
我们打开 App.vue 文件，将内容修改成一个简单的模板
<template>
<h1>Hello World!</h1>
</template>
运行程序，我们可以发现页面变成了我们想要的样子：
image.png
