使用 Vite 快速搭建腳手架
命令列選項直接指定專案名稱和想要使用的模板,Vite + Vue 專案,執行(推薦使用yarn)
# npm 6.x
npm init vite@latest my-vue-app --template vue
# npm 7+, 需要額外的雙橫線:
npm init vite@latest my-vue-app -- --template vue
# yarn
yarn create vite my-vue-app --template vue
# pnpm
pnpm create vite my-vue-app -- --template vue
這裡我們想要直接生成一個Vue3+Vite2+ts的專案模板,因此我們執行的命令是: yarn create vite my-vue-app --template vue-ts,這樣我們就不需要你單獨的再去安裝配置ts了。
cd 到專案資料夾,安裝node_modules依賴,執行專案
# cd進入my-vue-app專案資料夾
cd my-vue-app
# 安裝依賴
yarn
# 執行專案
yarn dev
至此,一個最純淨的vue3.0+vite2+typescript專案就完成了。在瀏覽位址列中輸入http://localhost:3000/,就看到了如下的啟動頁,然後就可以安裝所需的外掛了。
配置檔案路徑引用別名 alias
修改vite.config.ts中的reslove的配置
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [vue()],
resolve: {
alias: {
'@': path.resolve(__dirname, 'src'),
},
},
})
在修改tsconfig.json檔案的配置
{
"compilerOptions": {
"target": "esnext",
"module": "esnext",
"moduleResolution": "node",
"strict": true,
"jsx": "preserve",
"sourceMap": true,
"resolveJsonModule": true,
"esModuleInterop": true,
"lib": ["esnext", "dom"],
"baseUrl": ".",
"paths": {
"@/*":["src/*"]
}
},
"include": [
"src/**/*.ts",
"src/**/*.d.ts",
"src/**/*.tsx",
"src/**/*.vue"
]
}
配置路由
安裝
# npm
npm install vue-router@4
# yarn
yarn add vue-router@4
在src下新建router資料夾,用來集中管理路由,在router資料夾下新建 index.ts檔案。
import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router'
const routes: RouteRecordRaw[] = [
{
path: '/',
name: 'Login',
// 注意這裡要帶上檔案字尾.vue
component: () => import('@/pages/login/Login.vue'),
meta: {
title: '登入',
},
},
]
const router = createRouter({
history: createWebHistory(),
routes,
strict: true,
// 期望滾動到哪個的位置
scrollBehavior(to, from, savedPosition) {
return new Promise(resolve => {
if (savedPosition) {
return savedPosition;
} else {
if (from.meta.saveSrollTop) {
const top: number =
document.documentElement.scrollTop || document.body.scrollTop;
resolve({ left: 0, top });
}
}
});
}
})
export function setupRouter(app: App) {
app.use(router);
}
export default router
修改入口檔案 mian.ts
import { createApp } from "vue";
import App from "./App.vue";
import router, { setupRouter } from './router';
const app = createApp(App);
// 掛在路由
setupRouter(app);
// 路由準備就緒後掛載APP例項
await router.isReady();
app.mount('#app', true);
更多的路由配置可以移步vue-router(https://next.router.vuejs.org/zh/introduction.html)。 vue-router4.x支援typescript,路由的型別為RouteRecordRaw。meta欄位可以讓我們根據不同的業務需求擴充套件 RouteMeta 介面來輸入它的多樣性。以下的meta中的配置僅供參考:
// typings.d.ts or router.ts
import 'vue-router'
declare module 'vue-router' {
interface RouteMeta {
// 頁面標題,通常必選。
title: string;
// 選單圖示
icon?: string;
// 配置選單的許可權
permission: string[];
// 是否開啟頁面快取
keepAlive?: boolean;
// 二級頁面我們並不想在選單中顯示
hidden?: boolean;
// 選單排序
order?: number;
// 巢狀外鏈
frameUrl?: string;
}
}
配置 css 前處理器 scss
安裝
yarn add sass-loader --dev
yarn add dart-sass --dev
yarn add sass --dev
配置全域性 scss 樣式檔案 在 src資料夾下新增 styles 資料夾,用於存放全域性樣式檔案,新建一個 varibles.scss檔案,用於統一管理宣告的顏色變數:
$white: #FFFFFF;
$primary-color: #1890ff;
$success-color: #67C23A;
$warning-color: #E6A23C;
$danger-color: #F56C6C;
$info-color: #909399;
元件中使用在vite.config.ts中將這個樣式檔案全域性注入到專案即可全域性使用,不需要在任何元件中再次引入這個檔案或者顏色變數。
css: {
preprocessorOptions: {
scss: {
modifyVars: {},
javascriptEnabled: true,
// 注意這裡的引入的書寫
additionalData: '@import "@/style/varibles.scss";'
}
}
},
在元件中使用
.div {
color: $primary-color;
background-color: $success-color;
}
統一請求封裝
在src資料夾下,新建http資料夾,在http資料夾下新增index.ts,config.ts,core.ts,types.d.ts,utils.ts
core.ts
import Axios, { AxiosRequestConfig, CancelTokenStatic, AxiosInstance } from "axios";
import NProgress from 'nprogress'
import { genConfig } from "./config";
import { transformConfigByMethod } from "./utils";
import {
cancelTokenType,
RequestMethods,
HttpRequestConfig,
HttpResoponse,
HttpError
} from "./types.d";
class Http {
constructor() {
this.httpInterceptorsRequest();
this.httpInterceptorsResponse();
}
// 初始化配置物件
private static initConfig: HttpRequestConfig = {};
// 儲存當前Axios例項物件
private static axiosInstance: AxiosInstance = Axios.create(genConfig());
// 儲存 Http例項
private static HttpInstance: Http;
// axios取消物件
private CancelToken: CancelTokenStatic = Axios.CancelToken;
// 取消的憑證陣列
private sourceTokenList: Array<cancelTokenType> = [];
// 記錄當前這一次cancelToken的key
private currentCancelTokenKey = "";
public get cancelTokenList(): Array<cancelTokenType> {
return this.sourceTokenList;
}
// eslint-disable-next-line class-methods-use-this
public set cancelTokenList(value) {
throw new Error("cancelTokenList不允許賦值");
}
/**
* @description 私有構造不允許例項化
* @returns void 0
*/
// constructor() {}
/**
* @description 生成唯一取消key
* @param config axios配置
* @returns string
*/
// eslint-disable-next-line class-methods-use-this
private static genUniqueKey(config: HttpRequestConfig): string {
return `${config.url}--${JSON.stringify(config.data)}`;
}
/**
* @description 取消重複請求
* @returns void 0
*/
private cancelRepeatRequest(): void {
const temp: { [key: string]: boolean } = {};
this.sourceTokenList = this.sourceTokenList.reduce<Array<cancelTokenType>>(
(res: Array<cancelTokenType>, cancelToken: cancelTokenType) => {
const { cancelKey, cancelExecutor } = cancelToken;
if (!temp[cancelKey]) {
temp[cancelKey] = true;
res.push(cancelToken);
} else {
cancelExecutor();
}
return res;
},
[]
);
}
/**
* @description 刪除指定的CancelToken
* @returns void 0
*/
private deleteCancelTokenByCancelKey(cancelKey: string): void {
this.sourceTokenList =
this.sourceTokenList.length < 1
? this.sourceTokenList.filter(
cancelToken => cancelToken.cancelKey !== cancelKey
)
: [];
}
/**
* @description 攔截請求
* @returns void 0
*/
private httpInterceptorsRequest(): void {
Http.axiosInstance.interceptors.request.use(
(config: HttpRequestConfig) => {
const $config = config;
NProgress.start(); // 每次切換頁面時,呼叫進度條
const cancelKey = Http.genUniqueKey($config);
$config.cancelToken = new this.CancelToken(
(cancelExecutor: (cancel: any) => void) => {
this.sourceTokenList.push({ cancelKey, cancelExecutor });
}
);
this.cancelRepeatRequest();
this.currentCancelTokenKey = cancelKey;
// 優先判斷post/get等方法是否傳入回掉,否則執行初始化設定等回掉
if (typeof config.beforeRequestCallback === "function") {
config.beforeRequestCallback($config);
return $config;
}
if (Http.initConfig.beforeRequestCallback) {
Http.initConfig.beforeRequestCallback($config);
return $config;
}
return $config;
},
error => {
return Promise.reject(error);
}
);
}
/**
* @description 清空當前cancelTokenList
* @returns void 0
*/
public clearCancelTokenList(): void {
this.sourceTokenList.length = 0;
}
/**
* @description 攔截響應
* @returns void 0
*/
private httpInterceptorsResponse(): void {
const instance = Http.axiosInstance;
instance.interceptors.response.use(
(response: HttpResoponse) => {
const $config = response.config;
// 請求每次成功一次就刪除當前canceltoken標記
const cancelKey = Http.genUniqueKey($config);
this.deleteCancelTokenByCancelKey(cancelKey);
NProgress.done();
// 優先判斷post/get等方法是否傳入回掉,否則執行初始化設定等回掉
if (typeof $config.beforeResponseCallback === "function") {
$config.beforeResponseCallback(response);
return response.data;
}
if (Http.initConfig.beforeResponseCallback) {
Http.initConfig.beforeResponseCallback(response);
return response.data;
}
return response.data;
},
(error: HttpError) => {
const $error = error;
// 判斷當前的請求中是否在 取消token陣列理存在,如果存在則移除(單次請求流程)
if (this.currentCancelTokenKey) {
const haskey = this.sourceTokenList.filter(
cancelToken => cancelToken.cancelKey === this.currentCancelTokenKey
).length;
if (haskey) {
this.sourceTokenList = this.sourceTokenList.filter(
cancelToken =>
cancelToken.cancelKey !== this.currentCancelTokenKey
);
this.currentCancelTokenKey = "";
}
}
$error.isCancelRequest = Axios.isCancel($error);
NProgress.done();
// 所有的響應異常 區分來源為取消請求/非取消請求
return Promise.reject($error);
}
);
}
public request<T>(
method: RequestMethods,
url: string,
param?: AxiosRequestConfig,
axiosConfig?: HttpRequestConfig
): Promise<T> {
const config = transformConfigByMethod(param, {
method,
url,
...axiosConfig
} as HttpRequestConfig);
// 單獨處理自定義請求/響應回掉
return new Promise((resolve, reject) => {
Http.axiosInstance
.request(config)
.then((response: undefined) => {
resolve(response);
})
.catch((error: any) => {
reject(error);
});
});
}
public post<T>(
url: string,
params?: T,
config?: HttpRequestConfig
): Promise<T> {
return this.request<T>("post", url, params, config);
}
public get<T>(
url: string,
params?: T,
config?: HttpRequestConfig
): Promise<T> {
return this.request<T>("get", url, params, config);
}
}
export default Http;
config.ts
import { AxiosRequestConfig } from "axios";
import { excludeProps } from "./utils";
/**
* 預設配置
*/
export const defaultConfig: AxiosRequestConfig = {
baseURL: "",
//10秒超時
timeout: 10000,
headers: {
Accept: "application/json, text/plain, */*",
"Content-Type": "application/json",
"X-Requested-With": "XMLHttpRequest"
}
};
export function genConfig(config?: AxiosRequestConfig): AxiosRequestConfig {
if (!config) {
return defaultConfig;
}
const { headers } = config;
if (headers && typeof headers === "object") {
defaultConfig.headers = {
...defaultConfig.headers,
...headers
};
}
return { ...excludeProps(config!, "headers"), ...defaultConfig };
}
export const METHODS = ["post", "get", "put", "delete", "option", "patch"];
utils.ts
import { HttpRequestConfig } from "./types.d";
export function excludeProps<T extends { [key: string]: any }>(
origin: T,
prop: string
): { [key: string]: T } {
return Object.keys(origin)
.filter(key => !prop.includes(key))
.reduce((res, key) => {
res[key] = origin[key];
return res;
}, {} as { [key: string]: T });
}
export function transformConfigByMethod(
params: any,
config: HttpRequestConfig
): HttpRequestConfig {
const { method } = config;
const props = ["delete", "get", "head", "options"].includes(
method!.toLocaleLowerCase()
)
? "params"
: "data";
return {
...config,
[props]: params
};
}
types.d.ts
import Axios, {
AxiosRequestConfig,
Canceler,
AxiosResponse,
Method,
AxiosError
} from "axios";
import { METHODS } from "./config";
export type cancelTokenType = { cancelKey: string; cancelExecutor: Canceler };
export type RequestMethods = Extract<
Method,
"get" | "post" | "put" | "delete" | "patch" | "option" | "head"
>;
export interface HttpRequestConfig extends AxiosRequestConfig {
// 請求傳送之前
beforeRequestCallback?: (request: HttpRequestConfig) => void;
// 相應返回之前
beforeResponseCallback?: (response: HttpResoponse) => void;
}
export interface HttpResoponse extends AxiosResponse {
config: HttpRequestConfig;
}
export interface HttpError extends AxiosError {
isCancelRequest?: boolean;
}
export default class Http {
cancelTokenList: Array<cancelTokenType>;
clearCancelTokenList(): void;
request<T>(
method: RequestMethods,
url: string,
param?: AxiosRequestConfig,
axiosConfig?: HttpRequestConfig
): Promise<T>;
post<T>(
url: string,
params?: T,
config?: HttpRequestConfig
): Promise<T>;
get<T>(
url: string,
params?: T,
config?: HttpRequestConfig
): Promise<T>;
}
index.ts
import Http from "./core";
export const http = new Http();
統一api管理
在src下新增api資料夾,對專案中介面做統一管理,按照模組來劃分。
例如,在 api 檔案下新增 user.ts和types.ts ,分別用於存放登入,註冊等模組的請求介面和資料型別。
// login.ts
import { http } from "@/http/index";
import { ILoginReq, ILoginRes } from "./types";
export const getLogin = async(req: ILoginParams): Promise<ILoginRes> => {
const res:any = await http.post('/login/info', req)
return res as ILoginRes
}
# 或者
export const getLogin1 = async(req: ILoginParams): Promise<ILoginRes> => {
const res:any = await http.request('post', '/login/info', req)
return res as ILoginRes
}
// types.ts
export interface ILoginReq {
userName: string;
password: string;
}
export interface ILoginRes {
access_token: string;
refresh_token: string;
scope: string
token_type: string
expires_in: string
}
除了自己手動封裝 axios ,這裡還推薦一個十分非常強大牛皮的 vue3 的請求庫: VueRequest,裡面的功能非常的豐富(偷偷告訴你我也在使用中)。官網地址:https://www.attojs.com/
狀態管理 Pinia
Pinia 是 Vue.js 的輕量級狀態管理庫,最近很受歡迎。它使用 Vue 3 中的新反應系統來構建一個直觀且完全型別化的狀態管理庫。
由於 vuex 4 對 typescript 的支援很不友好,所以狀態管理棄用了 vuex 而採取了 pinia, pinia 的作者是 Vue 核心團隊成員,並且pinia已經正式加入了Vue,成為了Vue中的一員。尤大佬 pinia 可能會代替 vuex,所以請放心使用(公司專案也在使用中)。
Pinia官網地址(https://pinia.vuejs.org)
Pinia的一些優點:
(1)Pinia 的 API 設計非常接近 Vuex 5
的提案。
(2)無需像 Vuex 4
自定義複雜的型別來支援 typescript,天生具備完美的型別推斷。
(3)模組化設計,你引入的每一個 store 在打包時都可以自動拆分他們。
(4)無巢狀結構,但你可以在任意的 store 之間交叉組合使用。
(5)Pinia 與 Vue devtools 掛鉤,不會影響 Vue 3 開發體驗。
Pinia的成功可以歸功於其管理儲存資料的獨特功能(可擴充套件性、儲存模組組織、狀態變化分組、多儲存建立等)。
另一方面,Vuex也是為Vue框架建立的一個流行的狀態管理庫,它也是Vue核心團隊推薦的狀態管理庫。Vuex高度關注應用程式的可擴充套件性、開發人員的工效和信心。它基於與Redux相同的流量架構。
Pinia和Vuex都非常快,在某些情況下,使用Pinia的web應用程式會比使用Vuex更快。這種效能的提升可以歸因於Pinia的極輕的體積,Pinia體積約1KB。
安裝
# 安裝
yarn add pinia@next
在src下新建store資料夾,在store資料夾下新建index.ts,mutation-types(變數集中管理),types.ts(型別)和modules資料夾(分模組管理狀態)
// index.ts
import type { App } from "vue";
import { createPinia } from "pinia";
const store = createPinia();
export function setupStore(app: App<Element>) {
app.use(store)
}
export { store }
// modules/user.ts
import { defineStore } from 'pinia';
import { store } from '@/store';
import { ACCESS_TOKEN } from '@/store/mutation-types';
import { IUserState } from '@/store/types'
export const useUserStore = defineStore({
// 此處的id很重要
id: 'app-user',
state: (): IUserState => ({
token: localStorge.getItem(ACCESS_TOKEN)
}),
getters: {
getToken(): string {
return this.token;
}
},
actions: {
setToken(token: string) {
this.token = token;
},
// 登入
async login(userInfo) {
try {
const response = await login(userInfo);
const { result, code } = response;
if (code === ResultEnum.SUCCESS) {
localStorage.setItem(ACCESS_TOKEN, result.token);
this.setToken(result.token);
}
return Promise.resolve(response);
} catch (e) {
return Promise.reject(e);
}
},
}
})
// Need to be used outside the setup
export function useUserStoreHook() {
return useUserStore(store);
}
/// mutation-types.ts
// 對變數做統一管理
export const ACCESS_TOKEN = 'ACCESS-TOKEN'; // 使用者token
修改main.ts
import { createApp } from 'vue'
import App from './App.vue'
import { setupStore } from '@/store'
import router from './router/index'
const app = createApp(App)
// 掛載狀態管理
setupStore(app);
app.use(router)
app.mount('#app')
在元件中使用
<template>
<div>{{userStore.token}}</div>
</template>
<script lang="ts">
import { defineComponent } from 'vue'
import { useUserStoreHook } from "@/store/modules/user"
export default defineComponent({
setup() {
const userStore = useUserStoreHook()
return {
userStore
}
},
})
</script>
getters的用法介紹
// modules/user.ts
import { defineStore } from 'pinia';
import { store } from '@/store';
import { ACCESS_TOKEN } from '@/store/mutation-types';
import { IUserState } from '@/store/types'
export const useUserStore = defineStore({
// 此處的id很重要
id: 'app-user',
state: (): IUserState => ({
token: localStorge.getItem(ACCESS_TOKEN),
name: ''
}),
getters: {
getToken(): string {
return this.token;
},
nameLength: (state) => state.name.length,
},
actions: {
setToken(token: string) {
this.token = token;
},
// 登入
async login(userInfo) {
// 呼叫介面,做邏輯處理
}
}
})
// Need to be used outside the setup
export function useUserStoreHook() {
return useUserStore(store);
}
<template>
<div>
<span>{{userStore.name}}</span>
<span>{{userStore.nameLength}}</span>
<buttton @click="changeName"></button>
</div>
</template>
<script lang="ts">
import { defineComponent } from 'vue'
import { useUserStoreHook } from "@/store/modules/user"
export default defineComponent({
setup() {
const userStore = useUserStoreHook()
const changeName = ()=>{
// $patch 修改 store 中的資料
userStore.$patch({
name: '名稱被修改了,nameLength也改變了'
})
}
return {
userStore,
updateName
}
},
})
</script>
actions
這裡與 Vuex 有極大的不同,Pinia 僅提供了一種方法來定義如何更改狀態的規則,放棄 mutations 只依靠 Actions,這是一項重大的改變。
Pinia 讓 Actions 更加的靈活
-
可以透過元件或其他 action 呼叫
-
可以從其他 store 的 action 中呼叫
-
直接在商店例項上呼叫
-
支援同步或非同步
-
有任意數量的引數
-
可以包含有關如何更改狀態的邏輯(也就是 vuex 的 mutations 的作用)
-
可以
$patch
方法直接更改狀態屬性更多詳細的用法請參考Pinia中的actions官方網站:
actions的用法(https://pinia.vuejs.org/core-concepts/actions.html)
環境變數配置
vite 提供了兩種模式:具有開發伺服器的開發模式(development)和生產模式(production)。在專案的根目錄中我們新建開發配置檔案.env.development和生產配置檔案.env.production。
# 網站根目錄
VITE_APP_BASE_URL= ''
元件中使用:
console.log(import.meta.env.VITE_APP_BASE_URL)
配置 package.json,打包區分開發環境和生產環境
"build:dev": "vue-tsc --noEmit && vite build --mode development",
"build:pro": "vue-tsc --noEmit && vite build --mode production",
使用元件庫
根據自己的專案需要選擇合適的元件庫即可,這裡推薦兩個優秀的元件庫Element-plus和Naive UI。下面簡單介紹它們的使用方法。
使用element-plus(https://element-plus.gitee.io/zh-CN/)
yarn add element-plus
推薦按需引入的方式:
按需引入需要安裝unplugin-vue-components和unplugin-auto-import兩個外掛。
yarn add -D unplugin-vue-components unplugin-auto-import
再將vite.config.ts寫入一下配置,即可在專案中使用element plus元件,無需再引入。
// vite.config.ts
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
export default {
plugins: [
// ...
AutoImport({
resolvers: [ElementPlusResolver()],
}),
Components({
resolvers: [ElementPlusResolver()],
}),
],
}
Naive UI(https://www.naiveui.com/zh-CN/os-theme)
# 安裝naive-ui
npm i -D naive-ui
# 安裝字型
npm i -D vfonts
按需全域性安裝元件
import { createApp } from 'vue'
import {
// create naive ui
create,
// component
NButton
} from 'naive-ui'
const naive = create({
components: [NButton]
})
const app = createApp()
app.use(naive)
安裝後,你可以這樣在 SFC 中使用你安裝的元件。
<template>
<n-button>naive-ui</n-button>
</template>
Vite 常用基礎配置
基礎配置
執行代理和打包配置
server: {
host: '0.0.0.0',
port: 3000,
open: true,
https: false,
proxy: {}
},
生產環境去除 console debugger
build:{
...
terserOptions: {
compress: {
drop_console: true,
drop_debugger: true
}
}
}
生產環境生成 .gz 檔案,開啟 gzip 可以極大的壓縮靜態資源,對頁面載入的速度起到了顯著的作用。使用 vite-plugin-compression 可以 gzip 或 brotli 的方式來壓縮資源,這一步需要伺服器端的配合,vite 只能幫你打包出 .gz 檔案。此外掛使用簡單,你甚至無需配置引數,引入即可。
# 安裝
yarn add --dev vite-plugin-compression
// vite.config.ts中新增
import viteCompression from 'vite-plugin-compression'
// gzip壓縮 生產環境生成 .gz 檔案
viteCompression({
verbose: true,
disable: false,
threshold: 10240,
algorithm: 'gzip',
ext: '.gz',
}),
最終 vite.config.ts檔案配置如下(自己根據專案需求配置即可)
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path'
//@ts-ignore
import viteCompression from 'vite-plugin-compression'
// https://vitejs.dev/config/
export default defineConfig({
base: './', //打包路徑
plugins: [
vue(),
// gzip壓縮 生產環境生成 .gz 檔案
viteCompression({
verbose: true,
disable: false,
threshold: 10240,
algorithm: 'gzip',
ext: '.gz',
}),
],
// 配置別名
resolve: {
alias: {
'@': path.resolve(__dirname, 'src'),
},
},
css:{
preprocessorOptions:{
scss:{
additionalData:'@import "@/assets/style/mian.scss";'
}
}
},
//啟動服務配置
server: {
host: '0.0.0.0',
port: 8000,
open: true,
https: false,
proxy: {}
},
// 生產環境打包配置
//去除 console debugger
build: {
terserOptions: {
compress: {
drop_console: true,
drop_debugger: true,
},
},
},
})