vscode下載安裝
官網(wǎng)下載地址：
https://code.visualstudio.com/
設(shè)置中文環(huán)境：
快捷鍵Ctrl+Shift+P選擇Configure Display Language
找到中文安裝包
在線安裝
安裝后需要重新啟動(dòng)環(huán)境，再次選擇中文簡(jiǎn)體切換語(yǔ)言環(huán)境
安裝插件
點(diǎn)擊左側(cè)擴(kuò)展選項(xiàng)码党，輸入你想找的插件進(jìn)行安裝即可
核心插件
1烂翰、Vetur
vscode上開(kāi)發(fā)vue的核心插件，提供了代碼高亮景埃，格式化,emmet框喳，lint等核心功能。
2、beautify
一個(gè)代碼美化插件初斑，提供了代碼美化功能,當(dāng)然我們并不直接用它，它為vetur提供了格式化html的功能(vetur官方文檔上說(shuō)膨处，這個(gè)將很快被移除见秤，因?yàn)檫@個(gè)插件有很多bug一直得不到解決)
3、Prettier
一個(gè)代碼格式化插件真椿，提供格式化代碼的功能秦叛，它可以使用eslint的配置，一鍵修改各種eslint問(wèn)題,而且不增加快捷鍵瀑粥，它通過(guò)增強(qiáng)原有的代碼格式化功能來(lái)實(shí)現(xiàn)(vetur官方文檔上說(shuō)可以不用安裝prettier挣跋，但是安裝好了，可以更好的配置,因?yàn)榕渲庙?xiàng)有智能提示)
4狞换、ESLint
js是一個(gè)很自由的語(yǔ)言避咆，你怎么寫(xiě)都不報(bào)錯(cuò)舟肉，怎么寫(xiě)都是對(duì)的，但是如果你真的隨便寫(xiě)查库，就會(huì)到處報(bào)錯(cuò)路媚，根本找不到哪里錯(cuò)了，所以樊销，我們加上eslint來(lái)約束代碼整慎，eslint的規(guī)則很多，配置簡(jiǎn)單,也有很多現(xiàn)成的模板围苫。
ps：配置說(shuō)明：http://eslint.cn/docs/user-guide/configuring
ESLint 不是安裝后就可以用的裤园，還需要一些環(huán)境和配置：
首先，需要全局的 ESLint , 如果沒(méi)有安裝可以使用cmd 輸入npm install -g eslint來(lái)安裝剂府；
其次拧揽，vue文件是類(lèi) HTML 的文件，為了支持對(duì) vue 文件的 ESLint 腺占，
需要eslint-plugin-html這個(gè)插件淤袜。可以使用cmd輸入： npm install -g eslint-plugin-html 來(lái)安裝衰伯；
當(dāng)上述兩個(gè)都裝好后铡羡，還需要在 vscode 中配置下 ESLint：
5、Project Manager
項(xiàng)目管理意鲸，方便保存各種項(xiàng)目目錄烦周，一點(diǎn)就切換，非常方便临扮。
推薦插件
1论矾、顏色主題 Atom Material Theme
菜單欄和編輯器可以區(qū)分顏色
2教翩、文件圖標(biāo)主題 Material Icon Theme
左側(cè)文件樹(shù)的圖標(biāo)杆勇，根據(jù)文件類(lèi)型顯示不同的圖標(biāo)。
3饱亿、Makedown增強(qiáng) Markdown Preview Enhanced
makedown增強(qiáng)插件蚜退，比vscode自帶的強(qiáng)大很多，可以實(shí)時(shí)預(yù)覽markdown彪笼，還可以導(dǎo)出各種常用格式钻注，html，pdf都不是問(wèn)題配猫，還可以導(dǎo)出word文檔（word要麻煩些）幅恋。
4、括號(hào)增強(qiáng) Bracket Pair Colorizer
js代碼中泵肄，括號(hào)一直是一個(gè)問(wèn)題捆交，難以避免括號(hào)問(wèn)題淑翼，這個(gè)擴(kuò)展為不同層級(jí)的括號(hào)添加了顏色，一眼就能看到品追，比vscode自帶的那個(gè)括號(hào)提示好很多玄括。
5、 Change Case
非常實(shí)用的小功能肉瓦，可以將變量名切換成各種常用造型遭京，駝峰的，大駝峰的泞莉，隨便切哪雕，再也不用選個(gè)字母改大小寫(xiě)了。
6戒财、Output Colorizer
給輸出加點(diǎn)色彩热监。
7、配置同步 Settings Sync
通過(guò)github來(lái)同步你的vscode配置饮寞，需要去github上去生成一個(gè)key孝扛，當(dāng)然插件介紹里有說(shuō)明，也有指引幽崩，自己可以研究苦始。
8、Sublime Commands
sublimetext里面有個(gè)交換選擇的快捷鍵慌申，就是選中兩個(gè)詞陌选，然后按一個(gè)快捷鍵，兩個(gè)詞就交換位置了蹄溉，這個(gè)操作我們經(jīng)常做咨油，而且挺麻煩，復(fù)制剪切的柒爵，現(xiàn)在好了役电，用了這個(gè)小插件，這個(gè)功能也補(bǔ)上了棉胀。
7法瑟、vscode-fileheader
為你的文件加上文件頭，可以通過(guò)配置來(lái)控制文件頭的內(nèi)容唁奢。
主題顏色設(shè)置
對(duì)于這個(gè)軟件麻煩的就是要按照各自插件的規(guī)格去配置霎挟，這里我們先配置兩個(gè)核心插件：
在文件—>首選項(xiàng)—>設(shè)置 中
安裝node.js
下載地址：https://nodejs.org/en/download/
如果正確輸出版本號(hào)，說(shuō)明我們的NodeJS和NPM就安裝好了麻掸。
如果node的全局路徑?jīng)]有自動(dòng)添加進(jìn)入酥夭，可以手動(dòng)添加下。
安裝淘寶鏡像
用cnpm替代cnpm，因?yàn)閚pm安裝插件是從國(guó)外服務(wù)器下載熬北，受網(wǎng)絡(luò)影響大千所，可能出現(xiàn)異常。
npm install -g cnpm --registry=https://registry.npm.taobao.org
安裝webpack
cnpm install webpack -g
安裝vue腳手架
cnpm install vue-cli -g
開(kāi)始創(chuàng)建VUE項(xiàng)目
需要注意的是項(xiàng)目的名稱不能大寫(xiě)蒜埋，不然會(huì)報(bào)錯(cuò)
在安裝時(shí)會(huì)詢問(wèn)你:
①淫痰、Project name (sanfeng1)；項(xiàng)目名稱（sanfeng1）整份。（確定按enter待错，否按N）
②、Project description (A Vue.js project)烈评；項(xiàng)目描述（一vue.js項(xiàng)目）火俄。（隨意輸入一段簡(jiǎn)短介紹，用英文）
③讲冠、Author (sunsanfeng)瓜客；作者（sunsanfeng）。（確定按enter竿开，否按N）
④谱仪、Vue build (Use arrow keys)> Runtime + Compiler: recommended for most usersRuntime-only: about 6KB lighter min+gzip, but templates (or any Vue-specificHTML) are ONLY allowed in .vue files - render functions are required elsewhere；Vue公司的建立（使用箭頭鍵）>運(yùn)行時(shí)+編譯器：大多數(shù)用戶推薦運(yùn)行時(shí)間：約6kb輕民+ gzip否彩，但模板（或任何Vue具體HTML）只允許在疯攒。VUE文件渲染功能是必需的其他地方。（按enter）
⑤列荔、Install vue-router? (Y/n)敬尺；安裝的路由？（/ N）贴浙。（可安可不安砂吞，以后也可以再安，根據(jù)需求選擇）
⑥崎溃、Use ESLint to lint your code? (Y/n)蜻直；使用ESlint語(yǔ)法？（Y/ N）笨奠。（使用ESLint語(yǔ)法袭蝗，就要做好心理準(zhǔn)備唤殴，除非你非常懂ESLint語(yǔ)法般婆，要不就會(huì)處處報(bào)錯(cuò)，我就被逼瘋過(guò)朵逝，建議N）
⑦蔚袍、Setup unit tests with Karma + Mocha? (Y/n)；設(shè)置單元測(cè)試？（Y / N）啤咽。（選N）
⑧晋辆、Setup e2e tests with Nightwatch? (Y/n)；Nightwatch建立端到端的測(cè)試宇整？（Y / N）瓶佳。（選N）
cd vuedemo (進(jìn)入項(xiàng)目目錄)
cnpm install （安裝項(xiàng)目依賴）
cnpm run dev （執(zhí)行項(xiàng)目）
當(dāng)vue跑起來(lái)后可通過(guò)頁(yè)面http://localhost:8080來(lái)打開(kāi)頁(yè)面
