“Vue 创建脚手架”的版本间的差异

来自姬鸿昌的知识库
跳到导航 跳到搜索
 
（未显示同一用户的5个中间版本）
第13行： 第13行：
 
https://registry.npm.taobao.org
 
https://registry.npm.taobao.org
 
</syntaxhighlight>
 
</syntaxhighlight>
 +
 +
=== 第一步 ===
 +
  
 
第一步（仅第一次执行）：全局安装 @vue/cli<syntaxhighlight lang="powershell">
 
第一步（仅第一次执行）：全局安装 @vue/cli<syntaxhighlight lang="powershell">
第23行： 第26行：
  
 
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
 
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/
+
</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 启动了服务，通过浏览器能访问到，就算成功了

2024年8月8日 (四) 23:24的最新版本

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

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

注意：可以先配置 npm 淘宝镜像，以免下载缓慢：

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

第一步

第一步（仅第一次执行）：全局安装 @vue/cli

npm install -g @vue/cli

坑：2024-08-09，执行如下：

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

原因是 https://registry.npm.taobao.org 这个域名不用了，用浏览器访问就能发现，已经重定向到 https://registry.npmmirror.com/，所以换了就好：

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

安装完毕后，关闭当前命令行，重启一个命令行，执行 vue，验证是否安装成功：

C:\Users\Administrator>vue
Usage: vue <command> [options]

Options:
  -V, --version                              output the version number
  -h, --help                                 display help for command
……

第二步

切换到要创建项目的目录，然后使用命令创建项目

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>

进入 vue_test 目录，执行完 npm run serve 启动了服务，通过浏览器能访问到，就算成功了

取自“https://www.jihongchang.top/index.php?title=Vue_创建脚手架&oldid=8147”