查看“Vue 创建脚手架”的源代码

https://www.bilibili.com/video/BV1Zy4y1K7SH?p=61

Vue 脚手架（Vue CLI，Vue Command Line Interface）是 Vue 官方提供的标准化开发工具（开发平台）
https://cli.vuejs.org/zh/

注意：可以先配置 npm 淘宝镜像，以免下载缓慢：<syntaxhighlight lang="powershell">
C:\WINDOWS\system32>npm config get registry
https://registry.npmjs.org/

C:\WINDOWS\system32>npm config set registry https://registry.npm.taobao.org

C:\WINDOWS\system32>npm config get registry
https://registry.npm.taobao.org
</syntaxhighlight>

=== 第一步 ===


第一步（仅第一次执行）：全局安装 @vue/cli<syntaxhighlight lang="powershell">
npm install -g @vue/cli
</syntaxhighlight>'''坑'''：2024-08-09，执行如下：<syntaxhighlight lang="powershell">
C:\WINDOWS\system32>npm install -g @vue/cli
npm ERR! code CERT_HAS_EXPIRED
npm ERR! errno CERT_HAS_EXPIRED
npm ERR! request to https://registry.npm.taobao.org/@vue%2fcli failed, reason: certificate has expired

npm ERR! A complete log of this run can be found in: C:\Users\Administrator\AppData\Local\npm-cache\_logs\2024-08-08T23_00_40_398Z-debug-0.log
</syntaxhighlight>原因是 <nowiki>https://registry.npm.taobao.org</nowiki> 这个域名不用了，用浏览器访问就能发现，已经重定向到 https://registry.npmmirror.com/<nowiki/>，所以换了就好：<syntaxhighlight lang="powershell">
C:\WINDOWS\system32>npm config set registry https://registry.npmmirror.com

C:\WINDOWS\system32>npm config get registry
https://registry.npmmirror.com

C:\WINDOWS\system32>npm install -g @vue/cli
npm WARN deprecated inflight@1.0.6: This module is not supported, and leaks memory. Do not use it. Check out lru-cache if you want a good and tested way to coalesce async requests by a key value, which is much more comprehensive and powerful.
……
added 852 packages in 36s

74 packages are looking for funding
  run `npm fund` for details
</syntaxhighlight>安装完毕后，关闭当前命令行，重启一个命令行，执行 vue，验证是否安装成功：<syntaxhighlight lang="powershell">
C:\Users\Administrator>vue
Usage: vue <command> [options]

Options:
  -V, --version                              output the version number
  -h, --help                                 display help for command
……
</syntaxhighlight>

=== 第二步 ===
切换到要创建项目的目录，然后使用命令创建项目<syntaxhighlight lang="powershell">
C:\Users\Administrator>e:

E:\>cd E:\record\2024\8\9

E:\record\2024\8\9>vue create vue_test


Vue CLI v5.0.8
? Please pick a preset: Default ([Vue 2] babel, eslint)
……
🎉  Successfully created project vue_test.
👉  Get started with the following commands:

 $ cd vue_test
 $ npm run serve
E:\record\2024\8\9>
</syntaxhighlight>进入 vue_test 目录，执行完 npm run serve 启动了服务，通过浏览器能访问到，就算成功了