このプロジェクトは、Dewu APPのユーザーログイン/登録、製品リスト、製品詳細ページ、製品の注文および支払い機能を実現し、最後にプロジェクトをパッケージ化することにより、完全なプロジェクト開発を完了します。
このプロジェクトから学べることは次のとおりです。

プロジェクトに必要な基本パッケージを参照する方法や、標準化されたプロジェクトに同意する方法など、プロジェクトを構築する方法
ルーティング構成
共通のコンポーネントを開発する
axiosを使用してバックエンドインターフェースを呼び出す
サードパーティのライブラリを見つけて使用する
パッケージ化、公開、環境展開
に興味のある方は、読み続けてください。すべて更新し
ます。このプロジェクトの機能は、主に3つの部分で構成されてい
ます。1。APPアカウントの登録とログイン
2.製品リストの閲覧と製品の詳細ブラウジング
3.商品の購入と支払い

登録
APPに入る新規ユーザーは、最初のページの「ユーザー登録」ボタンを選択してページを登録し、携帯電話番号を使用して登録できます

ここに画像の説明を挿入
ログイン
APPを入力した後、古いユーザーは[ユーザーログイン]->[ログイン]ページ->アカウントパスワードを入力して製品

リスト
を入力します。ログインに成功すると、製品リストのページに入り、ここに画像の説明を挿入
製品の詳細を参照できます。
をクリックします。製品リストの製品をクリックして、製品の詳細ページにアクセスします。製品の詳細を表示します。

注文
する商品の詳細ページを入力し、詳細ページの下部にある[今すぐ購入]をクリックすると、商品サイズの選択ボックスがポップアップし、サイズを選択して注文確認ページに入り、[注文を送信]をクリックして支払います
ここに画像の説明を挿入

支払い支払い
後、支払い成功ページと支払い失敗ページにジャンプします
ここに画像の説明を挿入

プロジェクトを作成する

vscodeでプロジェクトを開始します

プロジェクトを開く
ターミナル（Mac）またはCMD（Windows）でプロジェクトを作成した後、vscodeでプロジェクトを直接開くことができます（注：npminstallおよびnpmrun devはまだ実行されていません）
オープンターミナル
ターミナルでコマンドを実行
します。依存関係のダウンロードコマンドを実行し、プロジェクトコマンドを開始し

ます。依存関係をインストールします。プロジェクト
のルートディレクトリに移動します。

cd dewu-web

ローカルへの基本的な依存関係をダウンロードする

新しい依存関係を追加したり、別のコードをプルしたりするたびに、次のコマンドを実行します

npmインストール
または
yarn

プロジェクトを開始します

npmrundev
またはyarndev

ルートを追加

ルーティングのインストール
Scaffoldingviteはデフォルトではルーターをインストールしません。自分でインストールし、プロジェクトのルートディレクトリで実行する必要があります。

npm install vue-router@next
またはyarnaddvue-router @ next

ルーティング構成

ルーティングファイルを
作成するsrcディレクトリに新しいルーターフォルダを作成し、その中にindex.jsファイルを追加します

// src/router/index.js
import {
    
     createRouter, createWebHistory } from "vue-router";

const routes = [
  // 待添加路由
];

const router = createRouter({
    
    
  history: createWebHistory(),
  routes
});

export default router;

ルートをロード
し、main.jsファイルにルートをインポートします

// main.js
import {
    
     createApp } from "vue";
import App from "./App.vue";
import router from "./router/index";

createApp(App).use(router).mount("#app");

パスエイリアス

開発では、インポートされたファイルパスが非常に深い場合や、次のパスのようにファイル名が非常に長い場合がよくあります。

「…/…/components/ nav/Index.vue」からホームをインポートします。

現時点では、自動コードプロンプトに似たものを使用して、パスを自動的に導入できるようにしたいと考えています。この機能は使用できますが、手動で構成する必要があります。

パスエイリアスの設定パスエイリアス
を使用すると、別れを告げることができます.../operation
ルートディレクトリのvite.config.jsファイルに次のコードを追加します

