Vue开发与调试工具安装

vscode

VSCode是微软出的一款轻量级代码编辑器，免费而且功能强大，对JavaScript和NodeJS的支持非常好，自带很多功能，例如代码格式化，代码智能提示补全、Emmet插件等。VSCode推荐一个项目以文件夹的方式打开。

vscode安装

• 进入vscode官网（https://code.visualstudio.com/Download）
  
• 双击下载的安装包，进入安装向导界面；点击下一步
  
• 进入许可协议，点击“我接受协议”选项；点击下一步
  
• 选择目标位置，就是你想把软件安装在哪个目录；选择合适的目录后继续点击下一步
  
• 进入选择其他任务界面，默认已经勾选了必要的任务，这里尽量不要修改默认的，同时你也可以选择将打开方式添加到鼠标右键菜单上（勾选“其他”中的第一选项），继续点击下一步
  
• 直接点击安装；几秒后，即可安装完成
  

vscode插件

安装

• 进入vscode官网插件商店（https://marketplace.visualstudio.com/VSCode）
  
• 以安装Vetur插件为例
  
• 点击install,会启动vscode
  
• 在vscode中点击安装即可

vue相关插件

• vetur 语法高亮、智能感知
• VueHelper vue代码碎片
• Vue 2 Snippets vue2代码碎片

导入工程

以vue项目为例

• 在vscode ide中选择"文件"–>“打开文件夹”
• 将构建好的vue工程导入
  

开发组件

安装vue相关插件之后,vscode会有代码提示功能

快捷键

所有快捷键设置：文件→首选项→键盘快捷方式

1.在当前行中间换行到下一行：ctrl+enter
2.当光标点击到某一行时，默认选中全行，可以直接复制剪切
3.直接删除某一行：shift+delete或者ctrl+shift+k
4.多行光标选择：alt+鼠标左键
5.自动生成html结构和meta声明：首先输入“!”，然后按tab键
6.标签自动补全：tab键
7.折叠所有代码：ctrl+k、ctrl+0
8.拆分编辑器：ctrl+\ 查找框右边的3个参数分别为：区分大小写，全字匹配，使用正则
9.跳转行号：ctrl+G
10.添加函数注释：在函数上方输入“/**”，然后点击enter
11.格式化：alt+shift+f
12.注释：ctrl+/
13.全部保存：ctrl+k, 然后只按s一个键
14.向上移动一行：alt+↑
15.向下移动一行：alt+↓
16.向上复制一行：alt+shift+↑
17.向下复制一行：alt+shift+↓
18.查找：ctrl+F
19.替换：ctrl+H
20.文件夹中查找：ctrl+shift+f

可以在打开的文件夹中搜索所有文件内容

1.文件中替换：ctrl+shift+h
2.转到定义：F12
3.转到实现：ctrl+F12
4.打开文件夹：ctrl+k, ctrl+o
5.关闭文件夹：ctrl+k, 然后单按一个f
6.选中一段代码，通过“ctrl+[”可以左移，“ctrl+]”可以右移