Vue を使用してモバイル APK プロジェクトを完了することについての簡単な説明

// Vueをインポート
'vue' から Vue をインポートします
// ルートコンポーネントをインポートする App.vue
'./App.vue' からアプリをインポートします。
// ルーターをインポートする import router from './router'
'./store' からストアをインポートします
// axiosをインポートする
'axios' から axios をインポートします
// ElementUI をインポート
'element-ui' から ElementUI をインポートします。
// ElementUI css をインポート
'element-ui/lib/theme-chalk/index.css' をインポートします。
// Vant 構成 js をインポートする
'amfe-flexible/index.js' をインポートします
// ここで必要なVantコンポーネントをインポートします import {
  評価、ポップアップ、フォーム、フィールド、商品アクションボタン、商品アクションアイコン、商品アクション、サイドバー、
  サイドバーアイテム、VanImageとしての画像、スケルトン、スワイプセル、列、行、
  カウントダウン、Lazyload、スワイプアイテム、スワイプ、SKU、アドレスリスト、エリア、
  アドレス編集、ナビゲーションバー、送信バー、チェックボックスグループ、チェックボックス、カード、
  画像、グリッドアイテム、グリッド、セル、スイッチ、ボタン、検索、タブ、タブ、
  タブバー、タブバーアイテム、アイコン、ドロップダウンメニュー、ドロップダウンアイテム、トースト、セルグループ、
  オーバーレイ、パスワード入力、数字キーボード、読み込み、ShareSheet、ダイアログ、イメージプレビュー、アップローダー
} 'vant' より
// vuexをインポート
Vue.config.productionTip = false
// ここではVantコンポーネントを参照します Vue.use(Search)
  .use(レート)
  .use(ポップアップ)
  .use(イメージプレビュー)
  .use(アップローダー)
  .use(ダイアログ)
  .use(シェアシート)
  .use(読み込み中)
  .use(オーバーレイ)
  .use(パスワード入力)
  .use(数値キーボード)
  .use(フォーム)
  .use(セルグループ)
  .use(トースト)
  .use(フィールド)
  .use(商品アクションボタン)
  .use(商品アクションアイコン)
  .use(商品アクション)
  .use(サイドバー)
  .use(サイドバーアイテム)
  .use(ヴァンイメージ)
  .use(スケルトン)
  .use(スワイプセル)
  .use(列)
  .use(行)
  .use(カウントダウン)
  .use(遅延読み込み)
  .use(スワイプアイテム)
  .use(スワイプ)
  .use(Sku)
  .use(アドレスリスト)
  .use(エリア)
  .use(アドレス編集)
  .use(ナビゲーションバー)
  .use(送信バー)
  .use(チェックボックスグループ)
  .use(チェックボックス)
  .use(カード)
  .use(画像)
  .use(グリッドアイテム)
  .use(セル)
  .use(グリッド)
  .use(スイッチ)
  .use(ボタン)
  .use(ドロップダウンアイテム)
  .use(ドロップダウンメニュー)
  .use(アイコン)
  .use(タブ)
  .use(タブ)
  .use(タブバー)
  .use(タブバーアイテム)
//ElementUI コンポーネントへのグローバル参照 Vue.use(ElementUI)
// axios マウントポイントを設定する Vue.prototype.$http = axios
// axios のベースアドレスを設定します axios.defaults.baseURL = 'http://127.0.0.1:3000/api'
// 開発モードと非開発モードで参照されるバックグラウンドアドレスを設定します axios.defaults.baseURL = process.env.NODE_ENV === 'development' ? 'http://127.0.0.1:3000/api' : '/api'

新しいVue({
  店、
  ルーター、
  レンダリング: h => h(App)
}).$mount('#app')

