vite2.0+vue3 モバイルプロジェクトの詳細な説明

npm init @vitejs/app my-vue-app --template vue-ts

npm インストール vue-router@4 --save

「vue-router」から createRouter、createWebHashHistory、RouteRecordRaw をインポートします。
const ルート: Array<RouteRecordRaw> = [
 {
 パス： "/"、
 名前: "ホーム",
 メタ: {
  タイトル:「ホーム」、
  キープアライブ: 真
 },
 コンポーネント: () => import("../views/Home/index.vue"),
 },
 {
 パス: "/login",
 名前: "ログイン",
 メタ: {
  タイトル: 「ログイン」、
  キープアライブ: 真
 },
 コンポーネント: () => import("../views/Login/index.vue"),
 },
];
const ルーター = createRouter({
 履歴: createWebHashHistory(),
 ルート
});
デフォルトルーターをエクスポートします。

'vue' から {createApp} をインポートします。
'./App.vue' からアプリをインポートします。
「./router」からルーターをインポートします。createApp(App)
.use(ルーター)
.mount('#app')

npm i vuex@next --save

「vuex」から createStore をインポートします。
エクスポートデフォルトcreateStore({
 州： {
 リストデータ:{1:10},
 番号:10
 },
 突然変異:
 setData(状態、値){
  state.listData=値
 },
 addNum(状態){
  状態.num = 状態.num + 10
 }
 },
 アクション: {
 setData(コンテキスト、値){
  context.commit('setData',値)
 },
 },
 モジュール: {}
});

'vue' から {createApp} をインポートします。
'./App.vue' からアプリをインポートします。
「./router」からルーターをインポートします。
「./store」からストアをインポートします。
アプリを作成します(アプリ)
.use(ルーター)
.use(ストア)
.mount('#app')

npm と vant@next -S

'vue' から {createApp} をインポートします。
'./App.vue' からアプリをインポートします。
「./router」からルーターをインポートします。
「./store」からストアをインポートします。
import 'vant/lib/index.css'; // グローバルインポートスタイル createApp(App)
.use(ルーター)
.use(ストア)
.use(アリ)
.mount('#app')

npm インストール postcss-pxtorem -D

モジュール.エクスポート = {
 「プラグイン」: {
 "postcss-pxtorem": {
  ルート値: 37.5, 
  // Vant 公式ルートフォントサイズは 37.5 です
  プロパティリスト: ['*'],
  セレクタブラックリスト: ['.norem'] 
  // .norem- で始まるクラスを除外し、rem 変換を実行しません}
 }
}

// rem 比例適応設定ファイル // 基本サイズ const baseSize = 37.5 
// この値は postcss.config.js ファイルの rootValue と一致している必要があることに注意してください // rem 関数を設定する function setRem () {
 // 現在のページ幅は 375 幅の拡大縮小率を基準としており、必要に応じて変更できます。一般的に、設計図は 750 幅です (設計図を入手して、都合に合わせて変更できます)。
 定数スケール = document.documentElement.clientWidth / 375
 // ページのルート ノードのフォント サイズを設定します ("Math.min(scale, 2)" は最大拡大率が 2 であることを意味します。実際のビジネス ニーズに応じて調整できます)
 document.documentElement.style.fontSize = baseSize * Math.min(scale, 2) + 'px'
}
// setRem() を初期化する
// ウィンドウサイズを変更するときに rem をリセットする
window.onresize = 関数 () {
 console.log("実行しました")
 リセット()
}

「./utils/rem」をインポートします

npm i -s アクシオス

「axios」からaxiosをインポートします。
constサービス = axios.create({
 ベースURL、
 タイムアウト: 5000 // リクエストタイムアウト
});
//リクエストを開始する前のインターセプター service.interceptors.request.use(
 設定 => {
 // トークンがある場合はトークンを繰り越す
 定数トークン = window.localStorage.getItem("accessToken");
 if (トークン) {
  config.headers.common.Authorization = トークン;
 }
 設定を返します。
 },
 エラー => Promise.reject(エラー)
);
// レスポンスインターセプター service.interceptors.response.use(
 レスポンス => {
 レスポンスデータを返します。
 
 応答ステータスが 200 の場合
  Promise.reject(new Error(res.message || "Error")) を返します。
 } それ以外 {
  res を返します。
 }
 },
 エラー => {
 Promise.reject(error) を返します。
 }
);
デフォルト サービスをエクスポートします。

「../utils/request」からリクエストをインポートします。
リクエスト({url: "/profile ",メソッド: "get"})
.then((res)=>{
 コンソール.log(res)
})

'vite' から {defineConfig} をインポートします
'@vitejs/plugin-vue' から vue をインポートします
'path' からパスをインポートします。
 
// https://vitejs.dev/config/
デフォルトのdefineConfigをエクスポートする({
 プラグイン: [vue()],
 base:"./",//パッケージパス解決: {
 エイリアス：{
  '@': path.resolve(__dirname, './src') //エイリアスを設定}
 },
 サーバー: {
 port:4000, //ポートオープン開始: true,
 プロキシ： {
  // オプションの書き込み '/api': 'http://123.56.85.24:5000'//プロキシ URL},
 コア:true
 }
 
})

<script lang="ts">
「vue」からdefineComponentをインポートします。
「vue-router」から useRouter をインポートします。
エクスポートデフォルトdefineComponent({
 設定（） {
 定数ルーター = useRouter();
 const goLogin = () => {
  ルーターをプッシュします。
 };
 戻り値: { goLogin };
 },
});
</スクリプト>
<script setup> <script lang="ts" setup="props"> の記述
「vue-router」から useRouter をインポートします。
定数ルーター = useRouter();
const goLogin = () => {
 ルーターをプッシュします。
};
</スクリプト>

<style vars> の使い方は?
<script lang="ts" setup="props">
定数状態 = リアクティブ({
 色: "#ccc",
});
</スクリプト>
<スタイル>
。文章 {
 色: v-bind("state.color");
}
</スタイル>