Vue3 開新專案與環境設定
tags: Vue
category: Front-End
description: Vue3 開新專案與環境設定
created_at: 2022/07/15 15:30:00
回到 手把手開始寫 Vue3
前言
不管在開發什麼東西，最麻煩的總是 環境設定，真的很討厭，所以這一篇主要完成開新專案與環境設定就好，目前的規劃是
- 開一個乾淨的
Vue3專案 - 在
VSCode安裝相關擴充 (官方推薦) - 為專案加入
ESlint、Prettier與Tailwindcss
然後接下來的開發都會以 VSCode 當作 IDE 為主。
先開新專案
可以簡單使用一行指令來建立 Vue3 專案
$ npm init vue@latest之後你會看到他問你一些問題，像是下面這樣
✔ Project name: … <your-project-name>
✔ Add TypeScript? … No / Yes
✔ Add JSX Support? … No / Yes
✔ Add Vue Router for Single Page Application development? … No / Yes
✔ Add Pinia for state management? … No / Yes
✔ Add Vitest for Unit testing? … No / Yes
✔ Add Cypress for both Unit and End-to-End testing? … No / Yes
✔ Add ESLint for code quality? … No / Yes
✔ Add Prettier for code formatting? … No / Yes他會問你的分別是
- 輸入專案名稱
- 要不要使用
TypeScript - 要不要支援使用
JSX - 要不要加入
Router(如果你要做SPA開發) - 要不要使用
Pinia當作狀態管理工具 - 要不要使用
Vitest做單元測試 - 要不要用
Cypress做E2E測試 - 要不要加入
ESLint - 要不要加入
Prettier
如果要建立最乾淨的 Vue3 專案，那當然就是都選 No ，人家是全都要，我是全都不要。
然後建立好專案之後，可以用 IDE(例如這邊是VSCode) 開啟你的專案。
開啟後，安裝相依套件
$ npm i或是
$ yarn把你的 node_modules 生出來
安裝相關擴充套件
在 Vue3 的官方，他推薦使用 VSCode 去安裝一個擴充套件 Volar
然後官方有提到說： Volar 取代了 Vetur，Vetur 是針對 Vue 2 的官方 VSCode 擴充套件。如果有安裝了 Vetur，請在 Vue 3 項目中禁用它。
不過如果你根本沒用過 Vue2 就無視上面那一段就好，乖乖去安裝 Volar
再來加入 ESlint 、 Prettier 與 Tailwindcss
這一步其實你也可以直接在開新專案的時候把那兩個選項改為 yes，不過我特別列出來是想 promote一下自己的指令 XD
你可以下這個指令
$ npx lai-cmd init vue他會幫你初始化 ESlint 與 Prettier 之後再問你要不要一起加入 Tailwindcss
就算你不想使用這個指令幫你加入ESlint 、 Prettier，你只想加入 Tailwindcss 的話，你可以只下下面這個指令
$ npx lai-cmd init vue-tailwindcss稍微玩一下
打開你的 src/App.vue 看看你存檔之後有沒有自動幫你排版，變成像是下面這樣
<script setup>
import HelloWorld from "./components/HelloWorld.vue";
import TheWelcome from "./components/TheWelcome.vue";
</script>
<template>
<header>
<img
alt="Vue logo"
class="logo"
src="./assets/logo.svg"
width="125"
height="125"
/>
<div class="wrapper">
<HelloWorld msg="You did it!" />
</div>
</header>
<main>
<TheWelcome />
</main>
</template>
<style scoped>
header {
line-height: 1.5;
}
.logo {
display: block;
margin: 0 auto 2rem;
}
@media (min-width: 1024px) {
header {
display: flex;
place-items: center;
padding-right: calc(var(--section-gap) / 2);
}
.logo {
margin: 0 2rem 0 0;
}
header .wrapper {
display: flex;
place-items: flex-start;
flex-wrap: wrap;
}
}
</style>然後測試一下 Tailwindcss 有沒有運作正常
<div class="wrapper bg-blue-500">
<HelloWorld msg="You did it!" />
</div>加入一下 class 的設定，然後開啟測試伺服器看一下，有沒有在畫面上看到藍色的一塊背景。
$ yarn dev清理一下 Code
為了讓之後方便進行，所以把程式先稍微清理一下，把開新專案自動生成的 Code 先拿掉。
也就是刪除 src/components 資料夾，並把 src/App.vue 改成這樣
<script setup></script>
<template>Hello</template>然後因為 css 檔案也會影響之後的練習，也稍微清理一下(我先假設都有裝好 Tailwindcss)
清理感覺有點麻煩(?)，乾脆直接把原有的兩個 base.css 與 main.css 都刪除，然後建立一個 index.css，然後放入下面的 Code
@tailwind base;
@tailwind components;
@tailwind utilities;之後到 src/main.js 改一下 import
// import "./assets/main.css";
// 改成下面
import "./assets/index.css"; 這樣就 OK 了
總結
上面這樣就把開發環境設定好了，接下來就要開始實際下去寫Code了
然後 Vue3 看起來是沒有使用 Webpack 來打包了，而是改用 Vite，效能提升真的很有感，想當初不管是 Vue2 還是 React，每次跑開發伺服器之類的都要在那邊打包很久，而現在都是瞬間就完成。