[Day 1] Vue Quasar Framework介紹與安裝

環境設定

Quasar是個Vue的框架，所以，使用前必須安裝node.js，node.js就會有npm，如果不喜歡使用npm，也可以使用yarn。除此之外，可以安裝vs code來做為開發環境。都準備好了之後，我們就先開一個新的檔案夾，打開vscode之後，開啟剛剛新增的檔案夾。

使用vscode，如果還沒開啟terminal，可以先從功能列新增一個terminal:

在terminal裡，利用npm安裝Quasar，「-g」就是讓其他專案也可以使用quasar，

npm i -g @quasar/cli

接下來，產生一個quasar專案

npm init quasar

接下來會回答一連串的問題，先安裝create-quasar

選擇「App with Quasar CLI」

檔案夾可以選擇預設值，或者「.」，也就是目前的檔案夾

接下來選擇Quasar版本，選擇最新的版本

選擇是Javascript或Typescript，我們選擇Typescript

現在越來越多人選用Vite，我們就使用Vite

回答以下的設定問題:

接下來請選擇「Composition API with <script setup>」

CSS的預處理器可選擇「SCSS」

接下來，選擇預設的package，如果都不選也可以，以後可以安裝，先安裝「ESLint」就好

ESLint有不少的設定選項，可選用「Prettier」

安裝相關的套件

這樣就安裝好了

如果VS Code詢問是否安裝Vue的extension，請安裝

要執行剛剛產生的專案，執行「quasar dev」

quasar dev

看到這訊息，而且會自動開啟瀏覽器

基本檔案介紹

在vs code裡，可以看到已經產生很多的檔案夾及檔案，我們要寫的程式碼，都在src裡。

整個專案的起點是App.vue

<template>
  <router-view />
</template>

<script setup lang="ts">

</script>

如果對於Vue的語法不熟悉，可以先參考: 為什麼要用JS框架/程式庫

大家會發現，在template裡面只有<router-view />，因為已經預設使用Vue Router了。

我們試試看改一下App.vue:

<template>
  <!-- <router-view /> -->
  <h1>Hello!</h1>
</template>

<script setup lang="ts"></script>

畫面就會是: