Vue3+Vite+TypeScript常用項(xiàng)目模塊詳解

這篇具有很好參考價(jià)值的文章主要介紹了Vue3+Vite+TypeScript常用項(xiàng)目模塊詳解。希望對(duì)大家有所幫助。如果存在錯(cuò)誤或未考慮完全的地方，請(qǐng)大家不吝賜教，您也可以點(diǎn)擊"舉報(bào)違法"按鈕提交疑問。

?文章來源地址http://www.zghlxwxcb.cn/news/detail-477801.html

1.Vue3+Vite+TypeScript 概述

1.1 vue3?

1.1.1 Vue3? 概述

1.1.2?vue3的現(xiàn)狀與發(fā)展趨勢(shì)

1.2 Vite

1.2.1 現(xiàn)實(shí)問題

1.2 搭建vite項(xiàng)目

1.3 TypeScript

1.3.1 TypeScript 定義

1.3.2 TypeScript 基本數(shù)據(jù)類型

?1.3.3 TypeScript語法簡單介紹

2. 項(xiàng)目配置簡單概述

2.1 eslint 校驗(yàn)代碼工具配置

2.1.1 eslint定義

2.1.2 eslint安裝

2.2 prettier格式化工具配置

2.2.1 prettier 定義

2.2.2 prettier安裝

2.3?stylelint 配置

2.3.1 stylelint定義

2.3.2 scss 安裝stylelint依賴

2.4?husky配置

2.4.1 husky定義

2.4.2 husky 安裝

3.項(xiàng)目集成

3.1 集成element-plus

3.1.1 安裝

3.1.2 應(yīng)用

3.2?src別名的配置

3.3 Mock

3.3.1 Mock 定義

3.3.2 Mock 使用場(chǎng)景

3.3.3 安裝和測(cè)試

3.4 axios封裝

3.5 集成Sass

3.5.1 sass介紹

3.5.2 安裝

3.5.3 sass語法

