Comments on the upgrade page

[chengpeiquan]

~

[chengpeiquan]

大家好，第一次写此类文章，如果有什么我没说清楚，或者有误的，辛苦帮忙提出来，感谢！

[guba-exe]

@chengpeiquan
大家好，第一次写此类文章，如果有什么我没说清楚，或者有误的，辛苦帮忙提出来，感谢！

这是我觉得看到过最好的教程，非常感谢作者

[chengpeiquan]

@chengpeiquan
大家好，第一次写此类文章，如果有什么我没说清楚，或者有误的，辛苦帮忙提出来，感谢！

这是我觉得看到过最好的教程，非常感谢作者

😁谢谢！！！好开心！

[Vsnoy]

写得真的很好，之前一直缺少这种工程化方面的知识，这份教程是真的详尽，感谢作者大大的分享！！

[chengpeiquan]

写得真的很好，之前一直缺少这种工程化方面的知识，这份教程是真的详尽，感谢作者大大的分享！！

感谢认可！

[qiu-bai]

写的很好,很受益,谢谢大佬

[chengpeiquan]

写的很好,很受益,谢谢大佬

谢谢！！！

[C-yborg]

感谢作者，这个教程不只学到了vue3，也学到了一些前端通用的知识，希望这个网站不要关闭，有赞赏码吗，我支持个服务器费用哈哈哈😀

[chengpeiquan]

感谢作者，这个教程不只学到了vue3，也学到了一些前端通用的知识，希望这个网站不要关闭，有赞赏码吗，我支持个服务器费用哈哈哈😀

hahaha谢谢你，可以给我家三只猫捐个猫罐头，感恩！
https://github.com/chengpeiquan/sponsor

[denglj]

很不错的教程！作为想学习点跟得上时代的前端技术的后端程序员来讲，期望再多加一些内容。比如：

1. 在vue框架下，跟后端的HTTP API进行交互的实践案例
2. HTTP和HTTPS的处理有何不同？
3. 跨站访问数据有特别之处吗？
4. 基于Websocket协议的前后端交互如何实现？
5. 基于WebRTC协议的前后端交互如何实现？
6. 把vue网页项目打包成iOS和Android App的示例

[chengpeiquan]

很不错的教程！作为想学习点跟得上时代的前端技术的后端程序员来讲，期望再多加一些内容。比如：

1. 在vue框架下，跟后端的HTTP API进行交互的实践案例
2. HTTP和HTTPS的处理有何不同？
3. 跨站访问数据有特别之处吗？
4. 基于Websocket协议的前后端交互如何实现？
5. 基于WebRTC协议的前后端交互如何实现？
6. 把vue网页项目打包成iOS和Android App的示例

好耶，近期找时间安排一下，合适的内容我添加上去~ 不过鉴于本指南的主题内容，最初是作为我自己团队在招来新人之后可以帮助他们快速上手公司的项目所以才写的，所以也不会把各种内容都往上面加，像 WebSocket 、WebRTC_API 这些在 MDN 文档上有入门用法，实际又没有用到太多（我们的服务端小哥一向不爱搞，业务也比较少要求一定要上，所以很少用到），建议可以先看看其他工程师更详细的博客文章总结，还有像 Vue 打包成 App 的，这些我可能只补充添加一些入门案例的链接跳转，例如 uni-app 的官方入门例子 hello-uniapp ，因为像 uni-app / Electron 这些都是跨平台跨端的技术栈，展开讲的话篇幅太长，可以变成另外的一本独立教程了，有兴趣的话建议先按照官方的文档先进行尝试，例如 uni-app 配置原生工程 就有关于 Android 和 iOS 的配置讲解。

[Lichmaker]

首先很感谢作者的付出，我目前主业是后端开发，业余期间学习前端知识，在这里收获良多。给猫猫发了个罐头红包，小小心意。
为什么会选择在这里留言，是因为遇到问题了。在初始化项目时：

➜  preset init hello-vue3 --template vue3-ts-vite

✔ Get the latest config successfully.

✖ Operation cancelled
node:internal/readline/emitKeypressEvents:71
            throw err;
            ^

