Vue-02 Visual Studio Code

最新推荐文章于 2024-08-08 10:12:08 发布
最新推荐文章于 2024-08-08 10:12:08 发布
阅读量768 收藏
点赞数 1
分类专栏： 前端 文章标签： vscode vue.js 编辑器
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45041878/article/details/123562448
版权

一、介绍 Visual Studio Code

Visual Studio Code (简称 VS Code / VSC) 是一款免费开源跨平台的现代化轻量级代码编辑器，支持语法高亮、智能
代码补全、自定义热键、括号匹配、代码片段、代码对比 Diff、GIT 等特性，并针对网页开发和云端应用开发做了优
化。软件跨平台支持 Win、Mac 以及 Linux，运行流畅，可谓是微软的良心之作……
在 Build 2015 大会上，微软宣布推出免费跨平台的 Visual Studio Code 编辑器。
介绍 VS Code 的优点：
1、支持30多种常用语言的语法高亮，并对html、js、css、Angular等很好的语法支持，并且还支持MarkDown
的预览
2、体积小，功能强大，当然性能也是很好的，打开超大型的文本文件也不会卡死，大家可以和其他的一些文本
编辑器对比一下
3、支持命令操作(Ctrl + Shift + P)和鼠标操作，还有大量的快捷键，可以适应各种开发者的操作习惯
4、支持Git版本控制器，可以完成创建分支、解决冲突、提交修改等操作
5、强大的搜索功能，并且支持多文件搜索
6、最大的有点，当然是跨平台、免费

二、安装 Visual Studio Code

VS Code 下载地址：https://www.visualstudio.com/
安装包与参考文档位于： 03-开发工具\VS Code工具与教程
双击安装包，打开点击运行
在这里插入图片描述
点击 确定
在这里插入图片描述
点击 下一步
在这里插入图片描述
勾选 我接受协议>下一步
在这里插入图片描述
指定安装路径

  • 路径不要有空格和中文
    在这里插入图片描述
    快捷方式，默认即可

在这里插入图片描述

勾选 创建桌面快捷方式
在这里插入图片描述
点击 安装
在这里插入图片描述
会进入安装页面，等待一会即安装成功

三、使用 Visual Studio Code

VS Code 使用手册：https://code.visualstudio.com/docs

2.1 界面布局

安装完成后，我们看到的Visual Studio Code界面如下，当然不同的系统界面边框略有不同，基本布局如下
在这里插入图片描述

2.2 插件安装

  1. 安装浏览器插件，用于访问html页面，在 扩展栏 的搜索框中输入 open in browser
    使用 Alt + B 使用默认浏览器打开当前 html 页面，或 Shift + Alt + B 选择其他浏览器
    在这里插入图片描述
  2. 安装 Vue 插件，安装后有快捷提示
    在这里插入图片描述
    Vetur —— 语法高亮、智能感知、Emmet等
    Auto Rename Tag —— 自动完成另一侧标签的同步修改
    Path Intellisense —— 自动路径补全
    HTML CSS Support —— 让 html 标签上写class 智能提示当前项目所支持的样式，安装后有快捷提示

2.3 设置

  • 开启自动保存文件（不需要手动按 Ctrl + S 保存）
    在这里插入图片描述
  • 字体大小设置，点击如图菜单：
    打开 Settings快捷键: ctrl + ,
    在这里插入图片描述
    在这里插入图片描述

2.4 快捷键

官方快捷键：https://code.visualstudio.com/docs/getstarted/keybindings
快捷键pdf文档：https://code.visualstudio.com/shortcuts/keyboard-shortcuts-windows.pdf

快捷键0作用
Ctrl + Shit + F会激活这个工具栏的全局搜索功能
Ctrl + F局部搜索, 搜索当前文件中的内容
Ctrl + G输入行号可以跳转到指定的行
! + Tab空白html文件里输入一个英文感叹号 ！ ，然后按 Tab 键会生成html模板页面
Shift + Alt + F格式化代码
ctrl+/单行注释
shift+alt+A多行注释
alt+up/down移动行能
shift + alt +up/down复制当前行
ctrl + b显示/隐藏左侧工具栏
shift + ctrl + k删除当前行
ctrl + x剪切当前行或剪切
ctrl + ~控制台终端显示与隐藏
F2文件重命名

https://www.cnblogs.com/weihe-xunwu/p/6687000.html

2.5 资源管理器

在这里插入图片描述

2.6 搜索

  • Ctrl + Shit + F 会激活这个工具栏的全局搜索功能，如图：
    在这里插入图片描述

2.7 Git版本控制

