5分鐘快速搭建一個vue3+ts+vite+pinia專案
theme: fancy
持續創作，加速成長！這是我參與「掘金日新計劃 · 6 月更文挑戰」的第4天，點選檢視活動詳情
最近接到一個新的需求，需要使用Vue3來開發，本著學習的目的，就先來建立一個Vue3專案。既然是學習，那就怎麼新怎麼來。
本次建立專案需要接觸到4個東西：Vue3、TypeScript、vite、pinia，咱們來逐一解釋。
- 作為前端常用三大框架（Vue、React、Angular）之一，Vue在2020年9月18日正式釋出了Vue3.0，簡稱Vue3
- JavaScript我們都知道，而Typescript則是JavaScript的超集，即可編譯成JavaScript，相當於是在JavaScript上面加了型別約束
- vite是一種新型前端構建工具，同樣出自尤大之手。使用webpack的可以看看vite，突出一個字：快
- pinia可作為vue3專案的資料儲存共享，不僅API更加簡潔，而且可配合ts使用，更好的實現型別推導
介紹完畢，我們就來開始新建專案。
建立專案
這一次我們使用vite來新建專案，值得注意的是vite需要node版本大於等於12.0.0，如果node版本太低， 將會影響vite的使用。
npm install -g yarn // vite專案建立方式有很多，我們採用yarn，如果沒有則需要全域性安裝
yarn create vite my-vue-app --template vue-ts // 建立vite專案，並指定採用vue3+ts的專案模板
cd my-vue-app
yarn // 安裝依賴
yarn dev // 執行
執行結果：
這樣我們一個vite專案就建立好了，但是還沒有結束。
配置
配置@別名
一般來說我們在專案中訪問靜態資源時，都是採用專案路徑的方式，一是看起來更簡潔易懂，另外在修改時不容易出現路徑問題。vite專案也需要像普通vue專案一樣配置@別名：
js
// vite.config.ts
...
import * as path from 'path'
import { resolve } from 'path'
export default defineConfig({
plugins: [vue()],
resolve: {
//設定別名
alias: {
'@': path.resolve(__dirname, 'src')
}
},
})
由於我們將採用typescript來開發專案，因此需要在tsconfig.json中也配置@別名：
json
// tsconfig.json
{
"compilerOptions": {
...
"skipLibCheck": true,
// 解析非相對模組名的基準目錄
"baseUrl": "./",
// 模組名到基於 baseUrl的路徑對映的列表。ts檔案中使用@
"paths": {
"@": ["src"],
"@/*": ["src/*"]
}
},
"include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],
"references": [{ "path": "./tsconfig.node.json" }]
}
配置pinia
在vue3專案中，我們採用pinia來代替vuex，首先是安裝：
yarn add pinia
yarn add pinia-plugin-persist // pinia資料持久化
然後在src資料夾下建立store/index.ts
```ts // src/store/index.ts import {defineStore} from 'pinia'; import {createPinia} from 'pinia'; import piniaPersist from 'pinia-plugin-persist';
interface GlobalState { token: string, userInfo: any } // defineStore 呼叫後返回一個函式，呼叫該函式獲得 Store 實體 export const GlobalStore = defineStore({ id: 'GlobalState', // id: 必須的，在所有 Store 中唯一 // state: 返回物件的函式 state: (): GlobalState => ({ token: '', userInfo: {} }), getters: {}, actions: { // 不使用箭頭函式 setToken(token: string) { this.token = token; }, setUserIngo(userInfo: any) { this.userInfo = userInfo; } }, // 持久化 persist: { enabled: true, strategies: [ { key: 'GlobalState', storage: localStorage, // storage: sessionStorage, } ] } }); const pinia = createPinia(); pinia.use(piniaPersist);
export default pinia;
```
然後在main.ts中引入：
ts
...
import store from "@/store/index";
const app = createApp(App);
app.use(store);
在元件中使用：
```ts
```
使用less，並定義全域性less變數
首先我們先安裝less和less-loader：
npm i less less-loader
然後我們需要在vite.config.ts中配置css前處理器
ts
export default defineConfig({
...
css: {
// css前處理器
preprocessorOptions: {
less: {
additionalData: `@import "${resolve(__dirname, 'src/assets/style/global.less')}";`,
javascriptEnabled: true,
}
}
}
})
我們這裡預設載入global.less中的樣式，那麼我們就需要建立一個這樣的檔案：
less
// src/assets/style/global.less
@primary-color: #5878e2; // 主題色
最後在main.ts中引入即可：
import "./assets/style/global.less";
然後在元件中使用時，就可以直接使用：
```ts
```
配置路由
配置路由一般採用vue-router
yarn add vue-router
新建src/router/index.ts
```ts // src/router/index.ts import { createRouter, createWebHistory, RouteRecordRaw } from "vue-router";
const HelloWorld = () => import("@/components/HelloWorld.vue");
const routes: Array
const router = createRouter({ history: createWebHistory(), routes, }); export default router; ```
然後在main.ts中引入router
import router from './router'
app.use(router)
總結
本文介紹了快速建立vite+vue3+ts+pinia專案，學會了就來試試手吧。
原創不易，轉載請註明出處。