Vue.js is an awesome JavaScript Framework for building Frontend Applications! VueJS mixes the Best of Angular + React!
vscode
VSCode是微軟出的一款輕量級代碼編輯器，免費(fèi)而且功能強(qiáng)大，對JavaScript和NodeJS的支持非常好锅知，自帶很多功能，例如代碼格式化脓钾，代碼智能提示補(bǔ)全售睹、Emmet插件等。VSCode推薦一個項(xiàng)目以文件夾的方式打開可训。
vscode安裝
- 進(jìn)入vscode官網(wǎng)（https://code.visualstudio.com/Download）
image
-
雙擊下載的安裝包昌妹，進(jìn)入安裝向?qū)Ы缑娲肥啵稽c(diǎn)擊下一步
image -
進(jìn)入許可協(xié)議，點(diǎn)擊“我接受協(xié)議”選項(xiàng)飞崖；點(diǎn)擊下一步
image -
選擇目標(biāo)位置烂叔，就是你想把軟件安裝在哪個目錄；選擇合適的目錄后繼續(xù)點(diǎn)擊下一步
image -
進(jìn)入選擇其他任務(wù)界面固歪，默認(rèn)已經(jīng)勾選了必要的任務(wù)蒜鸡，這里盡量不要修改默認(rèn)的，同時你也可以選擇將打開方式添加到鼠標(biāo)右鍵菜單上（勾選“其他”中的第一選項(xiàng)）牢裳，繼續(xù)點(diǎn)擊下一步
image -
直接點(diǎn)擊安裝逢防；幾秒后，即可安裝完成
image
vscode插件
安裝
-
進(jìn)入vscode官網(wǎng)插件商店（https://marketplace.visualstudio.com/VSCode）
image -
以安裝Vetur插件為例
image -
點(diǎn)擊install,會啟動vscode
image 在vscode中點(diǎn)擊安裝即可
vue相關(guān)插件
- vetur 語法高亮贰健、智能感知
- VueHelper vue代碼碎片
- Vue 2 Snippets vue2代碼碎片
導(dǎo)入工程
以vue項(xiàng)目為例
在vscode ide中選擇"文件"-->"打開文件夾"
-
將構(gòu)建好的vue工程導(dǎo)入
image
開發(fā)組件
安裝vue相關(guān)插件之后,vscode會有代碼提示功能
image
快捷鍵
所有快捷鍵設(shè)置：文件→首選項(xiàng)→鍵盤快捷方式
在當(dāng)前行中間換行到下一行：ctrl+enter
當(dāng)光標(biāo)點(diǎn)擊到某一行時胞四，默認(rèn)選中全行，可以直接復(fù)制剪切
直接刪除某一行：shift+delete或者ctrl+shift+k
多行光標(biāo)選擇：alt+鼠標(biāo)左鍵
自動生成html結(jié)構(gòu)和meta聲明：首先輸入“!”伶椿，然后按tab鍵
標(biāo)簽自動補(bǔ)全：tab鍵
折疊所有代碼：ctrl+k辜伟、ctrl+0
拆分編輯器：ctrl+\ 查找框右邊的3個參數(shù)分別為：區(qū)分大小寫，全字匹配脊另，使用正則
跳轉(zhuǎn)行號：ctrl+G
添加函數(shù)注釋：在函數(shù)上方輸入“/**”导狡，然后點(diǎn)擊enter
格式化：alt+shift+f
注釋：ctrl+/
全部保存：ctrl+k, 然后只按s一個鍵
向上移動一行：alt+↑
向下移動一行：alt+↓
向上復(fù)制一行：alt+shift+↑
向下復(fù)制一行：alt+shift+↓
查找：ctrl+F
替換：ctrl+H
文件夾中查找：ctrl+shift+f
可以在打開的文件夾中搜索所有文件內(nèi)容
文件中替換：ctrl+shift+h
轉(zhuǎn)到定義：F12
轉(zhuǎn)到實(shí)現(xiàn)：ctrl+F12
打開文件夾：ctrl+k, ctrl+o
關(guān)閉文件夾：ctrl+k, 然后單按一個f
選中一段代碼，通過“ctrl+[”可以左移偎痛，“ctrl+]”可以右移