import {
    
     defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
//  不要忘记引入path库
import path from "path";

// https://vitejs.dev/config/
export default defineConfig({
    
    
 resolve: {
    
    
   //   路径别名选项
   alias: [
     {
    
    
       find: "@", // 当在你的路径中找到@ 就用下面replacement路径替换
       replacement: path.resolve(__dirname, "src") // 拼接根路径
     }
   ]
 },
 plugins: [vue()]
});

プロジェクトを再開した後、記事の冒頭のパスを次のように紹介できます

「@/components / nav/Index.vue」からホームをインポートします。

これまでのところ、パス2の自動プロンプト機能は実装していません
。構成パスの自動プロンプト
ルートディレクトリの下に新しいjsconfig.jsonを作成し、次のコードを入力します

{
    
    
  "compilerOptions": {
    
    
    "baseUrl": "./",
    "paths": {
    
    
      "@/*": ["src/*"] // 匹配src目录下的所有目录
    }
  },
  "exclude": ["node_modules", "dist"]
}

このように、vscodeを再起動した後、再試行してパスをインポートすると、コードの自動プロンプト機能が実現されます。
ファイルをインポートするたびに、@で開始する必要があります
。実際、パスエイリアスが完成しました。

静的ページの開発

新しいディレクトリ
を作成する次のディレクトリ構造に示すように、新しいディレクトリを作成する必要があります

。index.vueに基本的なコードを追加します。

src
 |__pages
   |__products
     |__index.vue

index.vueに基本的なコードを追加します

<template>商品列表</template>

<script setup></script>

<style scoped></style>

ルートにページを
追加src/router/index.jsファイルの下のルートリストにルートを追加

import {
    
     createRouter, createWebHistory } from "vue-router";

const routes = [
  {
    
    
    path: "/products",
    name: "products",
    alias: "/",
    component: () => import("@/pages/products/index.vue")
  }
];

const router = createRouter({
    
    
  history: createWebHistory(),
  routes
});

export default router;

エイリアスはルーティングエイリアスであり、ルーティングにニックネームを付けるのと同じです。次の2つの方法で製品ページにアクセスできますか？

http：// localhost：3000 / products
http：// localhost：3000 /

現時点では、router-view
が追加されていないため、実際に製品ページにアクセスすることはできません。router-viewタグをApp.vueに追加して、対応するルーティングコンポーネントを表示します。

<template>
  <!-- 添加router-view -->
  <router-view />
</template>

<script setup></script>

<style>
  body {
      
      
    /* 去除body的默认margin */
    margin: 0;
  }
  #app {
      
      
    font-family: Avenir, Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: center;
    color: #2c3e50;
    /* 删除margin-top */
  }
</style>

構成できるようになったので、静的ページを開発できます
ここに画像の説明を挿入

注：実際、製品リストの製品は、小さな製品グリッドを開発するだけで済みます。次の章では、バックエンドから要求されたデータに従って、他の製品を循環的にレンダリングできます。

ここに画像の説明を挿入
これはこれまでに作成されるファイルです

axiosパッケージ

Axiosの公式な説明は次のとおりです。AxiosはpromiseベースのHTTPライブラリであり、ブラウザのnode.jsで使用できます。
その機能は、バックエンドインターフェイスを呼び出してデータを取得することです。

Axiosをインストールする
には、ターミナルで次のコマンドを入力します

npm install axios@next
またはyarnaddaxios @ next
@nextは、インストールされた依存関係が最新バージョンであることを確認できます

インターフェイス呼び出し関数をカプセル化する

axiosは、次のような基本的なgetおよびpostリクエストをサポートします

import axios from "axios";
// get请求
const res = await axios.get(url, {
    
    
  // 参数对象
});
// post请求
const res = await axios.post(url, {
    
    
  // 参数对象
});

ただし、この呼び出し方法は十分に普遍的ではないため、プロジェクトでは、要求を均一に呼び出すメソッドにカプセル化し
ます。srcディレクトリに新しいUtilsフォルダーを作成し、http.jsファイルを追加します
。次を追加します。ファイルへのコード

import axios from "axios";

axios.defaults.baseURL = import.meta.env.VITE_BASE_URL;
//这段代码的意思就是从项目根目录中的.env文件中获取VITE_BASE_URL字段的值，这个字段要以VITE_开头，否则无法识别
//.env文件用于配置通用字段，方便以后同意更改，在目录下新建.env文件要
//>VITE_BASE_URL=https://www.fastmock.site/mock/c3af16c01eaad121c58feccb492a088c/f8
axios.defaults.timeout = 5000; // 请求过期时间5s

const requests = async ({
    
    
  url,
  method = "get", // 请求方法 get、post 默认为get
  params = {
    
    }, // get请求参数
  data = {
    
    } // post请求参数
} = {
    
    }) => {
    
    
  method = method.toLocaleLowerCase();
  const res = await axios.request({
    
     method, url, params, data });
  return res.data;
};

export default requests;

