quasar 項目創建
控制檯輸入
quasar create your_project_name
(第一次輸入該命令會下載 quasar 模板,耐心等待下載完成,如果長時間沒有下載完成,可以按Ctrl + C
來取消任務後重新輸入創建項目的指令)
- Project name (your_project_name)
輸入項目名稱,輸入回車默認括號內的名稱,括號內的名稱是上面
quasar create
命令後面傳入的項目名稱。這裏一般回車默認就好了。
- Project product name (must start with letter if building mobile apps) (Quasar App)
項目產品名稱,沒懂啥意思,默認回車。
- Project description (A Quasar Framework app)
項目描述,輸入這個項目的相關描述。
- Author
輸入作者名稱,可以直接回車。
- Pick your favorite CSS preprocessor: (can be changed later)
這裏有三個選項:
Sass with indented syntax (recommended)
Sass with SCSS syntax (recommended)
Stylus
None (the others will still be available)
我選的第二個,這四個選項具體含義我不太清楚,不是專業前端。既然它推薦前兩個,那就幸福二選一吧。
- Pick a Quasar components & directives import strategy: (can be changed later) (Use arrow keys)
選擇 quasar 組件的導入策略, quasar 的控件都是單獨的,每使用一個控件都要在配置中添加控件才能使用。這裏有三個選項。
Auto-import in-use Quasar components & directives
Manually specify what to import
Import everything from Quasar
這裏建議選第二個,手動管理,編譯最快,每個控件都有文檔說明引入哪個模塊,沒什麼難度。第一個選項表示自動管理,編譯時間比較久,開發調試階段不建議使用,浪費自己寶貴的時間。第三個選項表示全部引入,這樣應該會造成包體較大。
- Check the features needed for your project:
選擇插件,上下箭頭移動光標,空格選中/取消選中,回車確認。這裏有四個選項。
ESLint
Vuex
Axios
Vue-i18n
IE11 support
這裏建議第二個和第三個必選。第一個不要選,開啓ESLint後編譯器對 JS 代碼較苛刻,經常報錯,報錯不是你寫的不對,只是沒有嚴格按照標準來寫,對縮進什麼的都有要求,所以不建議勾選。第四個如果有多語言需求可以勾選。第五個如果有IE11支持的需求可以選,不過和 electron 配合的話,不需要勾選, electron 並不使用 IE 內核。
- Cordova/Capacitor id (disregard if not building mobile apps) (org.cordova.quasar.app)
Cordova 可以將 quasar 程序編譯成移動端 APP,所以需要安卓的那種三段式的包名, 一般 com.公司/個人稱呼.項目名稱 全小寫!!!
- Should we run
npm install
for you after the project has been created? (recommended) (Use arrow keys)
是否需要幫你安裝依賴項。這裏有三個選項。
Yes, use Yarn (recommended)
Yes, use NPM
No, I will handle that myself
果斷第一個,畢竟推薦的,選第二個也行(如果你能上外網的話),選第三個也可以,你可能需要手動進入項目目錄,然後打開控制檯輸入cnpm install
或者yarn
來安裝依賴項。
運行項目
進入項目目錄,輸入
quasar dev -m electron
等待程序啓動。 如果不添加-m electron
參數則默認是web項目,這時候控制檯會提示你輸入超鏈接查看界面。
編譯項目
進入項目目錄, 控制檯輸入
quasar build -m electron
等待編譯完成就可以在 build 目錄下看到編譯出來的 exe 了。
注意事項
無論是運行項目,還是打包項目,如果出現 gyp 編譯出錯,則需要配置一下。(我的 VS2019 必出現這個問題)
- 安裝 Chocolatey
打開 Powershell (Powershell 不是 cmd, 如果電腦有 Powershell 可以打開 cmd 然後輸入 Powershell 來打開Powershell) 輸入
Set-ExecutionPolicy Bypass -Scope Process -Force; iex ((New-Object System.Net.WebClient).DownloadString(‘https://chocolatey.org/install.ps1’))
來安裝 Chocolatey 等待安裝完成後就可以安裝 python2 和 visualstudio-workload-vctools 了。
- 安裝 python2 和 visualstudio-workload-vctools
Powershell 輸入
choco upgrade python2 visualstudio2019-workload-vctools
來安裝 python 和 vctools,我這裏是 VS2019 所以是visualstudio2019-workload-vctools
如果是 VS2017或者VS2015等其它版本,則把數字改成對應的版本來安裝,安裝完成後應該就可以正常運行項目了。