TypeError: Cannot read properties of undefined (reading 'disabled')
    at SelectPrompt.submit (/usr/software/nodejs/lib/node_modules/create-preset/node_modules/prompts/lib/elements/select.js:68:25)
    at ReadStream.keypress (/usr/software/nodejs/lib/node_modules/create-preset/node_modules/prompts/lib/elements/prompt.js:32:16)
    at ReadStream.emit (node:events:527:28)
    at emitKeys (node:internal/readline/utils:358:14)
    at emitKeys.next (<anonymous>)
    at ReadStream.onData (node:internal/readline/emitKeypressEvents:61:36)
    at ReadStream.emit (node:events:539:35)
    at addChunk (node:internal/streams/readable:315:12)
    at readableAddChunk (node:internal/streams/readable:289:9)
    at ReadStream.Readable.push (node:internal/streams/readable:228:10)

具体原因我也没有深究，因为这只是一个工具，并不影响我学习vue3，所以改用 npm init vue@3 来进行初始化。
但还是希望知道其错误的原因，期待回复。

[chengpeiquan]

首先很感谢作者的付出，我目前主业是后端开发，业余期间学习前端知识，在这里收获良多。给猫猫发了个罐头红包，小小心意。 为什么会选择在这里留言，是因为遇到问题了。在初始化项目时：

➜  preset init hello-vue3 --template vue3-ts-vite

✔ Get the latest config successfully.

✖ Operation cancelled
node:internal/readline/emitKeypressEvents:71
            throw err;
            ^

TypeError: Cannot read properties of undefined (reading 'disabled')
    at SelectPrompt.submit (/usr/software/nodejs/lib/node_modules/create-preset/node_modules/prompts/lib/elements/select.js:68:25)
    at ReadStream.keypress (/usr/software/nodejs/lib/node_modules/create-preset/node_modules/prompts/lib/elements/prompt.js:32:16)
    at ReadStream.emit (node:events:527:28)
    at emitKeys (node:internal/readline/utils:358:14)
    at emitKeys.next (<anonymous>)
    at ReadStream.onData (node:internal/readline/emitKeypressEvents:61:36)
    at ReadStream.emit (node:events:539:35)
    at addChunk (node:internal/streams/readable:315:12)
    at readableAddChunk (node:internal/streams/readable:289:9)
    at ReadStream.Readable.push (node:internal/streams/readable:228:10)

具体原因我也没有深究，因为这只是一个工具，并不影响我学习vue3，所以改用 npm init vue@3 来进行初始化。 但还是希望知道其错误的原因，期待回复。

多谢反馈和罐头！我刚刚试了一下，我本地在 proxy on 的情况下确实失败了，然后关了就可以，现在加速代理用的是 @FastGitORG 的服务，好像是有问题，访问不了所以下载模板失败，我近期找个时间修一下这个脚手架~

[Lichmaker]

@chengpeiquan 感谢回复 😄 . 我今天在家试了一下，能正常使用了。 我之前是在公司使用，因为我们公司的网络环境是需要使用代理上网的，例如

export http_proxy=http://x.x.x.x:1087
export https_proxy=http://x.x.x.x:1087

所以如果 preset 会到 github 上下载内容，很大概率我会下载不到 🤣 ， 公司网太烂了。

[EndlessShw]

作者大大，您好，我又来提问题了（已经好几次了（苦笑），这几天的学习感觉遇到了不少问题）。

1. 我尝试了作者您的脚手架 - “Preset CLI”，可是在使用该脚手架时，其版本一直都是 0.0.0，就像这样：

   D:\Vue-Projects\vue-preset>npm install -g create-preset

   added 192 packages in 6s

   D:\Vue-Projects\vue-preset>preset -v
   0.0.0

   D:\Vue-Projects\vue-preset>preset upgrade

   \ Detecting upgrade information…
   √ Detected successfully.

   The current version: 0.0.0
   The latest version: 0.13.0
   √ Found a new version, do you need to upgrade? ... yes

   √ Please select your package manager for global installation » npm

   | Upgrading…
   √ Upgraded successfully.

   D:\Vue-Projects\vue-preset>preset -v
   0.0.0

   请问如何解决？还是说版本这样就行？

[chengpeiquan]