呼び出し元のインターフェイス
axiosがパッケージ化されたら、インターフェイスを呼び出して製品のリストを取得できます。
プロジェクトをより整理するために、リクエストインターフェイスの機能を一律に管理
し、srcに新しいAPIフォルダーを作成する必要があります。ディレクトリ。このフォルダは、APIを統一された方法で管理するために使用されます。これは、ユーザーなど、さまざまな種類のインターフェイスがあるためです。商品。ログインなど。したがって、各.jsファイルはインターフェースの分類です。
たとえば、インターフェースを呼び出して製品リストを取得するため、インターフェースを呼び出すこのメソッドはproduct.jsファイルに配置する必要があります。
新しい製品を作成します。 jsファイルと次のコードを入力します

// /src/api/product.js
import requests from "@/utils/http";

async function queryProducts({
     
      url } = {
     
     }) {
    
    
  const result = await requests({
    
    
    url: url,
    method: "GET"
  });
  return result && result.data;
}

export {
    
     queryProducts };

最後に、データを取得するには、.vueファイルでqueryproductsjを呼び出すだけです。

// src/pages/product/index.vue

<script setup>
  import {
    
     onMounted } from "@vue/runtime-core";
  import {
    
     queryProducts } from "@/api/product";

  onMounted(async () => {
    
    
    const res = await queryProducts({
    
     url: "/get/products" });
    console.log(res);
  });
</script>

事故がなければ、コンソールに印刷されたデータが表示されます。そうでない場合は、コードを注意深く確認してください。

axiosをカプセル化するときは、非常に詳細な、より具体的な指示をいくつか作成します。

axiosをインストールするときは、このコマンドを使用しますyarn add axios @ next

axiosのカプセル化srcディレクトリに新しいutilsディレクトリを作成し、このディレクトリに新しいhttp.jsファイルを作成して、axiosのカプセル化を完了します。httpをカプセル化するためのbaseUrlはVITE_BASE_URL = https：//www.fastmock.site/mock/です。 c3af16c01eaad121c58feccb492a088c / f8 //このリンクは、ルートディレクトリに新しい.envファイルを作成し、その中にリンクを貼り付けます

コモディティAPIを実装します。srcディレクトリに新しいapiディレクトリを作成し、変更されたディレクトリに新しいproduct.jsファイルを作成します。このファイルにアイテムをリクエストするためのAPIを記述します

/src/products/index.vueファイルのAPIを呼び出して、製品をリクエストするAPIを使用してデータリクエストを実装します

apiデータを使用してデッドデータを置き換えます。これにより、インターフェースから要求されたデータを使用してdata.jsの以前のデータを置き換え、ページレンダリングを実現できます。

詳細ページにジャンプ

次のディレクトリ構造に従って、新しい製品の詳細ページを作成します
ここに画像の説明を挿入

ルートを登録
する詳細ページのルートをsrc/router/index.jsフォルダーに登録します

const routes = [
 {
    
    
   path: "/products",
   name: "products",
   alias: "/",
   component: () => import("@/pages/products/index.vue")
 },
 // 注册详情页路由
 {
    
    
   path: "/product-detail",
   name: "product-detail",
   component: () => import("@/pages/product-detail/index.vue")
 }
];

詳細
ページにジャンプリストページにジャンプメソッドを追加し、リスト内の各グリッドをクリックして、詳細ページにジャンプします

<script setup>
  import {
    
     onMounted, ref } from "vue";
  import {
    
     queryProducts } from "@/api/product";
  import {
    
     useRouter } from "vue-router";

  const products = ref([]);
  const router = useRouter();

  onMounted(async () => {
    
    
    products.value = await queryProducts({
    
     url: "/get/products" });
  });

  function getImgUrl(imgUrl) {
    
    
    return imgUrl.split(";")[0];
  }

  function goDetail(id) {
    
    
    router.push({
    
     path: "/product-detail", query: {
    
     productId: id } });
  }
</script>

詳細な手順

製品詳細ページを追加します。src / pagesディレクトリに新しいproduct-detailディレクトリを作成し、このディレクトリに新しいIndex.vueを作成して、基本コードを入力します
<template>商品详情页面</template>  <script setup></script>   <style lang="scss" scoped></style>
製品詳細ページルートを登録するrouter/index.jsファイルのルートリストに製品詳細ページルートを追加します

ページジャンプ。クリックイベントを商品リストに追加して、各グリッドをクリックした後に商品の詳細ページにジャンプできるようにします。商品の詳細ページにジャンプするときは、パラメーターを渡す必要があります。パラメーターは商品IDで、productIdという名前を付けることができます。

更新を続けています...（明日、データの取得やカルーセル画像の作成など、製品の詳細ページの開発を更新します）ソースコードが必要な場合は、私を追加して入手できます

vueの使用を開始し、スタートアッププロジェクトから開始し、Dewuアプリのユーザーにログインします