現(xiàn)在無論gitee還是github，越來越多的前端開源項(xiàng)目采用Vue3+Vite+TypeScript+Pinia+Elementplus+axios+Sass(css預(yù)編譯語言等），其中還有各種項(xiàng)目配置比如eslint 校驗(yàn)代碼工具配置等等，而我們想要進(jìn)行前端項(xiàng)目的二次開發(fā)，就必須了解會(huì)使用這些東西，所以作者寫了這篇文章進(jìn)行簡單的介紹。

1.Vue3+Vite+TypeScript 概述

1.1 vue3?

1.1.1 Vue3? 概述

Vue.js是一種前端JavaScript框架，可以用于構(gòu)建交互式Web頁面和單頁應(yīng)用程序。Vue.js 3是Vue.js框架的最新版本，于2020年9月正式發(fā)布。Vue.js 3相對(duì)于Vue.js 2來說有以下的變化和改進(jìn)：
1. 更好的性能：Vue.js3在性能上進(jìn)行了優(yōu)化，通過優(yōu)化響應(yīng)式系統(tǒng)，可以提高應(yīng)用程序的性能。
2. 更好的TypeScript支持：Vue.js 3對(duì)TypeScript的支持更好，并且內(nèi)置了TypeScript支持。
3. 更好的開發(fā)人員體驗(yàn): Vue.js 3 對(duì)于模板編譯器進(jìn)行重大升級(jí)，所有原始模板現(xiàn)在都被編譯成函數(shù)，這意味著編譯時(shí)會(huì)更快，運(yùn)行時(shí)將更少依賴于Vue.js本身。
4. 更好的組件API：Vue.js 3引入了Composition API，它可以幫助開發(fā)者更輕松、更靈活地編寫組件代碼。
5. 更好的Tree-Shaking支持：Vue.js 3 支持了更好的樹搖功能。它允許您僅包含應(yīng)用程序中需要的代碼，從而大大減少了加載時(shí)間和應(yīng)用程序的大小。

1.1.2?vue3的現(xiàn)狀與發(fā)展趨勢(shì)

目前，Vue 3 已經(jīng)成為前端開發(fā)中非常流行的框架之一。很多公司和開發(fā)者都在使用 Vue 3 開發(fā)他們的項(xiàng)目。以下是 Vue 3 的一些發(fā)展趨勢(shì)：

1.更好的 TypeScript 支持：Vue 3 引入了很多新的 TypeScript 類型定義，提供了更好的類型檢查和自動(dòng)補(bǔ)全功能。這使得開發(fā)者可以更加輕松地使用 TypeScript 編寫 Vue 應(yīng)用。
2.Composition API 的普及：Composition API 是 Vue 3 中引入的一種新的組件 API，可以幫助開發(fā)者更好地組織和重用組件邏輯。隨著越來越多的開發(fā)者開始使用 Composition API，它將成為 Vue 3 開發(fā)中的一個(gè)重要組成部分。
3.更快的性能和更小的包體積：Vue 3 引入了很多性能優(yōu)化，包括更快的渲染速度、更小的包體積等等。這些改進(jìn)使得 Vue 3 成為一個(gè)更加高效和可靠的框架，可以幫助開發(fā)者更快地構(gòu)建高質(zhì)量的應(yīng)用。
4.更多的社區(qū)貢獻(xiàn)：Vue 3 已經(jīng)得到了廣泛的社區(qū)支持，很多開發(fā)者和公司都在為 Vue 3 開發(fā)新的插件、組件和工具。這將進(jìn)一步增強(qiáng) Vue 3 的功能和可用性。

1.2 Vite

1.2.1 現(xiàn)實(shí)問題

在瀏覽器支持 ES 模塊之前，JavaScript 并沒有提供原生機(jī)制讓開發(fā)者以模塊化的方式進(jìn)行開發(fā)。這也正是我們對(duì) “打包” 這個(gè)概念熟悉的原因：使用工具抓取、處理并將我們的源碼模塊串聯(lián)成可以在瀏覽器中運(yùn)行的文件。

時(shí)過境遷，我們見證了諸如?webpack、Rollup?和?Parcel?等工具的變遷，它們極大地改善了前端開發(fā)者的開發(fā)體驗(yàn)。

然而，當(dāng)我們開始構(gòu)建越來越大型的應(yīng)用時(shí)，需要處理的 JavaScript 代碼量也呈指數(shù)級(jí)增長。包含數(shù)千個(gè)模塊的大型項(xiàng)目相當(dāng)普遍。基于 JavaScript 開發(fā)的工具就會(huì)開始遇到性能瓶頸：通常需要很長時(shí)間（甚至是幾分鐘?。┎拍軉?dòng)開發(fā)服務(wù)器，即使使用模塊熱替換（HMR），文件修改后的效果也需要幾秒鐘才能在瀏覽器中反映出來。如此循環(huán)往復(fù)，遲鈍的反饋會(huì)極大地影響開發(fā)者的開發(fā)效率和幸福感。

Vite 旨在利用生態(tài)系統(tǒng)中的新進(jìn)展解決上述問題：瀏覽器開始原生支持 ES 模塊，且越來越多 JavaScript 工具使用編譯型語言編寫。

1.2 搭建vite項(xiàng)目

使用 NPM:

npm create vite@latest

使用 PNPM:

pnpm create vite

1.3 TypeScript

1.3.1 TypeScript 定義

TypeScript 簡稱：TS，是 JavaScript 的超集。在 JS 基礎(chǔ)之上，為 JS 添加了類型支持。TypeScript = Type + JavaScript

1.3.2 TypeScript 基本數(shù)據(jù)類型

如下圖所示：

Vue3+Vite+TypeScript常用項(xiàng)目模塊詳解

?1.3.3 TypeScript語法簡單介紹

1.3.3.1 原始類型

// 數(shù)值類型
let age: number = 20
 
// 字符串類型
let myName: string = 'hello'
 
// 布爾類型
let isLoading: boolean = false
 
// undefined
let un: undefined = undefined
 
// null
let timer:null = null

1.3.3.2 聯(lián)合類型

