# 2023從頭建立Vue3專案

建立一個TypeScript + Vue3 + Tailwind專案

### 專案構成

* TypeScript Vue3 SPA
* Vite建構
* Tailwind CSS
* ESLint + Prettier
* Pinia

### TOC

[TOC]

# 第零步 VSCode extension

把該裝的extension都裝一裝

[Vue Language Features (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.volar)
[TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin)
[Tailwind CSS IntelliSense](https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss)
[ESLint](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint)

# 第一步 create-vue

### [Creating a Vue Application](https://vuejs.org/guide/quick-start.html#creating-a-vue-application)

透過`create-vue`建立Vue專案，它會給你一份基礎專案當作起始點
根據你的選擇裝好需要的`dependencies`並且產生對應的config檔案

1. 初始化Vue專案

    npm init vue@latest

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

    Vue.js - The Progressive JavaScript Framework

    ✔ Project name: … vue-project
    ✔ Add TypeScript? … Yes
    ✔ Add JSX Support? … No
    ✔ Add Vue Router for Single Page Application development? … Yes
    ✔ Add Pinia for state management? … Yes
    ✔ Add Vitest for Unit Testing? … No
    ✔ Add an End-to-End Testing Solution? › No
    ✔ Add ESLint for code quality? … Yes
    ✔ Add Prettier for code formatting? … Yes

2. 選擇完成後依照指示輸入以下命令

    cd vue-project
    npm install
    npm run lint
    
    # 裝完Tailwind再運行dev server
    # npm run dev

3. 修改`package.json`加上`"type": "module"`，Tailwind會用到

    {
      "name": "my-project",
      "private": true,
      "version": "0.0.0",
      "type": "module",
      "scripts": {

# 第二步 Tailwind CSS

### [Install Tailwind CSS with Vite](https://tailwindcss.com/docs/guides/vite#vue)

根據Tailwind官網提供的範例安裝Tailwind
跳過第一步`Create your project`，因為我們已經透過`create-vue`建好專案了
之所以不用`vite`建立專案是因為還要再手動安裝其他需要的`dependencies`

1. 執行以下指令安裝Tailwind

    npm install -D tailwindcss postcss autoprefixer
    npx tailwindcss init -p

2. 修改`tailwind.config.cjs`

    /* eslint-env node */
    /** @type {import('tailwindcss').Config} */
    module.exports = {
      content: [
        "./index.html",
        "./src/**/*.{vue,js,ts,jsx,tsx}",
      ],
      theme: {
        extend: {},
      },
      plugins: [],
    }

3. 修改`postcss.config.cjs`

    /* eslint-env node */
    module.exports = {
      plugins: {
        tailwindcss: {},
        autoprefixer: {},
      },
    }

4. 修改`./src/assets/main.css`

    @import './base.css';

    @tailwind base;
    @tailwind components;
    @tailwind utilities;

5. 安裝plugin來格式化Tailwind CSS
https://www.npmjs.com/package/eslint-plugin-tailwindcss
https://www.npmjs.com/package/prettier-plugin-tailwindcss

    npm install -D prettier-plugin-tailwindcss eslint-plugin-tailwindcss

修改`.prettierrc.json `

    {
      "plugins": [
        "prettier-plugin-tailwindcss"
      ]
    }

修改`.eslintrc.cjs`

    /* eslint-env node */
    require("@rushstack/eslint-patch/modern-module-resolution");

    module.exports = {
      root: true,
      extends: [
        "plugin:vue/vue3-essential",
        "eslint:recommended",
        "@vue/eslint-config-typescript",
        "@vue/eslint-config-prettier",
        "plugin:tailwindcss/recommended",
      ],
      parserOptions: {
        ecmaVersion: "latest",
      },
    };

6. 確定ESLint正常運行

開啟`./src/App.vue`查看class name是否顯示黃底線


8. 確定Tailwind正常運行

修改`./src/App.vue`

    <template>
      <header class="outline outline-green-500">
        <!-- ... -->
      </header>

      <RouterView />
    </template>

運行dev server

    npm run dev

查看網頁是否多出一圈綠色外框

# 第三步 設定Volar

https://vuejs.org/guide/typescript/overview.html#volar-takeover-mode

# Done

恭喜你成功建立了新專案，現在你可以開始創造你所想的網頁應用了

# 相關連結

#### 給TypeScript + Vue3新手 [TypeScript with Composition API](https://vuejs.org/guide/typescript/composition-api.html)

#### 資料型別驗證 [Zod](https://zod.dev/)

#### 資料庫 [Supabase](https://supabase.com/)