Vue开发好伙伴--Visual Studio Code编辑器

简介: 对于Vue开发的编辑器--vscode你都了解了多少?vscode,全称Visual Studio Code,是一款微软公司旗下开发的可以跨平台运行的免费的源代码编辑器,其中含有很多方便的智能快捷键、多样化的插件功能、智能提示功能等等,在vue前端开发中起到了很便利的开发作用,本文主要是讲解一些vscode的使用,非常值得刚刚入门的萌新朋友参考学习。

前言

    对于Vue开发的编辑器--vscode你都了解了多少?vscode,全称Visual Studio Code,是一款微软公司旗下开发的可以跨平台运行的免费的源代码编辑器,其中含有很多方便的智能快捷键、多样化的插件功能、智能提示功能等等,在vue前端开发中起到了很便利的开发作用,本文主要是讲解一些vscode的使用,非常值得刚刚入门的萌新朋友参考学习。

一、下载安装软件

可以登录官方

image.png

根据自己电脑上的系统进行安装下载即可,由于这个步骤很简单,这里就不过多编写,主要是因为已经下载过了,不想再卸载重新下载一次了,哈哈哈!

2345_image_file_copy_224.jpg

二、界面介绍

主要界面:根据下图可以大致的知道,我们的vscode有以下的六大部分:菜单栏、活动界面、侧边选择栏、代码编辑面板栏、代码运行命令栏、状态栏。

2345_image_file_copy_225.jpg

主要介绍的是以下三个部分:

1、活动栏部分:

2345_image_file_copy_226.jpg

2、侧边栏

这个部分只要“活动栏” 如上的任意一个功能按钮点击,侧边栏才会显示相应的功能操作界面。比如,我们代码编写用到的“文件资源管理”,我们通过点击这一栏,就会出现相应的操作管理,资源管理这个部分主要存放的功能是,代码编辑是的文件、文件夹,可以自行打开并且浏览编辑,项目中的文件/文件夹都可以进行增(创建文件/文件夹)、删(删除文件/文件夹)、改(更改文件/文件夹的命名)、查(查看文件)等操作。

3、状态栏

2345_image_file_copy_227.jpg

三、插件安装

在活动栏选择"插件"这个按钮,然后侧边栏就会出现相应的功能选择项目,我们在搜索栏搜索相应的插件,这里我们搜索一个例子插件--background(背景插件),只需要点击“安装”就可以了。如下:

2345_image_file_copy_228.jpg

安装以后,关闭你的编辑器,就可以看到你的背景已经发生了变化,

2345_image_file_copy_229.jpg

当然,卸载的话只要在相应的插件里面选择“卸载”即可。这个当你需要下载的时候,当我们安装完成以后“Install”就会变成“Uninstall”,这样点击Uninstall就可以进行卸载这个插件了。

四、项目开发中常用的插件

①代码编辑类

这一类的插件主要是为了提高代码的效率,主要可以分成两类,一类是代码提示插件:包括完整HTML代码提示(Snippets 插件)、css样式提示插件(css support插件)等等;另一类就是代码格式以及显示效果类插件:比如格式化代码插件(Beautify插件)、显示代码对齐辅助线插件(Guides插件)等等

②网页项目效果类

第一种:Live Serve插件,这一插件功能是你安装了这个插件以后,具有实时加载功能的小型服务器可以用于本地搭建零食使用的服务器的类似功能,使用这个后可以进行实时的查看网页开发的效果,还可以在你文件修改后保存即可在浏览器进行自动刷新,很方便。

第二种:View In Browser插件。安装该插件后,在文件资源管理器中右键单击HTML文件,会出现“View In Browser”选项,单击该选项就可以打开浏览器预览HTML文件。

Vue项目插件

一般用到的有Vue vS Code Snippets插件、Vetur插件(语法高亮、智能感知、Emmet、Vue提示等)、JavaScript (ES6) Code Snippets插件、ESLint插件(代码规范提示)、VueHelper插件(Snippets 代码片段)、Prettier 插件(代码规范性插件)等,这一些都是可以在脚手架部分再进行详细的介绍这些插件。

五、VS code 常用到的快捷键

image.png

本人目前能够罗列的就只有那么多,其他我还没有用到,到时候大家编程学习的时候遇到别的可以自行添加,学习是自己的,还有很多你是需要学的!


相关文章
|
2月前
|
JSON 数据可视化 图形学
Graphix: 轻量级、可插拔、OOP 式图形编辑器开发引擎
A lightweight, pluggable, object-oriented programming (OOP) style graphic editor development engine / 一个轻量级、可插拔、OOP 式图形编辑器开发引擎
57 2
|
2月前
|
前端开发 关系型数据库 MySQL
基于python+django+vue.js开发的社区养老管理系统
基于python+django+vue.js开发的社区养老管理系统
92 1
|
12天前
|
JavaScript
Vue 开发技巧·1
【4月更文挑战第2天】通过props解耦Vue组件与路由参数,避免使用`$route`导致的高耦合。在路由配置中设定`props: true`,如`{ path: /user/:id, component: User, props: true }`,使组件能直接通过`props`获取`params`。此外,功能组件是无状态、不可实例化的,依赖外部数据且无生命周期,提高渲染性能。通过上下文参数传递所需数据,如`{{item.title}} {{item.content}}`,在父组件中定义并传递`list`数据。
26 8
|
2月前
|
前端开发 关系型数据库 MySQL
基于python+django+vue.js开发的医院门诊管理系统/医疗管理系统
基于python+django+vue.js开发的医院门诊管理系统/医疗管理系统
52 0
|
2月前
|
JavaScript 前端开发 开发者
vue组件化开发,与渐进式框架讲解
vue组件化开发,与渐进式框架讲解
19 3
|
2月前
|
JavaScript 前端开发
提高Vue开发效率的必杀技——掌握mixin代码复用技术!
Vue 进阶系列教程将在本号持续发布,一起查漏补缺学个痛快!若您有遇到其它相关问题,非常欢迎在评论中留言讨论,达到帮助更多人的目的。若感本文对您有所帮助请点个赞吧!
|
3月前
|
JSON JavaScript 前端开发
【前后端实战项目】Vue.js 和 Egg.js 开发企业级健康管理项目
【前后端实战项目】Vue.js 和 Egg.js 开发企业级健康管理项目
|
3月前
|
JavaScript 测试技术 开发者
探索 Vue 实例方法的魅力:提升 Vue 开发技能(下)
探索 Vue 实例方法的魅力:提升 Vue 开发技能(下)
|
3月前
|
JavaScript API UED
探索 Vue 实例方法的魅力:提升 Vue 开发技能(上)
探索 Vue 实例方法的魅力:提升 Vue 开发技能(上)
探索 Vue 实例方法的魅力:提升 Vue 开发技能(上)
|
3月前
|
JavaScript 开发者 UED
自定义指令:让 Vue 开发更有趣(下)
自定义指令:让 Vue 开发更有趣(下)