ゼロから、シンプルなショッピングプラットフォームを構築します（12）フロントエンドモール部分

ゼロから、簡単なショッピングプラットフォームを構築します（11）：https：
//blog.csdn.net/time_____/article/details/108447234
プロジェクトのソースコード（継続的な更新）：https：//gitee.com/DieHunter/myCode / tree / master / Shopping

この記事から、フロントエンドモールの開発を紹介します。もちろん、バックエンドの新しいモジュールも一緒に紹介します。
レンダリングアドレス：https：//gitee.com/DieHunter/myCode/tree/master/shopping/pic
レンダリングまた、添付：
ホームページカテゴリショッピングカート私の製品の詳細サブジェクトエリア注文の詳細情報の変更

アップルレットとアプリまたはモバイル端末の違いにより、個人情報ページが変更されました。
この記事では、主に準備作業とプロジェクトの構築について説明します。最初の記事では、Webpackの構成とVueスキャフォールディングツールの構成、およびその他の依存関係について説明します。のインストールの簡単な説明は、準備作業の詳細な紹介と、説明を行うためのプロジェクトの一時的な調整です。

vue init webpack +プロジェクトの名前を使用します（私はここではshopclientであり、名前に大文字を使用することはできません）プロジェクトを初期化します（通常、Enterキーを押して続行し、eslinkとtestでインストールしないことを選択できます）
インストールが完了したら、我々はできるだけで構成しWebPACKを自動的に生成されたconfigフォルダの下に、index.jsの構成では、我々はビルドとDEVのためのWebPACKを使用するときに我々が使用した構成であるここではいくつかの一般的に使用されるものです：。。
DEV属性：proxyTable、開発環境でのプロキシに使用され、クロスドメインを解決し、カスタムインターフェイスリダイレクトを使用します
```
proxyTable: {
        '/testApi':{//代理接口名，请求到/testApi会定向到http://127.0.0.1:1024/testApi下
            target:'http://127.0.0.1:1024',//目标域名
            changeOrigin:true,//是否允许跨域
            pathRewrite:{"^/testApi":''} // 把testApi替换成空
        }
    },
```
ホスト： '127.0.0.1'：ローカル開発プロジェクトサーバーアドレス、127.0.0.1とポート番号を介してプロジェクトホームページにアクセス
ポート：8080：ローカル開発プロジェクトポート、サーバーアドレスと8080を介してプロジェクトホームページにアクセス
autoOpenBrowser：プロジェクトが開発環境でコンパイルされた後プロジェクト
assetsPublicPathをデフォルトのブラウザで自動的に開くかどうか：静的ファイルアドレス（/ staticと記述されている場合）はルートディレクトリ（上記の構成では127.0.0.1：8080 / static）+ / staticは
、パッケージ化後に静的ファイルビルド属性：インデックスにアクセスできますホームページパス
assetsRoot：パッケージ出力パス
productionGzipExtensions：コード圧縮タイプ、通常は['js'、 'css']、パッケージ化後、min.jsとmin.cssに圧縮されます
構成が完了したら、使用されている他の依存関係のダウンロードを開始します。devDependencies：less、less-loader、依存関係：vue-router、axios、crypto-js、mint-ui
次のフォルダを作成します
設定一般により少ない。私はこのようにそれを構成し使用した初期値を。アイコンが使用するアリのアイコンスタイルにフォントとスタイルパッケージをダウンロードします。アニメーションは使用していますAnimate.cssは、とtransition.lessは自分自身によって書かれたナビゲーションスイッチです。遷移アニメーションは、後でグローバルルーティングガードによって切り替えアニメーションが実行されます。initでは、変数は主に初期スタイルに対して宣言され、reset.lessはページのデフォルトスタイルを設定します。
mint-uiを構成し、main.jsでmint-uiとcssを導入し、オンデマンドでコンポーネントを導入します。私のプロジェクトでは、各コンポーネントにオンデマンドで導入します。重複するコードを減らすために、オンデマンドでグローバルに導入することをお勧めします
```
import Vue from 'vue'
import 'mint-ui/lib/style.css'
import MintUI from 'mint-ui'

Vue.use(MintUI);
```

axiosリクエストメソッドインターセプターを構成します。呼び出しを容易にするために、Vueプロトタイプにaxiosをデプロイし、コンポーネントのthis。$ axiosを介して呼び出します。以下はインターセプター構成です。ここで、configは定数構成ファイルです。