let 變量: 類型1 | 類型2 | 類型3 .... = 初始值

let arr: (number | string)[] = [12, 'a']

?1.3.3.3 數(shù)組類型

let 變量: 類型[] = [值1，...]

let 變量: Array<類型> = [值1，...]


let numbers: number[] = [40, 43, 45]

?1.3.3.4 函數(shù)類型

普通函數(shù)：function 函數(shù)名(形參1：類型，形參2：類型): 返回值類型 { }
箭頭函數(shù)：const 函數(shù)名（形參1：類型，形參2：類型):返回值類型 => { }

// 函數(shù)聲明
function add(num1: number, num2: number): number {
  return num1 + num2
}

// 箭頭函數(shù)
const add = (num1: number, num2: number): number => {
  return num1 + num2
}

1.3.3.5 接口

當(dāng)一個(gè)對(duì)象類型被多次使用時(shí)，可以有兩種方式來來描述對(duì)象的類型，達(dá)到復(fù)用的目的。

interface 接口名  {
    屬性1: 類型1, 屬性2: 類型2,
}

interface login_form {
    username:string,
    password:string
}

如果兩個(gè)接口之間有相同的屬性或方法，可以將公共的屬性或方法抽離出來，通過繼承來實(shí)現(xiàn)復(fù)用

interface 接口1?extends 接口2來實(shí)現(xiàn)屬性或方法的復(fù)用。

1.3.3.6 泛型

泛型，顧名思義，寬泛的類型，就是類型是不固定的；可以適用于多個(gè)類型，使用類型變量（比如T）幫助我們捕獲傳入的類型，之后我們就可以繼續(xù)使用這個(gè)類型。

泛型函數(shù)

// T 只是一個(gè)名字而已，可以改成其他的，例如 R
 
function fn<T>(value: T): T { return value }
const num = fn<number>(10)

泛型接口
?

interface myinterface<T> {
        list:Array<T> 
}

當(dāng)然ts還有很多內(nèi)容，這里僅僅只是進(jìn)行簡單介紹。

2. 項(xiàng)目配置簡單概述

2.1 eslint 校驗(yàn)代碼工具配置

2.1.1 eslint定義

官網(wǎng)上告訴我們，ESLint 是一個(gè)用來識(shí)別 ECMAScript/JavaScript?并且按照規(guī)則給出報(bào)告的代碼檢測(cè)工具，哦，所以我們可以知道，ESLint 就是一個(gè)工具，而且是一個(gè)用來檢查代碼的工具。

代碼檢查是一種靜態(tài)的分析，常用于尋找有問題的模式或者代碼，并且不依賴于具體的編碼風(fēng)格。對(duì)大多數(shù)編程語言來說都會(huì)有代碼檢查，一般來說編譯程序會(huì)內(nèi)置檢查工具。

JavaScript?是一個(gè)動(dòng)態(tài)的弱類型語言，在開發(fā)中比較容易出錯(cuò)。因?yàn)闆]有編譯程序，為了尋找 JavaScript 代碼錯(cuò)誤通常需要在執(zhí)行過程中不斷調(diào)試。ESLint 這樣的工具可以讓程序員在編碼的過程中發(fā)現(xiàn)問題，而不是在執(zhí)行的過程中發(fā)現(xiàn)問題。

2.1.2 eslint安裝

安裝eslint

pnpm i eslint -D

生成配置文件:.eslint.cjs

npx eslint --init

2.2 prettier格式化工具配置

2.2.1 prettier 定義

有了eslint，為什么還要有prettier？eslint針對(duì)的是javascript，他是一個(gè)檢測(cè)工具，包含js語法以及少部分格式問題，在eslint看來，語法對(duì)了就能保證代碼正常運(yùn)行，格式問題屬于其次；

而prettier屬于格式化工具，它看不慣格式不統(tǒng)一，所以它就把eslint沒干好的事接著干，另外，prettier支持包含js在內(nèi)的多種語言?？偨Y(jié)起來，eslint和prettier這倆兄弟一個(gè)保證js代碼質(zhì)量，一個(gè)保證代碼美觀。

