序文
フロントエンドの技術が更新されるにつれ、プログラマーの技術スタックもそれに追いついていかなければならず、本来は横になりたかったのですが、意外と突き飛ばされてしまいます。
先月、開発チームは、開発テクノロジ スタック vue2 を vue3 に置き換えるという新しいプロジェクト要件を受け取りました。準備ができていない編集者は混乱しました。なぜ変更するだけですか？事前の通知も勉強する時間もありません。とりあえず始めてみませんか? とんでもない0.0ですね！
仕方なく、Vue3に詳しい同僚と一緒に開発することになり、同僚が書いたモジュールを参考に開発したところ、一部の書き方が違う以外はほぼ同じであることが分かりました。これに気づき、パニックになるのをやめ、開発をしながら学習しました。プロジェクトの開発が完了した後、プロジェクトをゼロから立ち上げて開発に入るまでにどのような準備が必要かを意図的に時間をかけて理解しましたが、プロジェクトは仲間が構築したフレームワークとして開始されたため、参加するにはページを書くだけで済みました。今回は合格しました。同僚に尋ね、自分で考え出して、ほとんどのプロジェクトで使用される最も基本的なフレームワークのセットを考え出します。
Vue3プロジェクトの基本フレームワーク構築プロセス
関連する公式文書の一部
1. プロジェクトを作成する
まず vite を使用してプロジェクトを初期化し、次に初期化プロセス中に vue+typeScript を選択します。
npm init vite
2. 依存関係をインストールする
上記のプロジェクトの作成方法は従来の方法とは異なることに注意してください。依存関係は自動的にインストールされません。つまり、node_modules パッケージがありません。依存関係を自分で手動でインストールする必要があります。これが、vite を使用してプロジェクトの作成は非常に速いため、次を使用してnpm i依存関係をインストールする必要があります。
npm i
依存関係を初期化した後、プロジェクト開発でよく使用される基本的な依存関係である vue-router、vuex、および axios をインストールします。
npm i -save vue-router vuex axios
開発に必要な依存関係をインストールします。私はlessを使うことが多いのでsassに慣れている方は交換しても大丈夫です。
npm i -D less less-loader
3.ts グローバル構成
tsconfig.json に構成、グローバル タイプ、インターフェイスを追加します。これは構成プロジェクトでコンパイルする必要があるファイルです
"include": [
"src/**/*.ts",
"src/**/*.d.ts",
"src/**/*.tsx",
"src/**/*.vue",
"types/**/*.d.ts",
"types/**/*.ts"
],
4. プロジェクト パスのエイリアスを構成する
「@/」を介してファイルをインポートするときに ts コンパイル エラーを処理するための設定を tsconfig.json に追加します。
"compilerOptions": {
...
"baseUrl": "./",
"paths": {
"@/*": [
"src/*"
],
"#/*": [
"types/*"
]
}
}
「@/」を介してファイルをインポートする際の実行エラーの問題を処理するために、vite.config.ts に設定を追加します。
// 引入path时会标红，需要安装响应的type依赖 npm i @types/node
import * as path from 'path'
// 或 const path = require('path')
export default ({
mode }) => {
return defineConfig({
resolve: {
alias: {
'@': path.join(__dirname, 'src'),
'#': path.join(__dirname, 'types');
}
},
})
}
5. ページフォルダーの作成
src フォルダーの下に views フォルダーを作成し、それをダウンロードして home/index.vue ファイルを作成します。プロジェクトの作成時にはビューがないため、自分で作成する必要があります。もちろん、ページなどの他のセマンティック フォルダーに名前を付けることもできます。
<template>
<div>首页</div>
</template>
<script lang='ts' setup>
import {
reactive, ref, toRefs } from 'vue'
</script>
<style scoped lang="less">
</style>
6. ルーティングの設定
srcフォルダーの下にrouterフォルダーを作成し、その下にindex.tsファイルを作成します。ルーティングの管理に使用されるいくつかの構成項目
//index.ts
import {
createRouter, createWebHashHistory, RouteRecordRaw } from "vue-router"
const routers = [
{
path: '/',
name: 'home',
component: () => import('@/views/home/index.vue'),
},
];
const router = createRouter({
history: createWebHashHistory(),
routes: routers as unknown as RouteRecordRaw[]
})
// 路由守卫
router.beforeEach((to, from, next) => {
next()
})
export default router;
main.ts ファイルに導入して使用します。ここで、app.use(router) を app.mount('#app') の前に記述する必要があることを思い出してください。問題は、アプリを '#pp' にマウントする前に、まずルーターをインストールする必要があることです。 ' タグが付けられていない場合、ルーターは使用できません。
import {
createApp } from 'vue'
import App from './App.vue'
const app = createApp(App);
import router from './router'
// 初始化路由
app.use(router)
app.mount('#app')
上記の app.use(router) が app.mount('#app') の後に記述されている場合、これはルーター内のコンポーネントであるため、ここで使用しても効果はありません。
APP.vue ファイルは、router-view コンポーネントを使用します。
<template>
<router-view />
</template>
<script lang='ts' setup>
</script>
<style scoped lang="less">
</style>
7.vuexの設定
srcフォルダーの下にstoreフォルダーを作成し、その下にindex.tsファイルを作成します。
//index.ts
import {
createStore } from 'vuex'
export const store = createStore({
state() {
return {
}
},
getters: {
},
mutations: {
},
actions: {
},
modules: {
}
})
main.ts ファイルに導入
...
// 初始化vuex
import store from './store'
app.use(store)
8. axios リクエスト インターフェイスをカプセル化し、リクエスト インターセプタを設定します。
srcフォルダーの下にapiフォルダーを作成し、その下にindex.tsファイルとrequest.tsファイルを作成します。
1. request.ts ファイルでリクエスト インターセプターを構成します。
// request.ts
import axios, {
AxiosRequestConfig, AxiosResponse } from "axios";
const service = axios.create({
timeout: 60000,
baseURL: ''
})
// 请求失败回调函数处理
const error = (error: {
request: AxiosRequestConfig, response: AxiosResponse }) => {
if (error.response.status === 401) {
// 登录状态过期或未登录
}
return Promise.reject(error)
}
// 请求前
service.interceptors.request.use((request: AxiosRequestConfig) => {
return request
}, error)
// 响应后
service.interceptors.response.use((response: AxiosResponse) => {
return response
}, error)
export {
service as axios }
2. src フォルダーの下にインターフェースフォルダーを作成し、その下に request.ts ファイルを作成し、リクエストインターフェースに必要なタイプを構成します。
// request.ts
/** 普通数据响应 */
export interface ResDataStruct<T = any> {
/** 响应内容体 */
data: T,
/** api响应信息 */
message: string,
/** api响应编码 */
code: number,
/** api接口返回是否成功 */
success: boolean,
/** api接口查询数据库总数 */
total: number | string | null,
}
3. axios リクエストをindex.ts ファイルにカプセル化します。axiosリクエストをカプセル化する方法は色々ありますが、ここでは管理しやすいと思うオブジェクトインスタンスを作成してカプセル化する方法を使用します。より良い梱包方法がある場合は、以下にコメントを残すことができます。
// index.ts
import {
ResDataStruct } from "@/interface/request";
import {
axios } from "@/utils/request"
export const httpApi = new class {
constructor() {
// 请求接口路径
this.loginApi = '/login/login' // 登录
}
Login( data: Object)){
return axios<ResDataStruct<T>>({
url: this.loginApi, method: "post", data })
}
}
9. グローバル設定ファイルの作成
src フォルダーの下に追加の構成フォルダーをいくつか作成し、対応するフォルダーの下にindex.ts ファイルを作成します。のように：
- フック (グローバル共有関数の設定)
- インターフェース (グローバルインターフェースタイプを定義)
- タイプ (グローバルタイプの別名を定義)
もちろん、ここでのこれらの構成はデータの管理を容易にするためのものであり、後続の反復での保守が容易になるように、これらを明確に区別することを好みます。
10. 拡張
基本的なフレームワークはここで構築できます。ここにいくつかの拡張プラグインがあります。必要に応じて自分で追加できますが、ほとんどのプロジェクトで必要になると思います。
1. vite プラグイン @vitejs/plugin-legacy の機能は、パッケージ化されたファイルに対する従来のブラウザ互換性サポートを提供することです。
// npm 安装依赖
npm i -save @vitejs/plugin-legacy
// vite.config.ts
import legacy from '@vitejs/plugin-legacy'
export default defineConfig({
plugins: [
legacy({
targets: ['defaults', 'not IE 11'],
additionalLegacyPolyfills: ['regenerator-runtime/runtime']
}),
...
],
})
2. vite プラグイン vite-plugin-compression の機能は、vite-plugin-compress拡張バージョンである gzip 圧縮を実行することです。
// npm 安装依赖
npm i -save vite-plugin-compression
// vite.config.ts
import viteCompression from 'vite-plugin-compression'
export default defineConfig({
plugins: [
viteCompression(),
...
],
})
3. vite プラグインの役割 vite-plugin-rsw - vite に基づいて実装された webAssembly プラグインで、ホット アップデートとわかりやすいエラー プロンプトをサポートします。
// npm 安装依赖
npm i -save vite-plugin-rsw
4. vite プラグイン @vitejs/plugin-vue-jsx の機能は、JSX ファイルをコンパイルすることです
// npm 安装依赖
npm i -save @vitejs/plugin-vue-jsx
// vite.config.ts
import vueJsx from '@vitejs/plugin-vue-jsx'
export default defineConfig({
plugins: [
vueJsx(),
...
],
})
具体的な説明は以上です。ご質問やご不明な点がございましたら、以下にメッセージを残すか、プライベートメッセージを送信してください。役に立った場合は、「いいね！」と保存をお願いします。よろしくお願いします。