1. 程式人生 > >使用VSCode配置簡單的vue項目

使用VSCode配置簡單的vue項目

安裝插件 span configure 快捷鍵 wid lang -i 命令 chinese

由於最近要使用的項目框架為前後端分離的,采用的是vue.js+webAPI的形式進行開發的。因為之前我沒有接觸過vue.js,也只是通過視頻文檔做了一些簡單的練習。今天技術主管說讓大家熟悉下VSCode開發vue,所以自己摸索了好久,才算是把簡單的項目配置成功了。後續還得自己多了解這方面的知識。想著怕時間長了自己會忘記,所以寫下來也供有需要的人一起學習。

一.配置環境

1.1 下載VSCode,官網直接下載就行。

1.2 漢化VSCode

Ctrl+Shift+P 輸入 "configure display language" 然後點擊確定後,修改locale.json文件下的屬性"locale"為"zh-CN". 重啟VSCode工具

技術分享圖片
con 技術分享圖片

若重啟後VSCode仍為英文版,在商店中搜索 Chinese 安裝中文插件,再重新啟動VSCode即可.

1.3 安裝vue插件vetur,實現支持vue文件的代碼高亮

安裝插件:ctrl+Shift+X 在商店中查找 vetur 或者 Ctrl + P 然後輸入 ext install vetur 然後回車點安裝即可

技術分享圖片


然後在文件->首選項->設置 找到用戶設置,點開 userSettings 添加如下的設置

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

}

1.4安裝ESLint 插件

安裝插件:ctrl+Shift+X 在商店中查找 eslint或者 Ctrl + P 然後輸入 ext install eslint然後回車點安裝即可

同樣的需要在配置文件中添加如下設置信息:

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

    },

最終的配置信息如下所示:

技術分享圖片

二.創建一個vue項目

2.1使用快捷鍵 Ctrl+~打開終端,輸入命令行 vue init webpack yourProjectName ,其中yourProjectName為你的項目名稱,這裏我創建的是helloworld.

接下來根據提示進行操作

技術分享圖片

安裝完畢後 運行 npm run dev 會出現訪問地址:http://localhost:8080

技術分享圖片

在安裝過程中可能會出現 ‘webpack-dev-server’不是內部或外部指令的錯誤 這是因為在上一步的操作中,我們選擇了NO,自己手動註入依賴文件,在後續的npm install 命令後,項目文件內會生成node_modules文件夾,網上有說是重新刪除文件夾,然後在項目根目錄重新運行終端,輸入npm install ,npm run bulid 最後輸入 npm run dev 就可成功運行了。但是我試了很多次還是不行。最後又重新新建了項目在是否註冊依賴時,選擇了 Yes 然後就成功運行了。

技術分享圖片
技術分享圖片

最後的效果圖是這樣的。

技術分享圖片

至此,一個簡單的vue項目就搭建好了。

說實話,自己是第一次接觸vue.js 之前一直在接觸後端C#,也希望通過項目自己能夠掌握的更牢固,以便後續的學習和成長。加油。

使用VSCode配置簡單的vue項目