git下载地址：https://git-scm.com/

  1. 本地环境变量配置, 在path中追加git下的cmd目录，我的是 D:\Git\cmd
    在这里插入图片描述
  2. Ctrl + , 打开设置窗口，打开并编辑 settings.json，添加 git.exe 的安装路径
    “git.path”: “D:/Git/bin/git.exe”

在这里插入图片描述

  1. 创建一个空文件夹test01，通过 git init 初始化为git仓库
    在这里插入图片描述

  2. VS Code 通过 File > Open Folder 找到 test01 打开
    在这里插入图片描述

  3. 就可以 git 来进行管理 test01
    在这里插入图片描述

2.8 Debug调试

这个功能简单的说就是调试代码，具体大家看官方文档(https://code.visualstudio.com/Docs/editor/debuggin
g) 大家有兴趣就自己去研究吧~~

放生Li
关注
专栏目录
使用Visual Studio Code编写第一个Vue
柳老师的博客
07-04 3126
在components文件夹下创建:child.vue文件,代码由两部分组成,js和template(也就是html代码)3) index.html 引用main.js,利用其将vue组件加载到页面.在你准备放置项目的地方创建一个文件夹,例如:D:\VSCodeProject。js是由vue框架书写,负责数据和逻辑,template负责内容的呈现.src/App.vue :父组件,引用了HelloWorld.vue。2) src/main.js 将组件加载到页面的一个对象.cd
Vue3.0 全面探索 - 基于 Visual Studio Code 的代码片段开发插件
Wscats
12-04 2058
Vue3 Snippets for Visual Studio Code Vue3 Snippets, This extension adds Vue3 Code Snippets into Visual Studio Code. Snippets / 代码片段 Including most of the API of Vue3. You can type reactive, choose rea...
Visual Studio Code+Vue
qq_44885775的博客
04-24 2735
VisualStudio+Vue环境搭建
Visual Studio Code搭建VUE开发环境
Nicky's blog
08-07 3255
Vue.js 是一款易学易用，性能出色，适用场景丰富的 Web 前端框架。它基于标准 HTML、CSS 和 JavaScript 构建，提供容易上手的 API 和一流的文档
Visual Studio code编辑器快速生产Vue2模板
AKindofo的博客
06-11 653
vue 快速生成模板
VUE学习笔记(二) Visual Studio Code
会飞De琥珀
12-21 313
VUE学习笔记(一) 环境 VUE学习笔记(二) Visual Studio Code VUE学习笔记(三) 运行VUE VUE学习笔记(四) 引用element-ui VUE学习笔记(五) 引入axios Visual Studio Code 微软推出的代码编辑器, 插件丰富,非常适合VUE前端开发, 官网:https://code.visualstudio.co...
Vue基础阶段入门：使用Visual Studio Code新建项目-基本框架
gin_xin的博客
08-04 673
使用Visual Studio Code新建项目
Vue router在Visual Studio Code中的安装与使用
qq_44629323的博客
07-24 3666
Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌。包含的功能有： 嵌套的路由/视图表 模块化的、基于组件的路由配置 路由参数、查询、通配符 基于 Vue.js 过渡系统的视图过渡效果 细粒度的导航控制 带有自动激活的 CSS class 的链接 HTML5 历史模式或 hash 模式，在 IE9 中自动降级 自定义的滚动条行为 1.安装Vue router 1.先新建一个vue，把他拉进Visual Studio Code 在Visu
vue-cli脚手架搭建简单项目（Visual Studio Code，基于vue-cli4.x版本）
zhangqian19901207的博客
05-12 1624
1.安装vue-cli PS E:\vue-workspace> npm install -g @vue/cli 2.查看是否安装成功 PS E:\vue-workspace> vue -V @vue/cli 4.1.1 3.创建项目test PS E:\vue-workspace> vue create test 4.选择配置，“空格”进行选择，“回车”进入下一步，依次选择： （1）Manually select features（自定义配置） （2）Babel、Router、Vu
VS-Code中Vue3-项目创建
zhzjn的博客
12-07 5230
本文适合作为新手小白创建vue项目时的参考，包含了node.js，npm以及npm镜像，vue的使用，谢谢换看
使用Visual Studio Code编写VUE所使用的插件
ww0908的博客
10-24 9134
Auto Close Tag 自动闭合HTML标签   Auto Rename Tag 修改HTML标签时，自动修改匹配的标签   Bookmarks添加行书签   Can I Use HTML5、CSS3、SVG的浏览器兼容性检查   Code Runner 运行选中代码段（支持大量语言，包括Node）   CodeBing 在VSCode中弹出浏览器并搜索，可编辑搜索引擎 ...
前端开发部署：Visual Studio Code + vue
xingshanchang的博客
06-10 2246
本教程全部采用默认安装路径，因为在进行自定义路径安装的时候，需要配置各种环境变量，在这个配置过程中，可能出现各种很混乱的问题。 ==C:\Program Files\nodejs== 这里不勾选，后续需要什么tools的时候，再进行安装即可。 Win + R 打开 CMD 输入版本查看命令，查看安装是否成功 2 输入下面指令查看路径 webpack用来项目构建、打包、资源整合等。 注意这里安装新的脚手架。 出现warn没关系，继续执行即可。 查看vue版本及是否成功： 四 基于上述vue创
VS Code上搭建Vue开发环境
interest_ing_的博客
07-13 1万+
介绍：VS Code上搭建Vue开发环境——超简单你女朋友都可以看得懂的教程，Vue是指一个用于创建用户界面的渐进式框架，旨在更好地组织与简化Web开发；vue也可指iOS和Android平台上的一款视频拍摄和美化工具app，是一个手机端的视频拍摄及编辑工具以及原创Vlog短视频平台，允许用户通过简单的操作实现Vlog的拍摄、剪辑、细调、和发布，记录与分享生活。注：这里可能遇到问题，PowerShell用于控制加载配置文件和运行脚本的条件，为了防止恶意脚本的执行，可能遇到无法运行脚本的问题；
VSCode中写Vue没有代码提示的解决办法
热门推荐
qq_50564231的博客
02-18 2万+
但是经过我测试，两个插件在大部分时候都只支持单词语法的提示，Vetur在已创建的标签外使用时才支持模板创建，而Volar好像不支持模板创建？并且两个插件同时安装了，需要禁用其中一个才能正常使用。Vetur这个插件是对Vue2的项目适配比较好的，Vue3项目官方出了个插件叫Vue Language Features(Volar)。图4 Volar插件安装过程。2023.2.22更新。
了解VSCode：一款功能强大的开源代码编辑器
最新发布
Good_tea_h的博客
08-08 3505
Visual Studio Code作为一款功能强大的开源代码编辑器，以其轻量级、高效、多语言支持、智能代码补全、内置调试工具、丰富的扩展市场以及跨平台兼容性等特点，赢得了广大开发者的青睐。它以其强大的功能、丰富的插件生态系统、跨平台兼容性以及出色的用户体验，成为了广大开发者的首选工具。VSCode提供了丰富的代码编辑功能，包括语法高亮、代码折叠、多光标编辑、代码片段等。通过安装扩展，您可以为VSCode添加新的语言支持、框架集成、代码片段、代码美化、调试工具等功能。
Visual Studio Code 有哪些工程方面的亮点
公众号：Java后端
11-08 536
优质文章，及时送达作者 | 李少侠链接 | zhuanlan.zhihu.com/p/35303567Visual Studio Code（VS Code）近年来获得了爆炸式增长，成为广大开发者工具库中的必备神器。它作为一个开源项目，也吸引了无数第三方开发者和终端用户，成为顶尖开源项目之一。它在功能上做到了够用，体验上做到了好用，更在拥有海量插件的情况下做到了简洁流畅，实属难能可贵。我是VS Co...
不得不爱，Visual Studio Code十大超酷特性
weixin_33922672的博客
06-03 211
这大半夜的，是不是有很多码农的在熬夜奋战？ 如果你最近关注了MicrosoftDeveloper的空间，你可能会想“这是一个新的微软”。如果你参加了最近的BUILD开发者大会，这个领悟将会更加明显。改变发生在微软开发者的各个角落，而且似乎是在向着好的方向变化着。 可以确定，你喜欢VisualStudio作为IDE的丰富功能，而且用它管理.Net代码是那么的舒...
Visual Studio Code 小白使用介绍
每天都有新发现
05-29 8257
前言 现在使用Vscode编码的人越来越多，凭借着免费，开源，轻量，跨平台的特点收货了一大批忠实粉丝 最近因项目需要开始使用Vscode，但不知为何，感觉有点力不从心，不知道该怎么用 首先想到去官网看看，然后放弃了（英语渣渣表示压力山大，其实正因为英语差，才更应该锻炼一下的，大家不要学我23333） 最后自己摸索和看相关视频才豁然开朗。现在做一个归纳总结，...
visual studio code使用vue
06-06
在Visual Studio Code中，你需要安装一些Vue插件来提供对Vue项目的支持。以下是一些常用的Vue插件： - Vetur：提供Vue语法高亮、代码补全、错误检查等功能。 - Vue 2 Snippets：提供常用的Vue代码片段，可以快速...
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值