[コーディング ガソリン スタンド] vue シングル ページ携帯電話モール デザイン

1 はじめに

コース終了時の課題を設計しているのですが、コース設計を開始する場所がありません。Web ページの総要件が多すぎますか? 適切なテンプレートがありませんか? データベース、Java、Python、Vue、HTML のジョブは複雑で、ワークロードが大きすぎますか? Bi 彼女には何の手がかりもなく、一連の質問がありました。あなたが解決したいすべての問題は、WeChat公開アカウント「コーディングガソリンスタンド」で解決されます

2. 作品紹介

vue シングルページ携帯電話モール システムは vue テクノロジーを使用して実装されており、学習した知識体系に準拠しており、共通の宿題、最後の宿題、最終の宿題、コース設計に適しています。 WeChat パブリック アカウントへ: コーディング ガソリンスタンドさらに情報が必要な場合は、WeChat バックグラウンドでメッセージを残すことができます。誰でも質問したり、学びを交換したりすることを歓迎します。

2.1. 作品紹介

vue シングルページ携帯電話モール システムは従来の方法で実装されており、ほとんどの要件を満たしています。コード構成を説明する関連ドキュメントがあり、コードから知識ポイントを学ぶ必要がある場合は、この作品が最適です。

2.2. 作品の二次開発ツール

この作品のコードは比較的シンプルで、基本的には教室で学んだ知識を使用して完成しますが、関連する紹介文と一部の画像を修正するだけで、独自のコードに変更することができます。 Web 作業では、任意の編集ソフトウェア (例: DW、HBuilder、NotePAD、Vscode、Sublime、Webstorm (すべてのエディターを使用可能)、Java、Python およびその他の関連操作) を使用できます。また、よく使用されるツールを使用して、関連する二次開発を完了することもできます。使用。

2.3. 作品の技術的紹介

HTMLウェブページの技術的側面:CSSを使用してウェブページの背景画像を作成し、マウスオーバーと選択したナビゲーションの色の変更効果、下線およびその他の関連テクノロジーを使用して関連するインターフェイスを美しくし、検証のために部分的にJavaScriptを使用します。html5、css3、およびその他の関連テクノロジーを使用してテクニカル レイアウトを完成させます。この作業では、共通レイアウト、共通フローティング レイアウト、およびフレックス レイアウトが使用されます。

vue の技術的側面: vue テクノロジーを使用して開発された Web サイト。v-for、v-if、v-show、v-html などの一般的な vue 命令が含まれ、watch などの共通機能の開発も含まれます。コンポーネントの使用、vue 関連のファミリー バケットの使用、およびルーティングとしての v-router の使用は、一般的な Web サイト開発手法と完全に一致しています。

3. 作品の実演

[コーディング ガソリン スタンド] vue シングル ページ ローカル モール

3.1、機能ページ 1

関連するコード:

<!DOCTYPE html>
<html lang=en>

<head>
    <meta charset=utf-8>
    <meta http-equiv=X-UA-Compatible content="IE=edge">
    <meta name=viewport content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=0">
    <link rel=icon href=xuedingcat.ico type=image/x-icon>
    <link rel="shortcut icon" href=xuedingcat.ico>
    <title>coding</title>
    <link href=css/app.6514e142.css rel=preload as=style>
    <link href=css/chunk-vendors.859f4391.css rel=preload as=style>
    <link href=js/app.2e91fd57.js rel=preload as=script>
    <link href=js/chunk-vendors.2159d1d1.js rel=preload as=script>
    <link href=css/chunk-vendors.859f4391.css rel=stylesheet>
    <link href=css/app.6514e142.css rel=stylesheet>
</head>

<body><noscript><strong>肥肠抱歉,coding未被观测</strong></noscript>
    <div id=app></div>
    <script src=js/chunk-vendors.2159d1d1.js></script>
    <script src=js/app.2e91fd57.js></script>
</body>

</html>

 

4. コード構造図

 

要約する

上記はこのプロジェクトの全内容です。コードを通信または取得する必要がある場合は、WeChat パブリック アカウント: ガソリン スタンドのコーディングに注意してください。

おすすめ

転載: blog.csdn.net/pandas23/article/details/130808017