原创文章，转载请注明：转载自技术哥
微信订阅号：技术哥
技术哥
给你不一样的世界
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组件。
将 <template><divclass="hello">...</div></template>内的东西删掉，并在其里面加入<h1>HelloWorld!</h1>，并用快捷键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开发教程中比较少用，可以到需要用到的时候再搭建。
关注“技术哥”的微信公众号查看更多技术文章
网友评论