这次练习通过 艾编程的VScode教程安装了一系列方便编辑的插件、了解了VScode的一些快捷键、大致了解了Emmet语法和将项目的前端部分运行。
1.VScode实用插件
- Material | icon Theme: 使文件图标更为美观、易于辨别:
- Live Server:保存后实时更新网页内容,不需要手动刷新
- Auoto Rename Tag:对于一般标签,实现修改开始标签已修改,结束标签自动修改的功能
- Prettier - Code - fomatter: 实现保存代码后,自动标准化代码布局的效果,使代码更美观、规范
2.VScode快捷键
- 注释/多行注释/取消注释:Ctrl + /
- 上下移动行: alt + up/down
- 向上/下复制当前行: shift + alt + up/down
- 显示/隐藏坐厕目录栏: Ctrl + b
- 控制台/终端/显示/隐藏: Ctrl + ~
- 查找文件/安装的插件: Ctrl + p
- 新建一个窗口: Ctrl + shift + n
3.运行项目的前端文件(Font)
具体化老师和学姐给的教程:
前端代码的运行需要先下载node.js的一个版本,建议选择14左右的版本。可以在官网 下载安装,安装成功后可以通过在命令行输入 node -v 来查看版本信息。
由于npm下载速度较慢,可以使用淘宝镜像地址来安装npm,命令为:npm install -g cnpm -registry=https://registry.npm.taobao.org
接着安装vue脚手架,命令为:npm install -g @vue/cli
下载前端代码后,需要使用命令 npm install 来安装依赖,如果中途报错,可能是因为版本冲突问题。解决方法是升级或降级对应的依赖版本。
最后,使用命令 npm run dev 来运行前端代码。
小结
想要打开前端代码,要安装node,安装脚手架,安装依赖,安装python…
版本不匹配重新搞,搞到了一天心态有点爆炸。
在我尝试最后一次的时候,没有用VScode的终端,而是在cmd中安装所有的东西,这次成功了
总结一点就是,cmd看来和VScode终端原来是有区别的
有一些情况下,使用cmd是必要的,而VSCode终端可能无法实现相同的目标。以下是一些例子(不全)
:
系统级别的命令:例如修改环境变量、安装系统服务等,这些操作需要管理员权限才能完成,而VSCode终端默认情况下没有管理员权限。
特定的第三方命令:有一些第三方工具或库只支持在cmd中使用,例如某些Python库(如pyinstaller)只能在cmd中执行,而不能在VSCode终端中执行。
需要交互式输入的命令:有一些命令需要用户的交互输入,例如密码、确认等,而VSCode终端不支持这种交互模式。
超长输出的问题:当命令输出结果很多时,VSCode终端可能会出现卡顿或者无法滚动屏幕的问题,而cmd则可以更好地处理这种情况。
4.Emmet语法
-
“!”:h5的标准标签
-
“>”:child
Emmet语法,简直不要太高效!