原创文章，转载请注明：转载自技术哥

微信订阅号：技术哥

技术哥

给你不一样的世界

IDE环境搭建

我们上次搭好了node.js和vue-cli环境以后，是不是就跃跃欲试，写咱们的第一行前端代码呢？

不着急~大家再忍耐忍耐，今天咱们继续来把IDE环境搭好。

准备：vscode(IDE)、vue模板工程

什么是IDE?

IDE(Integrated Development Environment)：集成开发环境，就是咱们用来编程的软件。例如我们用vc++来写c语言，用visual studio来写C++，用Eclipse来写JAVA等

什么是VSCode?

VSCode(Visual Studio Code)：是由微软研发的一款免费、开源的跨平台文本/代码编辑器。它集成了git，可自定义文本编辑快捷键，开源扩展插件多，可谓是前端代码编写的利器呀！

安装VSCode

1.百度"VSCode",进入VSCode官网

2.以win7 x64为例，下载VSCode installer

点击下载vscode

3.运行安装包，安装VSCode，自选路径

vscode安装界面

4.完成安装

二、运行VSCode

这里就是以后编写vue前端代码的地方。

vscode界面

我们可以打开vscode的debug窗口和命令行工具窗口

命令行窗口

这里面的"问题"是报错警告窗口，"终端"是VSCode的内置的一个命令行工具。

Vue模板工程

打开并运行工程

在VSCode中点击左上方"文件"->选择"打开文件夹"->选择之前我们新建的工程"my-project"文件夹

然后我们可以看到VSCode内置cmd当前路径变成了我们的"my-prject"工程路径，输入npm run dev，点击回车执行命令，再在浏览器上地址栏输入：localhost:8080，即又可打开my-project的浏览器调试。点击命令行工具，快捷键ctrl+c即可退出调试。

PS：忘记了工程路径，我们可以重新新建一个模板工程。技术哥希望大家能新建一个专门放vue工程的文件夹，这样方便以后管理。以windows系统为例，比如我E:盘剩余空间比价多，我想在E:新建一个文件夹来放我的vue工程，那我可以如下操作:（在系统自带的和vscode内置命令行工具都行）

输入E:，点击回车,命令行当前路径指向E盘

输入md myVue,点击回车，新建一个名为"myVue"的空文件夹(md[新建文件夹名称])

输入cd myVue，点击回车，命令行当前路径指向E:myVue(cd[要进入文件夹])

输入vue init webpackmy-project，点击回车，新建vue工程

然后就如上继续操作

写第一行代码："HelloWorld!"

我们左边可以看到my-project的工程目录。

点击"src"->点击"components"->双击"HelloWorld.vue"进入到我们的HelloWorld组件。

将内的东西删掉，并在其里面加入

`HelloWorld!`

，并用快捷键ctrl+s保存修改后的HelloWorld.vue(修改后的helloWorld.vue)

然后我们可以看到我们的第一行代码"HelloWorld！"就在浏览器上诞生了

Tips：安装插件

然后安装3个vue.js开发的拓展插件

点击左边栏第五个小图标进入"拓展"
搜索Auto Rename Tag、Auto Close Tag、Vue VSCode Snippets并安装、重载窗口就完成了。以Auto Close Tag为例：

点击安装

Auto Close Tag

写html起始标签后，自动补充结束标签

自动修改

Auto Rename Tag

修改html标签时，结束标签也会自动修改

Vue VSCode Snippets
输入关键字，自动写vue模板，比如"vfor"、"von"等。安装时候它还会让大家安装一个叫Vetur的依赖扩展插件，这个插件提供vue代码高亮、自动补全等功能。

至于更多vscode强大的地方，像自定义快捷键、更换ide界面主题等的技术哥在这里就不多做介绍了，自行探索吧~

PS：第一次安装完打开vscode时，vscode上方会提示"git未安装"之类的话，我们可以先不管，它是一个可以提供代码版本管理的东西，在我们vue开发教程中比较少用，可以到需要用到的时候再搭建。

关注“技术哥”的微信公众号查看更多技术文章

前端 | VUE系列教程(2)

技术哥