2.2.2 prettier安裝

pnpm install -D eslint-plugin-prettier prettier eslint-config-prettier

2.3?stylelint 配置

2.3.1 stylelint定義

stylelint為css的lint工具?？筛袷交痗ss代碼，檢查css語法錯(cuò)誤與不合理的寫法，指定css書寫順序等。

2.3.2 scss 安裝stylelint依賴

項(xiàng)目中使用scss作為預(yù)處理器，安裝以下依賴：

pnpm add sass sass-loader stylelint postcss postcss-scss postcss-html stylelint-config-prettier stylelint-config-recess-order stylelint-config-recommended-scss stylelint-config-standard stylelint-config-standard-vue stylelint-scss stylelint-order stylelint-config-standard-scss -D

2.4?husky配置

2.4.1 husky定義

在上面我們已經(jīng)集成好了我們代碼校驗(yàn)工具，但是需要每次手動(dòng)的去執(zhí)行命令才會(huì)格式化我們的代碼。如果有人沒有格式化就提交了遠(yuǎn)程倉庫中，那這個(gè)規(guī)范就沒什么用。所以我們需要強(qiáng)制讓開發(fā)人員按照代碼規(guī)范來提交。

要做到這件事情，就需要利用husky在代碼提交之前觸發(fā)git hook(git在客戶端的鉤子)，然后執(zhí)行pnpm run format來自動(dòng)的格式化我們的代碼。

2.4.2 husky 安裝

安裝husky

pnpm install -D husky

執(zhí)行

npx husky-init

會(huì)在根目錄下生成個(gè)一個(gè).husky目錄，在這個(gè)目錄下面會(huì)有一個(gè)pre-commit文件，這個(gè)文件里面的命令在我們執(zhí)行commit的時(shí)候就會(huì)執(zhí)行。

3.項(xiàng)目集成

3.1 集成element-plus

element-plus基于 Vue 3，面向設(shè)計(jì)師和開發(fā)者的組件庫。

3.1.1 安裝

安裝element-plus

pnpm install element-plus

安裝組件庫

pnpm install element-plus @element-plus/icons-vue

3.1.2 應(yīng)用

入口文件main.ts全局安裝element-plus

import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
import elementplus from 'element-plus'
import 'element-plus/dist/index.css'
const app=createApp(App)
app.use(elementplus).mount('#app')

組件使用

<script setup lang="ts">
 import {Plus} from '@element-plus/icons-vue'
</script>

<template>
  <div>
    <el-button type="primary" :icon="Plus">hello</el-button>
  </div>

</template>

3.2?src別名的配置

在開發(fā)項(xiàng)目的時(shí)候文件與文件關(guān)系可能很復(fù)雜，因此我們需要給src文件夾配置一個(gè)別名。

// vite.config.ts
import {defineConfig} from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path'
export default defineConfig({
    plugins: [vue()],
    resolve: {
        alias: {
            "@": path.resolve("./src") // 相對(duì)路徑別名配置，使用 @ 代替 src
        }
    }
})

TypeScript 編譯配置

// tsconfig.json
{
  "compilerOptions": {
    "baseUrl": "./", // 解析非相對(duì)模塊的基地址，默認(rèn)是當(dāng)前目錄
    "paths": { //路徑映射，相對(duì)于baseUrl
      "@/*": ["src/*"] 
    }
  }
}

3.3 Mock

3.3.1 Mock 定義

Mock測(cè)試就是在測(cè)試過程中，對(duì)于某些不容易構(gòu)造或者容易獲取的對(duì)象，用一個(gè)虛擬的對(duì)象來創(chuàng)建以便測(cè)試的測(cè)試方法。
Mock可以模擬一個(gè)http接口的后臺(tái)響應(yīng)，就這么簡單，可以模擬request、response。

3.3.2 Mock 使用場(chǎng)景

