原創(chuàng)文章监署，轉(zhuǎn)載請注明：轉(zhuǎn)載自技術(shù)哥
微信訂閱號：技術(shù)哥
技術(shù)哥
給你不一樣的世界
IDE環(huán)境搭建
我們上次搭好了node.js和vue-cli環(huán)境以后趁尼，是不是就躍躍欲試瓦呼，寫咱們的第一行前端代碼呢划咐？
不著急~大家再忍耐忍耐熟史，今天咱們繼續(xù)來把IDE環(huán)境搭好箱熬。
準(zhǔn)備：vscode(IDE)类垦、vue模板工程
什么是IDE?
IDE(Integrated Development Environment)：集成開發(fā)環(huán)境，就是咱們用來編程的軟件城须。例如我們用vc++來寫c語言蚤认，用visual studio來寫C++，用Eclipse來寫JAVA等
什么是VSCode?
VSCode(Visual Studio Code)：是由微軟研發(fā)的一款免費糕伐、開源的跨平臺文本/代碼編輯器砰琢。它集成了git，可自定義文本編輯快捷鍵赤炒，開源擴(kuò)展插件多氯析，可謂是前端代碼編寫的利器呀！
安裝VSCode
1.百度"VSCode",進(jìn)入VSCode官網(wǎng)
2.以win7 x64為例莺褒，下載VSCode installer
3.運行安裝包掩缓，安裝VSCode，自選路徑
4.完成安裝
二遵岩、運行VSCode
這里就是以后編寫vue前端代碼的地方你辣。
我們可以打開vscode的debug窗口和命令行工具窗口
這里面的"問題"是報錯警告窗口巡通，"終端"是VSCode的內(nèi)置的一個命令行工具。
Vue模板工程
打開并運行工程
在VSCode中點擊左上方"文件"->選擇"打開文件夾"->選擇之前我們新建的工程"my-project"文件夾
然后我們可以看到VSCode內(nèi)置cmd當(dāng)前路徑變成了我們的"my-prject"工程路徑舍哄，輸入npm run dev宴凉，點擊回車執(zhí)行命令，再在瀏覽器上地址欄輸入：localhost:8080表悬，即又可打開my-project的瀏覽器調(diào)試弥锄。點擊命令行工具，快捷鍵ctrl+c即可退出調(diào)試蟆沫。
PS：忘記了工程路徑籽暇，我們可以重新新建一個模板工程。技術(shù)哥希望大家能新建一個專門放vue工程的文件夾饭庞，這樣方便以后管理戒悠。以windows系統(tǒng)為例，比如我E:盤剩余空間比價多舟山，我想在E:新建一個文件夾來放我的vue工程绸狐，那我可以如下操作:（在系統(tǒng)自帶的和vscode內(nèi)置命令行工具都行）
輸入E:，點擊回車,命令行當(dāng)前路徑指向E盤
輸入md myVue,點擊回車累盗，新建一個名為"myVue"的空文件夾(md[新建文件夾名稱])
輸入cd myVue，點擊回車幅骄，命令行當(dāng)前路徑指向E:myVue(cd[要進(jìn)入文件夾])
輸入vue init webpackmy-project劫窒，點擊回車，新建vue工程
然后就如上繼續(xù)操作
寫第一行代碼："HelloWorld!"
我們左邊可以看到my-project的工程目錄拆座。
點擊"src"->點擊"components"->雙擊"HelloWorld.vue"進(jìn)入到我們的HelloWorld組件。
將 <template><divclass="hello">...</div></template>內(nèi)的東西刪掉冠息，并在其里面加入<h1>HelloWorld!</h1>挪凑，并用快捷鍵ctrl+s保存修改后的HelloWorld.vue(修改后的helloWorld.vue)
然后我們可以看到我們的第一行代碼"HelloWorld！"就在瀏覽器上誕生了
Tips：安裝插件
然后安裝3個vue.js開發(fā)的拓展插件
- 點擊左邊欄第五個小圖標(biāo)進(jìn)入"拓展"
-
搜索Auto Rename Tag逛艰、Auto Close Tag躏碳、Vue VSCode Snippets并安裝、重載窗口就完成了散怖。以Auto Close Tag為例：
點擊安裝
Auto Close Tag
寫html起始標(biāo)簽后菇绵，自動補充結(jié)束標(biāo)簽
Auto Rename Tag
修改html標(biāo)簽時，結(jié)束標(biāo)簽也會自動修改
Vue VSCode Snippets
輸入關(guān)鍵字镇眷，自動寫vue模板咬最，比如"vfor"、"von"等欠动。安裝時候它還會讓大家安裝一個叫Vetur的依賴擴(kuò)展插件永乌，這個插件提供vue代碼高亮惑申、自動補全等功能。
至于更多vscode強(qiáng)大的地方翅雏，像自定義快捷鍵圈驼、更換ide界面主題等的技術(shù)哥在這里就不多做介紹了，自行探索吧~
PS：第一次安裝完打開vscode時望几，vscode上方會提示"git未安裝"之類的話绩脆，我們可以先不管，它是一個可以提供代碼版本管理的東西橄抹，在我們vue開發(fā)教程中比較少用衙伶，可以到需要用到的時候再搭建。
