概述：本章将会学习完整的vue3创建项目，由于本人是java后端的，所以有写的不好的地方，大家看完后尽情评论。由于文章太长，所以本人打算全放在一个分类为vue的栏目里面

快速上手

创建一个 Vue 应用

创建vue3的前提条件：

前提条件

熟悉命令行

已安装 18.0 或更高版本的 Node.js

由于以前大部分vue，用的都是18.0以前的版本，这里我先切换一下。

到你想创建的目录里面使用以下命令

npm create vue@latest

这一指令将会安装并执行 create-vue，它是 Vue 官方的项目脚手架工具。你将会看到一些诸如 TypeScript 和测试支持之类的可选功能提示：

✔ 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 an End-to-End Testing Solution? … No / Cypress / Playwright

✔ Add ESLint for code quality? … No / Yes

✔ Add Prettier for code formatting? … No / Yes

Scaffolding project in ./...

Done.

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

cd vue-project

npm install

npm run dev

通过 CDN 使用 Vue

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

咱们可以把这个文件下载过来。

点击右键，另存为到指定的目录

然后用VScode打开即可,然后编写代码引用这个文件。

打开右键，指定默认浏览器，打开即可。

我这个是因为使用了Live Server的缘故，不过没有任何关系。

比如说，我想定义一个网站

使用 ES 模块构建版本

同样：把下面的文件复制过来。

https://unpkg.com/vue@3/dist/vue.esm-browser.js

注意：模块化开发方式，必须按照Live Server插件