。安裝nodejs
安裝包下載地址：http://nodejs.cn/download/ 下載安裝。
打開CMD 執(zhí)行以下命令行
E:\webstorm\first>node -v //查看當(dāng)前nodejs的版本號(hào) 。
二。使用NPM初始化與安裝 (NPM常用命令)
打開CMD 執(zhí)行以下命令行
E:\webstorm\first>npm init //初始化生成 package.json，. 默認(rèn)創(chuàng)建，就不停的回車
E:\webstorm\first>npm init -f //初始化不需人工
E:\webstorm\first>type package.json //查看package.json
E:\webstorm\first>npm config set registry https://registry.npm.taobao.org //npm指向淘寶NPM鏡像 https://registry.npm.taobao.org/
E:\webstorm\first>npm install jquery //安裝jquery包
E:\webstorm\first>npm install jquery --save-dev //開發(fā)環(huán)境使用
E:\webstorm\first>npm root -g //查看全局安裝的文件夾位置
-S , --save 安裝包信息將加入到 生產(chǎn)階段的依賴（dependencies）
-D, --save-dev，--save --dev 安裝包信息將加入到 開發(fā)階段的依賴（devDependencies）
三。安裝VUE
打開CMD 執(zhí)行以下命令行
E:\webstorm\first>npm install -g vue //安裝VUE
E:\webstorm\first>npm install -g @vue/cli //安裝命令行工具
E:\webstorm\first>npm install -g vue-cli //安裝命令行工具
E:\webstorm\first>npm uninstall -g vue-cli //泄載
E:\webstorm\first>vue -V //查看當(dāng)前@vue/cli的版本號(hào) 。
四。生成項(xiàng)目
打開CMD 執(zhí)行以下命令行
E:\webstorm>vue create hello-vue //創(chuàng)建項(xiàng)目 . 默認(rèn)創(chuàng)建，就不停的回車
E:\webstorm>cd hello-vue //進(jìn)入項(xiàng)目目錄
E:\webstorm>npm run serve //啟動(dòng)項(xiàng)目
五。訪問地址：http://localhost:8081/
參考視頻：
https://v.youku.com/v_show/id_XNDQ0NjQxOTgzNg==.html
https://learning.dcloud.io/#/?vid=1
參考文檔：
https://cn.vuejs.org/v2/guide/
https://cli.vuejs.org/zh/guide/
WebStorm 是一個(gè)適用于 JavaScript 和相關(guān)技術(shù)的集成開發(fā)環(huán)境。類似于其他 JetBrains IDE，它也會(huì)使您的開發(fā)體驗(yàn)更有趣，自動(dòng)執(zhí)行常規(guī)工作并幫助您輕松處理復(fù)雜任務(wù)。
軟件功能：
對(duì)工作結(jié)果滿懷信心
IDE 會(huì)在您輸入時(shí)運(yùn)行數(shù)十個(gè)代碼檢查并檢測(cè)潛在的問題，助您編寫更可靠和更易于維護(hù)的代碼。只需點(diǎn)擊幾次即可重構(gòu)您的整個(gè)代碼庫，且在實(shí)現(xiàn)較大的結(jié)構(gòu)變更時(shí)不會(huì)遺漏任何內(nèi)容。
享受高效的編碼
得益于 JavaScript 開發(fā)所需的全部功能開箱即用，您可以直接開始編碼。WebStorm 會(huì)為您處理一切常規(guī)工作，讓您更高效并專注于更具創(chuàng)造性的任務(wù)。
減輕處理復(fù)雜任務(wù)的壓力
擔(dān)心使用 Git 時(shí)出現(xiàn)混亂并丟失重要變更或者跨整個(gè)項(xiàng)目重命名組件時(shí)會(huì)中斷一些內(nèi)容WebStorm 將簡(jiǎn)化這些和其他具有挑戰(zhàn)性的任務(wù)，以便您專注于大局。
軟件地址【 chengdongds.top 】
1、在本站下載最新安裝包，按提示安裝
2、安裝進(jìn)行中，完成即可使用
常用快捷鍵
1、Tab：自動(dòng)補(bǔ)全
2、復(fù)制當(dāng)前行：Ctrl+D
3、刪除當(dāng)前行：Ctrl+Y
4、注釋或者取消當(dāng)前注釋：Ctrl+/
5、注釋或者取消多行注釋：Ctrl+Shift+/
6、同時(shí)編輯：Alt
按住Alt鍵，選中多個(gè)，可以同時(shí)進(jìn)行編輯
WebStorm功能介紹
1、新的歡迎屏幕
我們已經(jīng)更新了歡迎屏幕!您不僅可以從中打開和創(chuàng)建項(xiàng)目，還可以調(diào)整最常用的設(shè)置，例如IDE主題和字體。
2、標(biāo)簽的改進(jìn)工作
我們使用標(biāo)簽更加方便。現(xiàn)在，您可以通過拖放選項(xiàng)卡或使用新的“ 在右側(cè)拆分中打開”操作來拆分編輯器 。此外，現(xiàn)在，固定的選項(xiàng)卡都帶有特殊圖標(biāo)標(biāo)記，并顯示在選項(xiàng)卡欄的開頭，因此您可以更快地找到它們。
3、使用WebStorm打開的文件
現(xiàn)在，使WebStorm默認(rèn)打開特定文件類型非常簡(jiǎn)單。轉(zhuǎn)到 首選項(xiàng)/設(shè)置| 編輯| 文件類型，然后單擊將 文件類型與WebStorm關(guān)聯(lián)。
4、支持Tailwind CSS
WebStorm現(xiàn)在可以幫助您更高效地使用Tailwind CSS!它將自動(dòng)完成Tailwind類，在鼠標(biāo)懸停時(shí)向您顯示生成的CSS預(yù)覽，并支持您使用tailwind.config.js文件進(jìn)行的自定義。
5、根據(jù)用途創(chuàng)建React組件
您的代碼中有未解析的React組件嗎?將插入符號(hào)置于其上，按 Alt+Enter，然后從列表中選擇Create class / function component -WebStorm將為您創(chuàng)建相關(guān)的代碼構(gòu)造。
6、Markdown編輯和預(yù)覽改進(jìn)
Mermaid.js支持，重新格式化.md文件的功能以及預(yù)覽窗格和編輯器的自動(dòng)滾動(dòng)–這些和其他更改將顯著改善WebStorm中Markdown文件的使用體驗(yàn)。
7、全面支持pnpm
WebStorm現(xiàn)在完全支持pnpm軟件包管理器以及npm和yarn。在過去的一年中，我們一直在逐步實(shí)施對(duì)pnpm支持的改進(jìn)。我們已經(jīng)完成了畫龍點(diǎn)睛的工作。
8、集成的TypeScript和問題工具窗口
我們已經(jīng)將TypeScript語言服務(wù)集成到“問題”工具窗口中，并刪除了TypeScript工具窗口。我們進(jìn)行了此更改，以便更輕松地 從一個(gè)位置查看代碼中的問題。我們還將之前在TypeScript工具窗口中可用的動(dòng)作移至狀態(tài)欄上的專用小部件。
9、使用CSS和HTML更好地格式化模板文字
WebStorm將正確支持包含JavaScript的多行CSS和HTML塊的代碼格式。當(dāng)您添加這些更復(fù)雜的模板文字或重新格式化代碼時(shí)，IDE將正確縮進(jìn)。
10、改進(jìn)的調(diào)試體驗(yàn)
調(diào)試時(shí)使用交互式提示和嵌入式監(jiān)視!現(xiàn)在，您可以單擊提示以查看屬于變量的所有字段。此外，您可以直接從提示中更改變量值并添加監(jiān)視表達(dá)式。
11、支持我們的協(xié)作開發(fā)工具
WebStorm支持 Code With Me(EAP)，這是我們用于協(xié)作開發(fā)和結(jié)對(duì)編程的新工具。此工具使您可以與其他人共享項(xiàng)目，以便可以實(shí)時(shí)一起處理它們。要嘗試Code With Me，請(qǐng)從“首選項(xiàng)/設(shè)置” | “設(shè)置”中安裝相應(yīng)的插件。插件。
12、內(nèi)置的WebStorm基礎(chǔ)培訓(xùn)課程
為了幫助您熟悉WebStorm的關(guān)鍵功能，我們開發(fā)了一個(gè)交互式培訓(xùn)課程。本課程可以幫助您學(xué)習(xí)完成一些常見任務(wù)，例如重構(gòu)代碼或?yàn)g覽項(xiàng)目。您可以在“歡迎”屏幕上的“學(xué)習(xí)WebStorm”選項(xiàng)卡下找到它，也可以轉(zhuǎn)到“幫助” |“發(fā)現(xiàn)”。 從主菜單中選擇IDE Features Trainer。
13、HTTP客戶端中的cURL轉(zhuǎn)換
現(xiàn)在，您可以通過按下HTTP請(qǐng)求編輯器并選擇“轉(zhuǎn)換為cURL并復(fù)制到剪貼板”選項(xiàng)，將HTTP請(qǐng)求導(dǎo)出到cURL。 Alt+Enter
14、更好的拼寫和語法檢查
現(xiàn)在，您可以更快地解決語法和拼寫問題-將鼠標(biāo)懸停在問題上，將彈出一個(gè)帶有說明和建議修復(fù)程序的彈出窗口。我們還增加了對(duì)更多語言的支持，并提高了語法檢查的質(zhì)量。
15、更有用的導(dǎo)航欄
使用導(dǎo)航欄(可快速替代項(xiàng)目視圖)，您可以輕松瀏覽項(xiàng)目的結(jié)構(gòu)并打開特定文件。我們還可以跳轉(zhuǎn)到JavaScript和TypeScript文件中的特定代碼元素。
16、快速文件預(yù)覽
最后，您可以通過在“ 項(xiàng)目”視圖中選擇文件來在編輯器中預(yù)覽文件!要啟用此功能，請(qǐng)?jiān)凇绊?xiàng)目” 視圖中單擊齒輪圖標(biāo)，然后選擇“啟用預(yù)覽選項(xiàng)卡”和“單擊打開文件”。
17、隨處搜索功能更強(qiáng)大
在Shift+Shift彈出現(xiàn)在可以讓你做更多。首先，您可以使用它進(jìn)行基本數(shù)學(xué)運(yùn)算-結(jié)果將立即顯示在彈出窗口中。它還將允許您查找Git數(shù)據(jù)，包括有關(guān)分支和提交的詳細(xì)信息。除此之外，所有發(fā)現(xiàn)現(xiàn)在都基于與搜索查詢的相關(guān)性而不是其類型進(jìn)行分組。