<テンプレート>
  <div id="アプリ">
    <ルータービュー />
    <div class="after"></div>
    <バンタブバー
      v-model="アクティブ"
      修理済み
      国境
      アクティブカラー="#bb54f6"
      ルート
      v-show="isShowNav"
    >
      <van-tabbar-item class="iconfont icon-rhome-fill" to="/home">
        ホーム</van-tabbar-item>
      <タブバー項目
        class="iconfont icon-leimupinleifenleileibie2"
        to="/カテゴリー"
      >
        カテゴリー</van-tabbar-item>
      <van-tabbar-item class="iconfont icon-u138" to="/find">
        発見</van-tabbar-item>
      <van-tabbar-item class="iconfont icon-qicheqianlian-" to="/shopping">
        ショッピングカート</van-tabbar-item>
      <van-tabbar-item class="iconfont icon-wodedangxuan" to="/myuser">
        私の</van-tabbar-item>
    </van-tabbar>
  </div>
</テンプレート>
<スクリプト>
エクスポートデフォルト{
  データ （） {
    戻る {
      アクティブ: 0,
      isShowNav: true、
      ショーリスト: ['ホーム', 'ショッピング', '検索', 'カテゴリ', 'MyUser']
    }
  },
  時計：
    $route (宛先、送信元) {
      if (this.Showlist.includes(to.name)) {
        this.isShowNav = true
      } そうでない場合 (to.name === '') {
        this.isShowNav = false
      } それ以外 {
        this.isShowNav = 偽
      }
    }
  }
}
</スクリプト>
<スタイル>
＃アプリ {
  幅: 100%;
  高さ: 100%;
  フォントファミリー: Avenir、Helvetica、Arial、sans-serif;
  -webkit-font-smoothing: アンチエイリアス;
  -moz-osx-font-smoothing: グレースケール;
  テキスト配置: 中央;
  色: #2c3e50;
}
html,
体 {
  幅: 100%;
  高さ: 100%;
}
</スタイル>

