学习Vue3（一）

快速体验

很容易在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