詳解VSCode配置啟動(dòng)Vue項(xiàng)目

更新時(shí)間：2019年05月14日 17:02:32 作者：ywltoread

這篇文章主要介紹了VSCode配置啟動(dòng)Vue項(xiàng)目，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧

下載安裝并配置VSCode

隨便百度上搜個(gè)最新的VSCode安裝好后，點(diǎn)擊Ctrl + Shit + X打開(kāi)插件擴(kuò)展窗口進(jìn)行插件擴(kuò)展，這里要安裝兩個(gè)插件。

1、vetur插件的安裝

該插件是vue文件基本語(yǔ)法的高亮插件，在插件窗口中輸入vetur點(diǎn)擊安裝插件就行，裝好后點(diǎn)擊文件->首選項(xiàng)->設(shè)置打開(kāi)設(shè)置界面，在設(shè)置界面右側(cè)添加配置

"emmet.syntaxProfiles": {
 "vue-html": "html",
 "vue": "html"
}

2、eslint插件的安裝

eslint智能錯(cuò)誤檢測(cè)插件，在具體開(kāi)發(fā)中作用很大，能夠及時(shí)的幫我們發(fā)現(xiàn)錯(cuò)誤。至于安裝，同樣打開(kāi)插件擴(kuò)展窗口輸入eslint點(diǎn)擊安裝插件，裝好后也需要進(jìn)行配置，在同vetur插件一樣的地方進(jìn)行配置

"eslint.validate": [
    "javascript",
    "javascriptreact",
    "html",
    "vue"
  ],
 
 "eslint.options": {
    "plugins": ["html"]
}

etur和eslint插件在配置中如下圖所示

導(dǎo)入項(xiàng)目并編譯

1、導(dǎo)入項(xiàng)目

從github上下載vuestic-admin項(xiàng)目（https://github.com/epicmaxco/vuestic-admin.git）,拉到本地后打開(kāi)VSCode直接文件->打開(kāi)文件夾導(dǎo)入項(xiàng)目，Ctrl+shift+Y呼出控制臺(tái)，在控制臺(tái)終端輸入npm install添加包依賴

如果沒(méi)有安裝npm請(qǐng)先安裝npm。

2、運(yùn)行項(xiàng)目

同樣在終于執(zhí)行npm run dev代表開(kāi)始運(yùn)行項(xiàng)目，這條命令會(huì)自動(dòng)在瀏覽器上運(yùn)行項(xiàng)目，運(yùn)行結(jié)果如下圖所示，代表配置成功了。

以上所述是小編給大家介紹的VSCode配置啟動(dòng)Vue項(xiàng)目詳解整合，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

您可能感興趣的文章:

VSCode
Vue

相關(guān)文章

vue數(shù)據(jù)字典取鍵值方式
這篇文章主要介紹了vue數(shù)據(jù)字典取鍵值方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-04-04
Vue3?封裝一個(gè)支持輸入和單/多選InputSelect組件-Antd詳解
Antd的Select組件默認(rèn)不支持作為輸入框使用或手動(dòng)添加選項(xiàng),為了實(shí)現(xiàn)這一功能,我們封裝了一個(gè)通用組件,支持單選和多選模式,并允許用戶在組件失焦時(shí)手動(dòng)輸入選項(xiàng),主要通過(guò)定義searchText存儲(chǔ)輸入數(shù)據(jù),感興趣的朋友跟隨小編一起看看吧
2024-09-09
vue引入新版 vue-awesome-swiper插件填坑問(wèn)題
這篇文章主要介紹了vue引入新版 vue-awesome-swiper插件填坑問(wèn)題，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2018-01-01
vue中Axios添加攔截器刷新token的實(shí)現(xiàn)方法
Axios是一款網(wǎng)絡(luò)前端請(qǐng)求框架，本文主要介紹了vue中Axios添加攔截器刷新token的實(shí)現(xiàn)方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2022-02-02
前端Vue3引入高德地圖并展示行駛軌跡動(dòng)畫的步驟
最近在Vue項(xiàng)目中引入高德地圖,實(shí)現(xiàn)地圖展示與交互的方法和技術(shù),這里跟大家分享下,這篇文章主要給大家介紹了關(guān)于前端Vue3引入高德地圖并展示行駛軌跡動(dòng)畫的相關(guān)資料,需要的朋友可以參考下
2024-09-09
淺談vue中.vue文件解析流程
這篇文章主要介紹了淺談vue中.vue文件解析流程,小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2018-04-04
vue實(shí)現(xiàn)帶小數(shù)點(diǎn)的星星評(píng)分
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)帶小數(shù)點(diǎn)的星星評(píng)分，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2021-09-09
Vue自定義組件使用事件修飾符的踩坑記錄
vue提倡的是在方法中只有對(duì)數(shù)據(jù)的處理，所以提供了事件修飾符用于DOM的事件處理，下面這篇文章主要給大家介紹了關(guān)于Vue自定義組件使用事件修飾符的相關(guān)資料,需要的朋友可以參考下
2021-05-05
vue+element UI中如何給指定日期添加標(biāo)記
這篇文章主要介紹了vue+element UI中如何給指定日期添加標(biāo)記問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2024-02-02
vue使用js-audio-recorder實(shí)現(xiàn)錄音功能
這篇文章主要為大家詳細(xì)介紹了vue如何使用js-audio-recorder實(shí)現(xiàn)錄音功能,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下
2023-12-12