<テンプレート>
  <div class="home">
    <div class="header">
      <バンサーチ
        v-model="値"
        ショーアクション
        形状="丸"
        背景="#890bf2"
        placeholder="検索キーワードを入力してください"
        @search="検索"
      >
        <テンプレート #アクション>
          <i
            クラス="iconfont icon-xiaoxi"
            スタイル="フォントサイズ: 30px; 色: 白"
          </i>
        </テンプレート>
      </バン検索>
      <バンタブ
        v-model="アクティブ"
        背景="#890bf2"
        タイトル非アクティブ色="白"
        タイトルアクティブカラー="白"
        カラー="#fff"
      >
        <van-tab title="推奨" :width="500">
          <!-- カルーセル-->
          <バン・スワイプ:autoplay="3000" class="my-swipe1">
            <van-swipe-item v-for="(image, index) 画像内" :key="index">
              <img v-lazy="画像" />
            </van-swipe-item>
          </バンスワイプ>
          <!-- 10 グリッド セクション -->
          <バングリッド:列番号="5">
            <van-grid-item v-for="グリッド内の値" :key="value.id">
              <div @click="xxx(値.名前)">
                <i :class="value.icon" style="font-size: 35px; color: red"> </i>
              </div>
              <b style="font-size: 16px">{{ 値.名前 }}</b>
            </van-grid-item>
          </バングリッド>
          <!-- フラッシュセール部分 -->
          <div class="供給">
            <div class="seckill">
              <van-count-down :time="time" style="font-size: 14px; color: red">
                <テンプレート #default="timeData">
                  <span>フラッシュセール終了までの時間:</span>
                  <span class="block">{{ timeData.hours }}</span>
                  <span class="colon">:</span>
                  <span class="block">{{ timeData.minutes }}</span>
                  <span class="colon">:</span>
                  <span class="block">{{ timeData.seconds }}</span>
                </テンプレート>
              </バンカウントダウン>
            </div>
            <div class="ショップ">
              <ul>
                <li
                  v-for="supplyShop 内のアイテム"
                  :key="アイテムID"
                  @click="detailshop(item.id)"
                >
                  <img :src="item.shop_img" alt="" />
                </li>
              </ul>
            </div>
          </div>
          <!-- 製品 -->
          <div class="otherShop">
            <ul>
              <li
                v-for="otherShop のアイテム"
                :key="アイテムID"
                @click="detailshop(item.id)"
              >
                <a href="JavaScript:;"><img :src="item.shop_img" alt="" /></a>
                <a href="JavaScript:;" style="color: #000"
                  ><p>
                    {{item.shop_title}}
                  </p></a
                >
              </li>
            </ul>
          </div>
        </van-tab>
        <van-tab title="モバイル">
          <バングリッド:列番号="4">
            <バングリッドアイテム
              v-for="phoneimg 内の値"
              :key="値.id"
              アイコン="写真-o"
              テキスト="テキスト"
            >
              <img :src="value.src" alt="" スタイル="幅: 50px; 高さ: 30px" />
              <span style="font-size: 12px">{{ value.title }}</span>
            </van-grid-item>
          </バングリッド>
          <div class="その他の電話">
            <ul>
              <li
                v-for="otherPhone 内のアイテム"
                :key="アイテムID"
                @click="detailshop(item.id)"
              >
                <img :src="item.shop_img" alt="" />
                <p>
                  {{item.shop_title}}
                </p>
              </li>
            </ul>
          </div>
        </van-tab>
        <van-tab title="スポーツ">
          <バングリッド:列番号="5">
            <バングリッドアイテム
              v-for="motionimg の値"
              :key="値.id"
              アイコン="写真-o"
              テキスト="テキスト"
            >
              <img :src="value.src" alt="" スタイル="幅: 50px; 高さ: 30px" />
              <span style="font-size: 12px">{{ value.title }}</span>
            </van-grid-item>
          </バングリッド>
          <div class="othermotion">
            <ul>
              <li
                v-for="othermotion 内のアイテム"
                :key="アイテムID"
                @click="detailshop(item.id)"
              >
                <img :src="item.shop_img" alt="" />
                <p>
                  {{item.shop_title}}
                </p>
              </li>
            </ul>
          </div>
        </van-tab>
        <van-tab title="美容">
          <バングリッド:列番号="5">
            <バングリッドアイテム
              v-for="Makeupimg の値"
              :key="値.id"
              アイコン="写真-o"
              テキスト="テキスト"
            >
              <img :src="value.src" alt="" スタイル="幅: 50px; 高さ: 30px" />
              <span style="font-size: 12px">{{ value.title }}</span>
            </van-grid-item>
          </バングリッド>
          <div class="その他のメイクアップ">
            <ul>
              <li
                @click="detailshop(item.id)"
                v-for="otherMakeup 内のアイテム"
                :key="アイテムID"
              >
                <img :src="item.shop_img" alt="" />
                <p>
                  {{item.shop_title}}
                </p>
              </li>
            </ul>
          </div>
        </van-tab>
        <van-tab title="メンズシューズ">
          <バングリッド:列番号="5">
            <バングリッドアイテム
              v-for="Menshopimg 内の値"
              :key="値.id"
              アイコン="写真-o"
              テキスト="テキスト"
            >
              <img :src="value.src" alt="" スタイル="幅: 50px; 高さ: 30px" />
              <span style="font-size: 12px">{{ value.title }}</span>
            </van-grid-item>
          </バングリッド>
          <div class="otherMenshop">
            <ul>
              <li
                @click="detailshop(item.id)"
                v-for="otherMenshop のアイテム"
                :key="アイテムID"
              >
                <img :src="item.shop_img" alt="" />
                <p>
                  {{item.shop_title}}
                </p>
              </li>
            </ul>
          </div>
        </van-tab>
        <van-tab title="レディースシューズ">
          <バングリッド:列番号="5">
            <バングリッドアイテム
              v-for="WoMenshopimg 内の値"
              :key="値.id"
              アイコン="写真-o"
              テキスト="テキスト"
            >
              <img :src="value.src" alt="" スタイル="幅: 50px; 高さ: 30px" />
              <span style="font-size: 12px">{{ value.title }}</span>
            </van-grid-item>
          </バングリッド>
          <div class="otherWoMenshop">
            <ul>
              <li
                v-for="otherWoMenshop のアイテム"
                :key="アイテムID"
                @click="detailshop(item.id)"
              >
                <img :src="item.shop_img" alt="" />
                <p>
                  {{item.shop_title}}
                </p>
              </li>
            </ul>
          </div>
        </van-tab>
        <van-tab title="家具とホーム">
          <バングリッド:列番号="5">
            <バングリッドアイテム
              v-for="FurnishingImg の値"
              :key="値.id"
              アイコン="写真-o"
              テキスト="テキスト"
            >
              <img :src="value.src" alt="" スタイル="幅: 50px; 高さ: 30px" />
              <span style="font-size: 12px">{{ value.title }}</span>
            </van-grid-item>
          </バングリッド>
          <div class="その他の家具">
            <ul>
              <li
                v-for="otherFurnishing 内のアイテム"
                :key="アイテムID"
                @click="detailshop(item.id)"
              >
                <img :src="item.shop_img" alt="" />
                <p>
                  {{item.shop_title}}
                </p>
              </li>
            </ul>
          </div>
        </van-tab>
      </van-tabs>
    </div>
  </div>
