現在、gitee、githubを問わず、フロントエンドのオープンソースプロジェクトではVue3+Vite+TypeScript+Pinia+Elementplus+axios+Sass(CSSプリコンパイル言語など)を採用するプロジェクトが増えており、その中には以下のような様々なプロジェクト構成があります。 eslint 検証コードツールの設定さて、フロントエンドプロジェクトの二次開発を行う場合、これらの使い方を知っておく必要があるため、著者は簡単な紹介のためにこの記事を書きました。

1. Vue3+Vite+TypeScriptの概要

1.1 ビュー3

1.1.1 Vue3の概要

Vue.js は、インタラクティブな Web ページやシングルページアプリケーションの構築に使用できるフロントエンド JavaScript フレームワークです。Vue.js 3 は、2020 年 9 月に正式にリリースされた Vue.js フレームワークの最新バージョンです。Vue.js 2 と比較して、Vue.js 3 には次の変更点と改善点があります:
1.パフォーマンスの向上: Vue.js3 はパフォーマンスが最適化されており、応答性の高いシステムを最適化することで、アプリケーションのパフォーマンスを向上させることができます。
2. TypeScript サポートの向上: Vue.js 3 では TypeScript のサポートが向上し、TypeScript サポートが組み込まれています。
3.開発者エクスペリエンスの向上: Vue.js 3 では、テンプレートコンパイラーが大幅にアップグレードされ、すべての元のテンプレートが関数にコンパイルされるようになりました。これは、コンパイルが高速になり、実行時自体の Vue.js への依存性が減少することを意味します。
4.コンポーネント API の向上: Vue.js 3 では、開発者がコンポーネントコードをより簡単かつ柔軟に作成できるようにする、Composition API が導入されました。
5.ツリーシェイキングサポートの改善: Vue.js 3 は、より優れたツリーシェイキング機能をサポートします。これにより、アプリケーションに必要なコードのみを含めることができ、ロード時間とアプリケーションのサイズが大幅に削減されます。

1.1.2 vue3の現状と開発動向

現在、Vue 3 はフロントエンド開発において非常に人気のあるフレームワークの 1 つとなっています。多くの企業や開発者がプロジェクトの開発に Vue 3 を使用しています。Vue 3 の傾向をいくつか示します。

1. TypeScript サポートの向上: Vue 3 では、多くの新しい TypeScript 型定義が導入され、より優れた型チェックと自動補完機能が提供されます。これにより、開発者は TypeScript を使用して Vue アプリケーションを簡単に作成できるようになります。
2.コンポジション API の人気: コンポジション API は、Vue 3 で導入された新しいコンポーネント API であり、開発者がコンポーネントロジックをより適切に整理して再利用するのに役立ちます。ますます多くの開発者が Comboposition API を使用し始めるにつれ、Composition API は Vue 3 開発の重要な部分になるでしょう。
3.パフォーマンスの高速化とパッケージサイズの縮小: Vue 3 では、レンダリング速度の高速化、パッケージサイズの縮小など、多くのパフォーマンスの最適化が導入されています。これらの改善により、Vue 3 はより効率的で信頼性の高いフレームワークとなり、開発者が高品質のアプリケーションをより迅速に構築できるようになります。
4.さらなるコミュニティへの貢献: Vue 3 は広範なコミュニティサポートを受けており、多くの開発者や企業が Vue 3 用の新しいプラグイン、コンポーネント、ツールを開発しています。これにより、Vue 3 の機能と使いやすさがさらに向上します。

1.2 速い

1.2.1 実際的な問題

ブラウザーが ES モジュールをサポートする前は、JavaScript は開発者がモジュール方式で開発するためのネイティブメカニズムを提供していませんでした。これが、私たちが「パッケージ化」の概念に精通している理由です。つまり、ツールを使用してソースコードモジュールを取得、処理し、ブラウザーで実行できるファイルに結合するのです。

時間の経過とともに、 webpack、Rollup 、 Parcelなどのツールが変更され、フロントエンド開発者の開発エクスペリエンスが大幅に向上しました。

