Quasar CLI App with Vite

安裝 NVM 、 NPM

NVM

NVM 是 Node 版本安裝/切換工具， NVM 有提供各種系統的安裝方法，本文以 Window 作為開發系統 ，可至 NVM for Windows 進行下載安裝。

• 至 NVM for Windows 網頁後選擇 Download Now!
• 在要下載的版本中選擇 nvm-setup.exe 。
• 下載完成後點選 nvm-setup.exe 即可開始安裝。
  • 若存在已安裝的 Node 會確認是否讓 NVM 進行版本控制，這邊選擇是。
  • 出現此畫面代表安裝完成。
  • 可在Terminal中下 nvm -v 指令確認已安裝的 NVM 版本。

NPM

NPM 是 Node Package manager 的簡稱，是管理 Node 套件的工具。

• nvm list 確認已安裝的 Node版本。
• nvm install <version> <version> 替換為要安裝的版本號。
• 輸入 nvm use 16.20.2 指令即可將 Node 版本切換為 16.20.2 並輸入 node -v 即可確認當前的 Node 版本號。

---

建置專案

使用 npm 進行 quasar 建置。

• 移至要建立專案的PATH後初始化 quasar。

  npm init quasar
  

• 出現下面指示按Enter。

  Need to install the following packages:
  create-quasar@1.8.2
  Ok to proceed? (y)
  

  

建置設定細節

出現建置設定讓使用者進行選擇。

• 相關設定示意圖。

• What would you like to build?:
  • App with Quasar CLI, let’s go!
• Project folder:
  • quasar-test
• Pick Quasar version:
  • Quasar v2 (Vue 3 I latest and greatest)
• Pick script type:
  • Javascript
• Pick Quasar App CLI variant:
  • Quasar App CLI with Vite 2 (stable | v1)
• Package name:
  • quasar-test
• Project product name:(must start with letter if building mobile apps)
  • Quasar Test App
• Project description:
  • Quasar Test System
• Author:
  • OliverLiu yancheng199906@gmail.com
• Pick a Vue component style:
  • Composition API with <script setup>
• Pick your CSS preprocessor:
  • Sass with SCSS syntax
• Check the features needed for your project: vue-i18n 為導入多國語言
  • Linting (vite-plugin-checker + ESLint), State Management (Pinia), axios
• Pick an ESLint preset:
  • Prettier
• Install project dependencies?
  • (recommended) , Yes, use npm
• 出現以下畫面表示建置完成，若有版本更新也會顯示於 npm notice ，再依據顯示進行操作即可！

新增tailwindcss

• 打開CMD並移到專案的path中輸入下列指令安裝 tailwindcss

    npm install -D tailwindcss postcss autoprefixer
  

  

• 安裝完畢後輸入下方指令會生成config檔

    npx tailwindcss init -p
  

  

• 新增 tailwind.config.js 中 content 的路徑來應用tailwind

    content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx,vue}"],
  

  

• 新增 postcss.config.js 內容，可將 postcss.config.cjs 的 plugins 複製過來做更改並導入 tailwindcss

    module.exports = {
      plugins: [
        require("autoprefixer")({
          overrideBrowserslist: [
            "last 4 Chrome versions",
            "last 4 Firefox versions",
            "last 4 Edge versions",
            "last 4 Safari versions",
            "last 4 Android versions",
            "last 4 ChromeAndroid versions",
            "last 4 FirefoxAndroid versions",
            "last 4 iOS versions",
          ],
        }),
        require("tailwindcss"),
      ],
    };
  

  

• 完成後即可在專案./src/pages/*Page.vue 中使用 tailwindcss

Reference

• NVM
• NVM for Windows
• Quasar CLI | Quasar Framework