</テンプレート>
<スクリプト>
エクスポートデフォルト{
  データ （） {
    戻る {
      価値： ''、
      アクティブ: 0,
      時間： ''、
      // カルーセル画像画像: [
        'http://m.360buyimg.com/mobilecms/s700x280_jfs/t1/165251/27/8980/194778/60409b0aE6d2ff3df/ca0c808809dbbfa8.jpg!q70.jpg.dpg',
        'http://imgcps.jd.com/ling4/10027168852797/54mb5LuU6KOk5Zyw5pa554m56Imy/6ZKc5oOg55av5oqi/p-5c17126882acdd181dd53cf1/018cd345/cr_1125x445_0_171/s1125x690/q70.jpg',
        'http://m.360buyimg.com/mobilecms/s700x280_jfs/t1/163716/23/16055/97374/6066f2cfEe720735f/3f4d05450bc1f7fc.jpg!q70.jpg.dpg'
      ]、
      // グリッド: [
        { id: 1, icon: 'iconfont icon-shouji', name: '携帯電話' },
        { id: 2、アイコン: 'iconfont icon-bingxiang'、名前: '冷蔵庫' }、
        { id: 3、アイコン: 'iconfont icon-xiyiji'、名前: '洗濯機' }、
        { id: 4、アイコン: 'iconfont icon-dianshi'、名前: 'TV' }、
        { id: 5, icon: 'iconfont icon-youyanjiB', name: 'ランチョ フッド' },
        { id: 6、アイコン: 'iconfont icon-reshuiqi'、名前: '給湯器' }、
        { id: 7、アイコン: 'iconfont icon-jiaju'、名前: 'ホーム' }、
        { id: 8, icon: 'iconfont icon-dianfanbao', name: '炊飯器' },
        { id: 9, icon: 'iconfont icon-deng', name: 'デスクランプ' },
        { id: 10、アイコン: 'iconfont icon-chufangyongpin-ranqizao'、名前: 'ガスコンロ' }
      ]、
      // フラッシュセール商品供給ショップ: [],
      // その他の製品 otherShop: [],
      // モバイルページ phoneimg: [],
      // その他の携帯電話製品 otherPhone: [],
      // モーションページ motionimg: [],
      // その他のスポーツ用品 othermotion: [],
      // メイクアップページ Makeupimg: [],
      // その他の美容製品 otherMakeup: [],
      // メンズシューズページ Menshopimg: [],
      // その他のメンズシューズ otherMenshop: [],
      // レディースシューズページWoMenshopimg: [],
      // その他の女性用靴 otherWoMenshop: [],
      // ホームページ FurnishingImg: [],
      // その他の家庭用品 otherFurnishing: []
    }
  },
  作成された（）{
    this.CountDown()
    this.loadershop()
  },
  メソッド: {
    // 製品を検索する search (value) {
      this.$router.push({ name: 'SchCont', params: { value } })
    },
    // カウントダウン（）{
      var myDate = 新しい日付()
      var 時間 = 24 - myDate.getHours()
      this.time = 時間 * 60 * 60 * 1000
    },
    // 製品情報を取得する async loadershop () {
      // すべての製品を取得し、優先ページに割り当てます module const Allshop = await this.$http.get('list?id=100')
      this.otherShop = Allshop.data.data
      // 携帯電話製品を取得し、モバイル ページ モジュールに割り当てます。const phone = await this.$http.get('details?id=2')
      this.otherPhone = 電話.data.data
      // スポーツ製品を取得し、スポーツ ページ モジュールに割り当てます。const play = await this.$http.get('details?id=3')
      this.othermotion = 再生データ.データ
      // 美容製品を取得し、美容ページモジュールに割り当てます。const Makeup = await this.$http.get('details?id=4')
      this.otherMakeup = メイクアップ.data.data
      // メンズシューズを取得し、メンズシューズページモジュールに割り当てます。const Menshop = await this.$http.get('details?id=5')
      this.otherMenshop = Menshop.data.data
      // 女性用の靴を取得し、女性用の靴のページモジュールに割り当てます。const WoMenshop = await this.$http.get('details?id=6')
      this.otherWoMenshop = WoMenshop.data.data
      // ホーム家具製品を取得し、ホーム家具ページモジュールに割り当てます。const Furnishing = await this.$http.get('details?id=7')
      this.otherFurnishing = Furnishing.data.data
      // フラッシュセール商品を取得し、フラッシュセールモジュールに割り当てます。const miaosha = await this.$http.get('list_m')
      this.supplyShop = miaosha.data.data
    },
    // 詳細ページに切り替える detailshop (id) {
      this.$router.push({ name: '詳細', params: { id: id, urls: '/home' } })
    },
    // 優先グリッド詳細にジャンプ xxx (id) {
      this.$router.push({ name: 'SchCont', params: { value: id } })
    }
  }
}
</スクリプト>
<style lang="less" スコープ>
。家 {
  幅: 100%;
  高さ: 100%;
  .ヘッダー{
    .van-tabs {
      上マージン: -5px;
    }
  }
}