しかし、ますます大規模なアプリケーションを構築し始めると、処理する JavaScript コードの量が飛躍的に増加しました。数千のモジュールを含む大規模なプロジェクトはかなり一般的です。JavaScript に基づいて開発されたツールは、パフォーマンスのボトルネックにぶつかり始めます: 通常、開発サーバーの起動には長い時間 (数分も!) かかり、ホットモジュール交換 (HMR) を使用した場合でも、ファイル変更の効果が現れるまでに数秒かかります。ブラウザ。このようなサイクルが延々と続き、フィードバックが遅いと開発者の開発効率や幸福度に大きな影響を与えます。

Vite は、エコシステムの新たな発展を利用して上記の問題を解決することを目指しています。ブラウザは ES モジュールをネイティブにサポートし始め、コンパイル言語で記述される JavaScript ツールがますます増えています。

1.2 vite プロジェクトの構築

NPM の使用:

npm create vite@latest

PNPM の使用:

pnpm create vite

1.3 タイプスクリプト

1.3.1 TypeScript の定義

TypeScript の略称: TS は、JavaScript のスーパーセットです。JS をベースとして、型サポートが JS に追加されます。TypeScript = 型 + JavaScript

1.3.2 TypeScript の基本データ型

以下に示すように:

1.3.3 TypeScript 構文の簡単な紹介

1.3.3.1 プリミティブ型

// 数值类型
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 共用体の種類

let 变量: 类型1 | 类型2 | 类型3 .... = 初始值

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

1.3.3.3 配列の型

let 变量: 类型[] = [值1，...]

let 变量: Array<类型> = [值1，...]


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

1.3.3.4 関数の種類

通常関数: 関数関数名 (パラメータ 1: 型、パラメータ 2: 型): 戻り値の型 { }
アロー関数: const 関数名 (パラメータ 1: 型、パラメータ 2: 型): 戻り値の型 => { }

// 函数声明
function add(num1: number, num2: number): number {
  return num1 + num2
}

// 箭头函数
const add = (num1: number, num2: number): number => {
  return num1 + num2
}

1.3.3.5 インターフェース

オブジェクトタイプが複数回使用される場合、再利用の目的を達成するためにオブジェクトタイプを記述する方法は 2 つあります。

interface 接口名  {
    属性1: 类型1, 属性2: 类型2,
}

interface login_form {
    username:string,
    password:string
}

2 つのインターフェイス間に同じプロパティまたはメソッドがある場合、パブリックプロパティまたはメソッドを抽出し、継承を通じて再利用できます。

インターフェースインターフェース 1 は、インターフェース 2 を拡張して、属性またはメソッドの多重化を実現します。

1.3.3.6 ジェネリックス

名前が示すように、ジェネリックは広範な型であり、型は固定されていません。型変数 (T など) を使用して複数の型に適用でき、受信した型をキャプチャするのに役立ちます。このタイプを使います。

汎用関数

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

汎用インターフェース

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

もちろん、TS にはまだ多くのコンテンツがあります。ここでは簡単に紹介します。

2. プロジェクト構成の概要

2.1 eslint検証コードツールの構成

2.1.1 エスリントの定義

公式ウェブサイトによると、ESLint は ECMAScript/JavaScript を識別し、ルールに従ってレポートを提供するために使用されるコード検出ツールです。ああ、ESLint がツールであり、コードをチェックするためのツールであることがわかります。

コードインスペクションは、問題のあるパターンやコードを見つけるためによく使用される静的分析であり、特定のコーディングスタイルには依存しません。ほとんどのプログラミング言語にはコードチェックがあり、一般にコンパイラにはチェックツールが組み込まれています。

JavaScript は動的で型付けが弱い言語であり、開発時に比較的エラーが発生しやすい言語です。プログラムはコンパイルされていないため、JavaScript コード内のエラーを見つけるために実行中に継続的にデバッグする必要があることがよくあります。ESLint のようなツールを使用すると、プログラマは実行中ではなくコーディング中に問題を発見できます。

2.1.2 eslintのインストール

エスリントをインストールする

pnpm i eslint -D

構成ファイルの生成: .eslint.cjs

npx eslint --init

2.2 よりきれいな書式設定ツールの構成

2.2.1 より分かりやすい定義

eslint では、なぜもっときれいにする必要があるのでしょうか? eslint は、js 構文と少数の形式の問題を含む検出ツールである JavaScript を対象としています。eslint の見解では、正しい構文によってコードの正常な動作が保証され、形式の問題は二の次です。