import Vue from "vue";
import Axios from "axios";
import Config from "../config/config";
import { Toast, Indicator } from "mint-ui";
Axios.defaults.baseURL = Config.RequestPath; //默认请求地址
Axios.defaults.timeout = Config.RequestTimeOut; //请求超时
// 添加请求拦截器
Axios.interceptors.request.use(
  function(config) {
    Indicator.open("加载中...");
    // 在发送请求之前做些什么
    return config;
  },
  function(error) {
    Indicator.close();
    // 对请求错误做些什么
    return Promise.reject(error);
  }
);
// 添加响应拦截器
Axios.interceptors.response.use(
  function(response) {
    Indicator.close();
    // 对响应数据做点什么
    if (response.data.result != 1) {
      Toast(response.data.msg);
    }
    if (response.data.result === -999) {
      //token验证失败
    }
    return response.data;
  },
  function(error) {
    Indicator.close();
    Toast("加载失败");
    // 对响应错误做点什么
    return Promise.reject(error);
  }
);

Vue.prototype.$axios = Axios;

vue-routerを設定するには、vue-routerのインターフェース設定項目をconfigに直接追加します。ルートジャンプの遷移アニメーションを考慮して、ルーターのインターフェースごとにグレーディングを行い、そのような効果を出しました。

次の内容でconfigフォルダーに新しいrouteConfigを作成します

import Home from "../page/home/home";//商品首页
import Kind from "../page/kind/kind";//分类界面
import ShopCar from "../page/shopCar/shopCar";//购物车
import Info from "../page/info/info";//个人主页
import Order from "../page/order/order";//订单管理界面
import ShopTheme from "../page/shopTheme/shopTheme";//主题界面
import ShopInfo from "../page/shopInfo/shopInfo";//商品详情
import Register from "../page/register/register";//注册界面
import UpdateInfo from "../page/updateInfo/updateInfo";//个人信息修改

export default class RouteConfig {
  static routes = [
    {
      path: "/",
      redirect: "/Home"
    },
    {
      path: "/Home",
      name: "Home",
      component: Home,
      meta: {
        index: 0
      }
    },
    {
      path: "/Kind",
      name: "Kind",
      component: Kind,
      meta: {
        index: 0
      }
    },
    {
      path: "/ShopCar",
      name: "ShopCar",
      component: ShopCar,
      meta: {
        index: 0
      }
    },
    {
      path: "/Info",
      name: "Info",
      component: Info,
      meta: {
        index: 0
      }
    },
    {
      path: "/ShopTheme",
      name: "ShopTheme",
      component: ShopTheme,
      meta: {
        index: 1
      }
    },
    {
      path: "/ShopInfo",
      name: "ShopInfo",
      component: ShopInfo,
      meta: {
        index: 2
      }
    },
    {
      path: "/Register",
      name: "Register",
      component: Register,
      meta: {
        index: 1
      }
    },
    {
      path: "/UpdateInfo",
      name: "UpdateInfo",
      component: UpdateInfo,
      meta: {
        index: 1
      }
    },
    {
      path: "/Order",
      name: "Order",
      component: Order,
      meta: {
        index: 1
      }
    }
  ];
}

routerフォルダーのインデックスの下にある構成を参照します

import Vue from 'vue'
import Router from 'vue-router'
import routeConfig from "../config/routeConfig"
const {
  routes
} = routeConfig
Vue.use(Router)
export default new Router({
  routes
})

ルートジャンプを監視するようにグローバルウォッチを構成し、App.vueでルートを監視するウォッチ機能を追加します

watch: {
    $route(to, from) {
      if (to.meta.index > from.meta.index) {
        this.transitionName = "slide-left";//下一层，进入子页面
      } else if (to.meta.index < from.meta.index) {
        this.transitionName = "slide-right";//上一层，返回
      } else {
        this.transitionName = "fade";//同级
      }
    }
  }

これで、フロントエンドモールの基本構成は完了です。次の記事では、使用する必要のあるツールクラスとその他の構成、およびストレージのグローバル状態の実装について説明します。

ゼロから、シンプルなショッピングプラットフォームを構築します（12）フロントエンドモール部分

おすすめ