.van-tabbar {
  .van-tabbar-item {
    ディスプレイ: フレックス;
    flex-direction: 列;
  }
}
//スライドショー.my-swipe1 {
  幅: 300ピクセル;
  高さ: 150px;
  左マージン: 35px;
  上マージン: 20px;
  画像 {
    幅: 300ピクセル;
    高さ: 150px;
  }
  ボックスの影: 0px 1px 3px 3px rgba(34, 25, 25, 0.2);
}

// 10 グリッド.van-grid {
  上マージン: 10px;
  ボックスの影: 0px 1px 3px 3px rgba(34, 25, 25, 0.2);
}

//2番目のsale.supply{
  幅: 100%;
  高さ: 120px;
  上マージン: 10px;
  ボックスの影: 0px 1px 3px 3px rgba(34, 25, 25, 0.2);
  。店 {
    ul {
      リストスタイル: なし;
      li {
        フロート: 左;
        左マージン: 13px;
        画像 {
          上マージン: 10px;
          幅: 80ピクセル;
        }
      }
    }
  }
}

// その他の製品.otherShop {
  上マージン: 20px;
  ul {
    ディスプレイ: フレックス;
    コンテンツの両端揃え: スペースを空ける;
    アイテムの位置を中央揃えにします。
    flex-wrap: ラップ;
    パディング下部: 40px;
    li {
      幅: 170ピクセル;
      高さ: 220px;
      フォントサイズ: 14px;
      ｐ {
        幅: 170ピクセル;
        overflow: hidden; // 超過したテキストは非表示になります white-space: nowrap; // オーバーフローしてもテキストは折り返されません-overflow: ellipsis; // オーバーフローは省略記号で表示されます}
      画像 {
        幅: 150ピクセル;
      }
    }
  }
}

//その他の携帯電話製品.otherPhone {
  上マージン: 20px;
  ul {
    ディスプレイ: フレックス;
    コンテンツの両端揃え: スペースを空ける;
    アイテムの位置を中央揃えにします。
    flex-wrap: ラップ;
    パディング下部: 40px;
    li {
      幅: 170ピクセル;
      高さ: 220px;
      フォントサイズ: 14px;
      ｐ {
        幅: 170ピクセル;
        overflow: hidden; // 超過したテキストは非表示になります white-space: nowrap; // オーバーフローは折り返されません text-overflow: ellipsis; // オーバーフローは省略記号で表示されます text-indent: 2em;
      }
      画像 {
        幅: 150ピクセル;
      }
    }
  }
}