そして、prettier はフォーマットツールであり、一貫性のないフォーマットを理解できないため、eslint がうまくできなかったことを引き続き実行し、さらに js を含む複数の言語をサポートしています。要約すると、eslint と pretty の 2 つの兄弟は、JS コードの品質とコードの美しさを保証します。

2.2.2 よりきれいなインストール

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

2.3 stylelint 設定

2.3.1 stylelint 定義

stylelintは CSS 用の lint ツールです。cssコードの整形、cssの構文エラーや無理な記述のチェック、cssの書き込み順の指定などが可能です。

2.3.2 scss install stylelint 依存関係

プロジェクトは scss をプリプロセッサとして使用し、次の依存関係をインストールします。

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 ハスキー構成

2.4.1 ハスキーの定義

上記のコード検証ツールを統合しましたが、コードをフォーマットするには毎回手動でコマンドを実行する必要があります。誰かがフォーマットせずにリモートリポジトリに送信した場合、この仕様は役に立ちません。したがって、開発者にコード仕様に従って提出するよう強制する必要があります。

これを行うには、コードが送信される前に husky を使用して git フック (クライアント側の git のフック) をトリガーし、pnpm run format を実行してコードを自動的にフォーマットする必要があります。

2.4.2 ハスキーのインストール

インストールhusky

pnpm install -D husky

埋め込む

npx husky-init

ルートディレクトリ下に.huskyディレクトリが生成され、その下にコミット前ファイルが作成され、コミット実行時にこのファイル内のコマンドが実行されます。

3. プロジェクトの統合

3.1 要素プラスの統合

element-plus は、デザイナーと開発者向けのコンポーネントライブラリである Vue 3 に基づいています。

3.1.1 インストール

エレメントプラスをインストールする

pnpm install element-plus

コンポーネントライブラリをインストールする

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

3.1.2 アプリケーション

エントリーファイル 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エイリアスの設定

プロジェクトを開発する場合、ファイルとファイルの関係が複雑になる場合があるため、srcフォルダーのエイリアスを設定する必要があります。

// 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") // 相对路径别名配置，使用 @ 代替 src
        }
    }
})

TypeScript のコンパイル設定

// tsconfig.json
{
  "compilerOptions": {
    "baseUrl": "./", // 解析非相对模块的基地址，默认是当前目录
    "paths": { //路径映射，相对于baseUrl
      "@/*": ["src/*"] 
    }
  }
}

3.3 モック

3.3.1 モック定義

モックテストは、仮想オブジェクトを使用して、テストプロセス中に構築または入手が容易ではない一部のオブジェクトに対するテストメソッドを作成するテストメソッドです。
Mock は、http インターフェイスのバックグラウンド応答をシミュレートできます。非常にシンプルで、リクエストと応答をシミュレートできます。

3.3.2 モック使用シナリオ

1. 他社システムを利用するとお客様のデモ環境が構築できない
2. 他社システムを利用すると安定した開発・テストができない
3. 他社システムを利用すると自社システムの性能試験ができない
4. バックエンドインターフェイスの開発が完了していないため、フロントエンドを先に開発する必要があります
5. 実シーンの戻り値がテストシーンをカバーできない

3.3.3 インストールとテスト

依存関係をインストールする

pnpm install -D [email protected] 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',
      }),
    ],
  }
}

ルートディレクトリにモックフォルダーを作成します。必要なモックデータとインターフェイスを作成するには、モックフォルダー内に user.ts ファイルを作成します。

//用户信息数据
function createUserList() {
    return [
        {
            username: 'admin',
            password: '111111',
        },
        {
            username: 'system',
            password: '111111',
        },
    ]
}

export default [
    // 用户登录接口
    {
        url: '/user/login',//请求地址
        method: 'post',//请求方式
        response: ({ body }) => {
            //获取请求体携带过来的用户名与密码
            const { username, password } = body;
            //调用获取用户信息函数,用于判断是否有此用户
            const checkUser = createUserList().find(
                (item) => item.username == username && item.password == password,
            )
            //没有用户返回失败信息
            if (!checkUser) {
                return { code: 201, data: { message: '账号或者密码不正确' } }
            }
            //如果有返回成功信息
            const { token } = checkUser
            return { code: 200, data: {message: '登录成功'}  }
        },
    },

]

最後に、axios を通じてテストできます。

