Vue基础01开发环境准备

介绍VSCode的安装、开发Vue的技巧、vue相关插件的操作、html调试与git集成的一些常见操作

1 VSCode安装

code.visualstudio.com/

2 VSCode开发Vue的一些技巧

1.1 代码提示

1. 编辑器自带的代码提示，错误有红色波浪线

2. 变量、方法、属性提示

3. 输出console.log快捷方式，输入log后按回车

4. 输出html结构快捷方式，输入!后按回车

5. 打开终端快捷键，同时按ctrl和`(反引号)

6. 调试快捷键，F5

7. Mac下的复制与剪切，command+c，复制command+v，剪切command+option+v

8. 快速创建id为app的div，输入#app后按回车

1.2 调试技巧

1. 调试js，默认支持Node，F5

2. 网页调试,调试html中的脚本

   1. 安装debugger for chrome扩展，作用可以启动Chrome【deprecated】
   2. 配置launch.json，启动的Chrome与VSCode建立联接，这样才能断点调试，需要做配置
      1. 文件位置:当前目录下的.vscode/launch.js
      2. 这里有2种配置方式，一种是使用http协议的地址来访问调试，需要启动http服务

3. 生成launch.js

4. 配置文件协议

5. 配置http协议

   # 安装并启动http-server
   npm -g install http-server
   http-server
   

3 VSCode插件

3.1 如何安装插件

3.2 Vue相关插件

1. debugger for chrome，代码调试

2. vetur，代码高亮 3. vue vscode snippets，代码补全

3.3 插件vue vscode snippets

1. 快速创建vue结构，输入vbase后按回车
2. 快速输入data，输入vdata后按回车
3. 快速输入v-for，输入vfor后按回车
4. 快速输入method，输入vmethod后按回车
5. 快速输入computed，输入vcomputed后按回车

4 集成git