//その他のスポーツ製品.othermotion {
  上マージン: 20px;
  ul {
    ディスプレイ: フレックス;
    コンテンツの両端揃え: スペースを空ける;
    アイテムの位置を中央揃えにします。
    flex-wrap: ラップ;
    パディング下部: 40px;
    li {
      幅: 170ピクセル;
      高さ: 220px;
      フォントサイズ: 14px;
      ｐ {
        幅: 170ピクセル;
        overflow: hidden; // 超過したテキストは非表示になります white-space: nowrap; // オーバーフローは折り返されません text-overflow: ellipsis; // オーバーフローは省略記号で表示されます text-indent: 2em;
      }
      画像 {
        幅: 150ピクセル;
      }
    }
  }
}

//その他の美容製品.otherMakeup {
  上マージン: 20px;
  ul {
    ディスプレイ: フレックス;
    コンテンツの両端揃え: スペースを空ける;
    アイテムの位置を中央揃えにします。
    flex-wrap: ラップ;
    パディング下部: 40px;
    li {
      幅: 170ピクセル;
      高さ: 220px;
      フォントサイズ: 14px;
      ｐ {
        幅: 170ピクセル;
        overflow: hidden; // 超過したテキストは非表示になります white-space: nowrap; // オーバーフローは折り返されません text-overflow: ellipsis; // オーバーフローは省略記号で表示されます text-indent: 2em;
      }
      画像 {
        幅: 150ピクセル;
      }
    }
  }
}

//その他のメンズシューズ.otherMenshop {
  上マージン: 20px;
  ul {
    ディスプレイ: フレックス;
    コンテンツの両端揃え: スペースを空ける;
    アイテムの位置を中央揃えにします。
    flex-wrap: ラップ;
    パディング下部: 40px;
    li {
      幅: 170ピクセル;
      高さ: 220px;
      フォントサイズ: 14px;
      ｐ {
        幅: 170ピクセル;
        overflow: hidden; // 超過したテキストは非表示になります white-space: nowrap; // オーバーフローは折り返されません text-overflow: ellipsis; // オーバーフローは省略記号で表示されます text-indent: 2em;
      }
      画像 {
        幅: 150ピクセル;
      }
    }
  }
}

//その他の女性用靴.otherWoMenshop {
  上マージン: 20px;
  ul {
    ディスプレイ: フレックス;
    コンテンツの両端揃え: スペースを空ける;
    アイテムの位置を中央揃えにします。
    flex-wrap: ラップ;
    パディング下部: 40px;
    li {
      幅: 170ピクセル;
      高さ: 220px;
      フォントサイズ: 14px;
      ｐ {
        幅: 170ピクセル;
        overflow: hidden; // 超過したテキストは非表示になります white-space: nowrap; // オーバーフローは折り返されません text-overflow: ellipsis; // オーバーフローは省略記号で表示されます text-indent: 2em;
      }
      画像 {
        幅: 150ピクセル;
      }
    }
  }
}

// その他の家庭用品 products.otherFurnishing {
  上マージン: 20px;
  ul {
    ディスプレイ: フレックス;
    コンテンツの両端揃え: スペースを空ける;
    アイテムの位置を中央揃えにします。
    flex-wrap: ラップ;
    パディング下部: 40px;
    li {
      幅: 170ピクセル;
      高さ: 220px;
      フォントサイズ: 14px;
      ｐ {
        幅: 170ピクセル;
        overflow: hidden; // 超過したテキストは非表示になります white-space: nowrap; // オーバーフローは折り返されません text-overflow: ellipsis; // オーバーフローは省略記号で表示されます text-indent: 2em;
      }
      画像 {
        幅: 150ピクセル;
      }
    }
  }
}
</スタイル>