3.4 axios パッケージ

プロジェクトを開発する際にはバックエンドとのやり取りが避けられないため、axios プラグインを使用してネットワークリクエストを送信する必要があります。プロジェクトを開発するとき、axios を再パッケージ化することがよくあります。

1: リクエストインターセプターを使用すると、リクエストインターセプターで一部のビジネスを処理できます (進行状況バーの開始、パブリックパラメーターを含むリクエストヘッダー)。

2: レスポンスインターセプターを使用すると、レスポンスインターセプターで一部のビジネスを処理できます (プログレスバーの終わり、サーバーから返されたデータの簡素化、および http ネットワークエラーの処理)。

import axios from "axios";
import { ElMessage } from "element-plus";
//创建axios实例
let request = axios.create({
    baseURL: import.meta.env.VITE_APP_BASE_API,
    timeout: 5000
})
//请求拦截器
request.interceptors.request.use(config => {
    return config;
});
//响应拦截器
request.interceptors.response.use((response) => {
    return response.data;
}, (error) => {
    //处理网络错误
    let msg = '';
    let status = error.response.status;
    switch (status) {
        case 401:
            msg = "token过期";
            break;
        case 403:
            msg = '无权访问';
            break;
        case 404:
            msg = "请求地址错误";
            break;
        case 500:
            msg = "服务器出现问题";
            break;
        default:
            msg = "无网络";

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

3.5 Sassの統合

3.5.1 Sass の概要

Sass は CSS 用にプリコンパイルされた言語です。これは、変数 (変数)、ネストされた (ネストされたルール)、混合 (ミックスイン)、関数 (関数)を提供し、CSS 構文と完全に互換性があります。Sass は、複雑なスタイルシートを整理し、プロジェクト内またはプロジェクト間でデザインを簡単に共有できるようにします。

3.5.2 インストール

pnpm install sass sass-loader

ただし、 src/styles/index.scss グローバルスタイルファイルでは変数を使用する方法がないことがわかります。そのため、プロジェクトにグローバル変数を導入する必要があります。style/variable.scss に variable.scss ファイルを作成します。グローバル変数をそこに保存し、vite.config.ts で次のように設定します。

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

構成後、scss がコンポーネントスタイルで使用できるこれらのグローバル変数を提供していることがわかります。

3.5.3 Sass 構文

変数　

sass では、繰り返し使用される css 属性を変数として定義し、属性値を繰り返し記述しないように変数名で参照し、$ 記号を使用して変数を定義できます。sass 変数名のダッシュとアンダースコアは同等であり、区別されません。

$highlight-border: 1px solid red;

通常のネスト

　Sass は、一度書くだけで済み、より読みやすいネストされた書き込みメソッドを提供します。

 div{
        h1{
            color:$red;
        }
    }

疑似クラスセレクター

疑似クラスセレクターを使用する場合

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

　コンパイルされたCSSコードは次のようになります

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

このとき、sass は使用する & を提供し、 & は親クラスのセレクターを表します。 & は記事 a を表します。次のような sass コードを書くことができます。

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

ミキサー

@mixin 識別子を使用して CSS スタイルの大規模なセクションを定義し、@include を使用してそれを別の場所で再利用できます。

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

　ミキサーは、モジュールのカスタマイズされた機能を実現するための関数のようなパラメーターの受け渡しをサポートしています

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

継承する

継承は SASS の非常に重要な機能であり、冗長なコードを生成することなく @extend ディレクティブを通じてセレクター間で CSS プロパティを再利用できます。

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

@輸入

　Sass は、モジュール効果を達成するために @import の形式で他の sass ファイルをインポートできます。他の sass ファイルによって特別にインポートされたファイルは部分ファイルと呼ばれ、sass にはこれらのファイルの命名に特別な規則があります。つまり、アンダースコアで始めることになりますが、アンダースコアを導入する際にはアンダースコアを省略できます。たとえば、styles/_a.scssこのローカルファイルに変数をインポートしたい場合は、スタイルシートに次のように記述するだけです。@import "styles/a"。

这篇文章到此结束，由于篇幅问题其中的很多内容也是仅仅简单的介绍一下比较常用的内容，后面会进行拆分对每一个模块内容进行详细的介绍和代码实战。

Vue3+Vite+TypeScript共通プロジェクトモジュールの詳細説明