1.調(diào)用第三方系統(tǒng)而無法給客戶搭建一套演示環(huán)境
2.調(diào)用第三方系統(tǒng)而無法進(jìn)行穩(wěn)定的開發(fā)測(cè)試
3.調(diào)用第三方系統(tǒng)而無法進(jìn)行自己系統(tǒng)的性能測(cè)試
4.后端未完成接口開發(fā)，前端要先一步開發(fā)
5.真實(shí)場(chǎng)景的返回值覆蓋不了測(cè)試場(chǎng)景

3.3.3 安裝和測(cè)試

安裝依賴

pnpm install -D vite-plugin-mock@2.9.6 mockjs

在 vite.config.ts 配置文件啟用插件。

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path'
import {viteMockServe} from 'vite-plugin-mock'


export default ({ command })=> {
  return {
    plugins: [
      vue(),
      viteMockServe({
        localEnabled: command === 'serve',
      }),
    ],
  }
}

在根目錄創(chuàng)建mock文件夾:去創(chuàng)建我們需要mock數(shù)據(jù)與接口，在mock文件夾內(nèi)部創(chuàng)建一個(gè)user.ts文件

//用戶信息數(shù)據(jù)
function createUserList() {
    return [
        {
            username: 'admin',
            password: '111111',
        },
        {
            username: 'system',
            password: '111111',
        },
    ]
}

export default [
    // 用戶登錄接口
    {
        url: '/user/login',//請(qǐng)求地址
        method: 'post',//請(qǐng)求方式
        response: ({ body }) => {
            //獲取請(qǐng)求體攜帶過來的用戶名與密碼
            const { username, password } = body;
            //調(diào)用獲取用戶信息函數(shù),用于判斷是否有此用戶
            const checkUser = createUserList().find(
                (item) => item.username == username && item.password == password,
            )
            //沒有用戶返回失敗信息
            if (!checkUser) {
                return { code: 201, data: { message: '賬號(hào)或者密碼不正確' } }
            }
            //如果有返回成功信息
            const { token } = checkUser
            return { code: 200, data: {message: '登錄成功'}  }
        },
    },

]

最后就可以通過axios進(jìn)行測(cè)試。

3.4 axios封裝

在開發(fā)項(xiàng)目的時(shí)候避免不了與后端進(jìn)行交互,因此我們需要使用axios插件實(shí)現(xiàn)發(fā)送網(wǎng)絡(luò)請(qǐng)求。在開發(fā)項(xiàng)目的時(shí)候我們經(jīng)常會(huì)把a(bǔ)xios進(jìn)行二次封裝。

1:使用請(qǐng)求攔截器，可以在請(qǐng)求攔截器中處理一些業(yè)務(wù)(開始進(jìn)度條、請(qǐng)求頭攜帶公共參數(shù))

2:使用響應(yīng)攔截器，可以在響應(yīng)攔截器中處理一些業(yè)務(wù)(進(jìn)度條結(jié)束、簡化服務(wù)器返回的數(shù)據(jù)、處理http網(wǎng)絡(luò)錯(cuò)誤)

import axios from "axios";
import { ElMessage } from "element-plus";
//創(chuàng)建axios實(shí)例
let request = axios.create({
    baseURL: import.meta.env.VITE_APP_BASE_API,
    timeout: 5000
})
//請(qǐng)求攔截器
request.interceptors.request.use(config => {
    return config;
});
//響應(yīng)攔截器
request.interceptors.response.use((response) => {
    return response.data;
}, (error) => {
    //處理網(wǎng)絡(luò)錯(cuò)誤
    let msg = '';
    let status = error.response.status;
    switch (status) {
        case 401:
            msg = "token過期";
            break;
        case 403:
            msg = '無權(quán)訪問';
            break;
        case 404:
            msg = "請(qǐng)求地址錯(cuò)誤";
            break;
        case 500:
            msg = "服務(wù)器出現(xiàn)問題";
            break;
        default:
            msg = "無網(wǎng)絡(luò)";

    }
    ElMessage({
        type: 'error',
        message: msg
    })
    return Promise.reject(error);
});
export default request;

3.5 集成Sass

3.5.1 sass介紹

