vscode+vue開發環境安裝配置含vetur、eslint 插件-連載【2】-企業級系統開發實戰連載系列 -技術棧:vue、element-ui、qt、c++、sqlite
- 作者背景描述：
-
- 為什麼寫此系列文章？
- 解決方案：
- 預覽Demo
- 下載下傳
- 同意條款
- 安裝路徑
- 開始菜單檔案夾
- 快捷方式和path變量
- 準備就緒
- 完成
- 歡迎界面
- 打開項目
- 項目結構
- 代碼編輯器
- 安裝vetur插件
- 安裝eslint 代碼檢測插件
- 總結
作者背景描述：
本人就職于外資IT企業，擔任電商訂單處理産品開發經理一職，上司過非常多次大小項目的開發工作，對電商平台訂單處理流程非常熟悉。
公司專注鞋服行業相關軟體開發和服務，公司規模100多人以上，在台北，廣州，成都，上海，北京，國外等均有分公司。
為什麼寫此系列文章？
本人在學校至工作到現在十餘年時間，使用.net C# 開發語言，結合在公司實際開發，和市場的需求中，NET.開發的商業企業級系統遇到的缺點有如下：
- 程式首次加載慢，因為虛拟機編譯的原因。
- WINFORM界面開發不夠炫麗，精美。
- WINFORM界面設計人員難找。
- 程式可以被反編譯。
- 安裝包過大，部署麻煩，framework.
- 跨平台不夠好。
解決方案：
結合近年來前端設計的走向，最終選擇了qt+vue+element UI+sqlite(資料庫根據需要情況選擇)
qt負責接口和硬體處理
sqlite做資料存儲
vue+element UI 實作前端。
預覽Demo
下載下傳
下載下傳vscode
https://code.visualstudio.com/Download
windows的， 選擇如下：
同意條款
安裝路徑
開始菜單檔案夾
快捷方式和path變量
準備就緒
完成
歡迎界面
打開項目
點選 OpenFolder 打開上一章節建立的項目 vue01
項目結構
| 目錄/檔案 | 說明 |
|---|---|
| build | 項目建構(webpack)相關代碼 |
| config | 配置目錄，包括端口号等。我們初學可以使用預設的。 |
| node_modules | npm 加載的項目依賴子產品 |
| src | 這裡是我們要開發的目錄，基本上要做的事情都在這個目錄裡。裡面包含了幾個目錄及檔案： • assets: 放置一些圖檔，如logo等。 • components: 目錄裡面放了一個元件檔案，可以不用。 • App.vue: 項目入口檔案，我們也可以直接将元件寫這裡，而不使用 components 目錄。 • main.js: 項目的核心檔案。 |
| static | 靜态資源目錄，如圖檔、字型等。 |
| test | 初始測試目錄，可删除 |
| .xxxx檔案 | 這些是一些配置檔案，包括文法配置，git配置等。 |
| index.html | 首頁入口檔案，你可以添加一些 meta 資訊或統計代碼啥的。 |
| package.json | 項目配置檔案。 |
| README.md | 項目的說明文檔，markdown 格式 |
代碼編輯器
展開src ，打開App.vue檔案，代碼樣式和記事本無異，如下：
安裝vetur插件
代碼沒有高亮顯示，修改代碼也沒有 智能提示，我們先安裝vetur插件 。選擇左下角的擴充（Extensions），如下圖：
我們可以看到推薦插件為Vetur,點選install
安裝完後，再切換回源代碼，就會出現代碼高亮和智能提示，嘗試修改代碼也有智能提示，如下圖：
安裝eslint 代碼檢測插件
在Search 輸入eslint ，如下圖：
打開一個js檔案，胡亂修改一下檢視錯誤檢測，如下圖：
總結
本節主要講解了vscode環境安裝，代碼編輯器插件Vetur，錯誤檢測插件eslint 的安裝。下一節我們講解vs2019 c++開發環境安裝配置。