作者大大，您好，我又来提问题了（已经好几次了（苦笑），这几天的学习感觉遇到了不少问题）。

1. 我尝试了作者您的脚手架 - “Preset CLI”，可是在使用该脚手架时，其版本一直都是 0.0.0，就像这样：

   D:\Vue-Projects\vue-preset>npm install -g create-preset
   added 192 packages in 6s
   D:\Vue-Projects\vue-preset>preset -v
   0.0.0
   D:\Vue-Projects\vue-preset>preset upgrade
   \ Detecting upgrade information…
   √ Detected successfully.
   The current version: 0.0.0
   The latest version: 0.13.0
   √ Found a new version, do you need to upgrade? ... yes
   √ Please select your package manager for global installation » npm
   | Upgrading…
   √ Upgraded successfully.
   D:\Vue-Projects\vue-preset>preset -v
   0.0.0

   请问如何解决？还是说版本这样就行？

！，排查了一下知道原因了，最后一次更新的问题，本来想把版本管理都交给 CI/CD 去处理就好，忘记这里的版本号读的是 CI 处理前的，我等会修复下，其它功能不影响使用~

[chengpeiquan]

！，排查了一下知道原因了，最后一次更新的问题，本来想把版本管理都交给 CI/CD 去处理就好，忘记这里的版本号读的是 CI 处理前的，我等会修复下，其它功能不影响使用~

@EndlessShw 已修复，谢谢你！

[19774279]

对于一个新环境，这里直接创建的脚手架居然是不能用的，因为会依次提示：
'vue-tsc' 不是内部或外部命令，也不是可运行的程序或批处理文件。
'vite' 不是内部或外部命令，也不是可运行的程序或批处理文件。

全局安装脚手架
npm install -g create-preset

使用 `vue3-ts-vite` 模板创建一个名为 `hello-vue3` 的项目
preset init hello-vue3 --template vue3-ts-vite

为什么markdown的语法都是个白框框Orz

[chengpeiquan]

对于一个新环境，这里直接创建的脚手架居然是不能用的，因为会依次提示： 'vue-tsc' 不是内部或外部命令，也不是可运行的程序或批处理文件。 'vite' 不是内部或外部命令，也不是可运行的程序或批处理文件。

全局安装脚手架
npm install -g create-preset

使用 `vue3-ts-vite` 模板创建一个名为 `hello-vue3` 的项目
preset init hello-vue3 --template vue3-ts-vite

为什么markdown的语法都是个白框框Orz

咦，有安装依赖吗？命令行有提示要 cd 进项目目录然后 install 依赖

[rainmonG]

当前VSCode的Volar弃版本了-_-||，改版为Vue - Official，但新扩展当前适配度不好，参考vuejs/language-tools#4205完成回退版本+Volar装回+工作区takeover模式~
（盼望VSCode再更新的时候这条参考也可以废弃^_^）

[rainmonG]

BTW，之前评论提到的“白框”，我想大概是指这篇博客本身的页面渲染上对markdown的多行代码不太支持，形如


行内代码OK但多行代码会变成空白滚动条框

[rainmonG]

BTW，之前评论提到的“白框”，我想大概是指这篇博客本身的页面渲染上对markdown的多行代码不太支持，行内代码OK但多行代码会变成空白滚动条框

hhh我发现了，它不是空的，是样式中字体颜色和背景白色太接近了，光标选中能看到，或者指定语言，有的颜色设定区别大的就能看出来。所以如果要完善，针对性调下markdown渲染主题中的多行代码背景色，调灰。

[chengpeiquan]

hhh我发现了，它不是空的，是样式中字体颜色和背景白色太接近了，光标选中能看到，或者指定语言，有的颜色设定区别大的就能看出来。所以如果要完善，针对性调下markdown渲染主题中的多行代码背景色，调灰。

嗷，不知道什么时候适配有了点问题，暗黑模式下，我到时一起修修～

[shylock-wu]

关于VsCode插件有两个小建议

1. 目前最新的Vue插件是：Vue - Official，已经不是Volar了。
2. VsCode已经内置了支持标签自闭和和rename的功能，也就是说Auto Close Tag
   Auto Rename Tag这两个插件不需要安装了