Sass?是一種 CSS 的預(yù)編譯語言。它提供了?變量（variables）、嵌套（nested rules）、?混合（mixins）、?函數(shù)（functions）等功能，并且完全兼容 CSS 語法。Sass 能夠幫助復(fù)雜的樣式表更有條理，并且易于在項(xiàng)目內(nèi)部或跨項(xiàng)目共享設(shè)計(jì)。

3.5.2 安裝

pnpm install sass sass-loader

但是你會(huì)發(fā)現(xiàn)在src/styles/index.scss全局樣式文件中沒有辦法使用變量，因此需要給項(xiàng)目中引入全局變量。在style/variable.scss創(chuàng)建一個(gè)variable.scss文件！里面存放全局變量，然后在vite.config.ts中配置如下：
?

export default defineConfig((config) => {
	css: {
      preprocessorOptions: {
        scss: {
          javascriptEnabled: true,
          additionalData: '@import "./src/styles/variable.scss";',
        },
      },
    },
	}
}

配置完畢你會(huì)發(fā)現(xiàn)scss提供這些全局變量可以在組件樣式中使用了。

3.5.3 sass語法

變量　

?在sass中我們可以把反復(fù)使用的css屬性定義成變量，然后通過變量名去引用他們，從而不用重復(fù)書寫這個(gè)屬性值，使用$符號(hào)定義變量。在sass變量名中的中劃線和下劃線是等同的，不做區(qū)分

$highlight-border: 1px solid red;

普通嵌套

　sass提供了一種嵌套式寫法，只需寫一次且可讀性更高

 div{
        h1{
            color:$red;
        }
    }

偽類選擇器

當(dāng)我們使用到偽類選擇器的時(shí)候

article a {
    color: blue;
    :hover { color: red }
}

　編譯后的css代碼是這樣子的

article a {
  color: blue;
}
article a :hover {
  color: red;
}

這時(shí)候sass就提供了&給我們使用，&代表的是我們父類的選擇器，這里的&代表的就是article a，我們可以把sass代碼寫成這樣

article a {
    color: blue;
    &:hover { color: red }
}

混合器mixin

我們可以用@mixin標(biāo)識(shí)符定義一大段的css樣式，然后在不同地方用@include重復(fù)復(fù)用它

@mixin alert {
    background-color: yellow;
    color: red;
}
    h1{
        @include alert
    }

　混合器支持像函數(shù)一樣進(jìn)行參數(shù)傳遞，來達(dá)到模塊定制的功能

@mixin alert($text-color,$backgroud-color) {
    background-color: $backgroud-color;
    color: $text-color;
}
    h1{
        @include alert(red,blue)
    }

繼承

繼承是SASS中非常重要的一個(gè)特性，可以通過@extend指令在選擇器之間復(fù)用CSS屬性，并且不會(huì)產(chǎn)生冗余的代碼。

@mixin alert($text-color,$backgroud-color) {
    background-color: $backgroud-color;
    color: $text-color;
}
    h1{
        @include alert(red,blue)
    }
    h2{
        @extend h1
    }

@import

　sass可以通過@import的形式導(dǎo)入其他sass文件，達(dá)到模塊化的效果,　那些專門供別的sass文件import的文件被稱為局部文件，sass有個(gè)特殊的約定為這些文件命名。那就是以下劃線開頭，在引入的時(shí)候還可以省略下劃線。舉例來說，你想導(dǎo)入styles/_a.scss這個(gè)局部文件里的變量，你只需在樣式表中寫@import?"styles/a"。

這篇文章到此結(jié)束，由于篇幅問題其中的很多內(nèi)容也是僅僅簡單的介紹一下比較常用的內(nèi)容，后面會(huì)進(jìn)行拆分對(duì)每一個(gè)模塊內(nèi)容進(jìn)行詳細(xì)的介紹和代碼實(shí)戰(zhàn)。

Vue3+Vite+TypeScript常用項(xiàng)目模塊詳解

到了這里，關(guān)于Vue3+Vite+TypeScript常用項(xiàng)目模塊詳解的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！