一、 electron-vue + quasar 環境搭建

electron 和 quasar 簡介

1. electron 是一個使用 JavaScript, HTML 和 CSS 等 Web 技術創建原生程序的框架,簡單來說就是使用HTML那套做GUI程序。
2. quasar 簡單來說是一套基於VUE的控件庫，採用Material風格。

開發工具

• vscode
• webstorm
• atom
• …

使用什麼工具看個人喜好,這裏使用的VSCode

我用的開發環境

1. Windows 10
2. VSCode
3. VS2019 (VS2015 及以上版本應該都可以)
4. node.js 12.13.0

環境配置

1. 安裝 node.js

最好安裝 LTS (長期支持版),太新或太老可能導致庫不兼容出現各種莫名其妙的問題。
安裝完成後打開控制檯輸入node -v 如果正確出現版本號表示安裝成功,如果出現 $\color{red}{'node'不是內部或外部命令,也不是可運行的程序。}$ 表示 node.js 環境可能沒有配置好,可以手動配置一下環境變量。

2. 安裝 cnpm

國內一般都要裝,可以上外網的可以選擇不裝。不裝就使用 npm, 以後提到的 cnpm 都對應 npm。
安裝 cnpm 只需要打開控制檯 輸入 npm install -g cnpm --registry=https://registry.npm.taobao.org 然後等待安裝完成即可。

3. 安裝 yarn

類似 npm 的包管理器, electron 和 quasar 推薦用這個,裝就完事了。
控制檯輸入 cnpm install --global yarn 等待安裝完成。
控制檯輸入 yarn -v 如果正常出現版本號則表示安裝成功, 否則手動配置環境變量。(我是手動配置纔有效)

4. 安裝 Quasar CLI

控制檯輸入 yarn global add @quasar/cli 等待安裝完成.

5. 安裝 visual studio

如果只考慮用 JS 開發, 不考慮和 C++ 交互或者打包成 exe 可以不安裝。

6. 安裝 node-gyp

控制檯輸入 yarn global add node-gyp 等待安裝完成後開發環境就配置完了。

 
 
 
 

下一章: quasar 的項目創建及啓動