1 はじめに
コース終了時の課題を設計しているのですが、コース設計を開始する場所がありません。Web ページの総要件が多すぎますか? 適切なテンプレートがありませんか? データベース、Java、Python、Vue、HTML のジョブは複雑で、ワークロードが大きすぎますか? Bi 彼女には何の手がかりもなく、一連の質問がありました。あなたが解決したいすべての問題は、WeChat公開アカウント「コーディングガソリンスタンド」で解決されます
2. 作品紹介
vue レスポンシブ公式ウェブサイト システムは vue テクノロジーを使用して実装されており、学習した知識システムに準拠しており、一般的な宿題やコース設計に適しています。さらに作品を取得する必要がある場合は、WeChat パブリック アカウントにご注意ください: コーディング ガソリン スタンド、詳細情報を入手するには、WeChat バックグラウンドでメッセージを残すことができます。誰でも質問したり、学びを交換したりすることを歓迎します。
2.1. 作品紹介
vue レスポンシブ公式 Web サイト システムは従来の方法で実装されており、ほとんどの要件を満たしています。コード構成を説明する関連ドキュメントがあり、コードから知識ポイントを学ぶ必要がある場合は、この作品が最適です。
2.2. 作品の二次開発ツール
この作品のコードは比較的シンプルで、基本的には教室で学んだ知識を使用して完成しますが、関連する紹介文と一部の画像を修正するだけで、独自のコードに変更することができます。 Web 作業では、任意の編集ソフトウェア (例: DW、HBuilder、NotePAD、Vscode、Sublime、Webstorm (すべてのエディターを使用可能)、Java、Python およびその他の関連操作) を使用できます。また、よく使用されるツールを使用して、関連する二次開発を完了することもできます。使用。
2.3. 作品の技術的紹介
HTMLウェブページの技術的側面：CSSを使用してウェブページの背景画像を作成し、マウスオーバーと選択したナビゲーションの色の変更効果、下線およびその他の関連テクノロジーを使用して関連するインターフェイスを美しくし、検証のために部分的にJavaScriptを使用します。html5、css3、およびその他の関連テクノロジーを使用してテクニカル レイアウトを完成させます。この作業では、共通レイアウト、共通フローティング レイアウト、およびフレックス レイアウトが使用されます。同時に、html5とcss3を運用に使用し、div+cssの構造、フォーム、ハイパーリンク、フローティング、絶対配置、相対配置、フォントスタイル、参考動画などの基礎知識を使用し、js関連の知識も多少あります。使用済み。たとえば、dom と bom はブラウザの関連 API を取得するために使用され、css はスタイルを美しくしてインターフェイスを Web デザインに合わせて作成するために使用されます。
vue の技術的側面: vue テクノロジーを使用して開発された Web サイト。v-for、v-if、v-show、v-html などの一般的な vue 命令が含まれ、watch などの共通機能の開発も含まれます。コンポーネントの使用、vue 関連のファミリー バケットの使用、およびルーティングとしての v-router の使用は、一般的な Web サイト開発手法と完全に一致しています。同時に、html5、css3 などの関連テクノロジーを使用してテクニカル レイアウトを完成させます (この作業では、共通レイアウト、共通フローティング レイアウト、およびフレックス レイアウトが使用されます)。
3. 作品の実演
【コーディングガソリンスタンド】vueプログラミング --- レスポンシブな公式サイトの実現
3.1、機能ページ 1
パソコンのホームページ
モバイルホームページ:
関連するコード:
<template>
<div id="app">
<div class="header">
<div class="container clearfix">
<el-row class="PC">
<el-col :span="3">
<div class="index-logo">
<router-link to="/">
<img src="../static/image/pc-logo.png"/>
</router-link>
</div>
</el-col>
<el-col :span="11">
<el-menu
:default-active="activeIndex"
:active-text-color="activeColor"
:router="true"
class="el-menu-demo"
mode="horizontal"
@select="handleSelect">
<el-menu-item index="/">首页</el-menu-item>
<el-menu-item index="/solution">解决方案</el-menu-item>
<el-menu-item index="/product">产品中心</el-menu-item>
<el-menu-item index="/contactUs">联系我们</el-menu-item>
</el-menu>
</el-col>
<el-col :span="10">
<div style="line-height: 80px;" class="text-right">
<el-button round
@click="goLogin()"
class="btn-box">CMBI 登录</el-button>
<el-button round
@click="goLogin()"
class="btn-box">CPBI 登录</el-button>
<el-button round
type="primary"
@click="goLogin()">DataX 登录</el-button>
</div>
</el-col>
</el-row>
<el-row type="flex" class="row-bg Mobile" justify="space-between">
<el-col :span="8" class="m-box">
<div class="menu-btn" @click="mobileNav"><span></span><span></span><span></span></div>
</el-col>
<el-col :span="8" class="m-box m-index-logo" style="padding: 0">
<router-link to="/">
<img src="../static/image/logo.png">
</router-link>
</el-col>
<el-col :span="8" class="m-box text-right">
<el-dropdown trigger="click">
<span class="el-dropdown-link">
登录<i class="el-icon-arrow-down el-icon--right"></i>
</span>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item><a @click="goLogin()">CMBI 登录</a></el-dropdown-item>
<el-dropdown-item><a @click="goLogin()">CPBI 登录</a></el-dropdown-item>
<el-dropdown-item><a @click="goLogin()">DataX 登录</a></el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</el-col>
</el-row>
</div>
</div>
<div :class="['mobile-nav',[mobile_nav?'m-nav-show':'m-nav-hide']]">
<el-row>
<el-col :span="12" style="padding-left: 20px">
<img src="../static/image/logo2.png">
</el-col>
<el-col :span="12" class="text-right" style="padding-right: 20px">
<i class="el-icon-close" @click="mobileNav" style="color: #FFFFFF;font-size: 30px"></i>
</el-col>
</el-row>
<el-menu
:default-active="activeIndex"
:active-text-color="activeColor"
:router="true"
class="el-menu-vertical-demo"
background-color="transparent"
text-color="#fff"
style="margin: 20px 0"
>
<el-menu-item index="/" class="m-menu-icon icon1" @click="mobileNav">
<span slot="title">首页</span>
</el-menu-item>
<el-menu-item index="/solution" class="m-menu-icon icon2" @click="mobileNav">
<span slot="title">解决方案</span>
</el-menu-item>
<el-menu-item index="/product" class="m-menu-icon icon3" @click="mobileNav">
<span slot="title">产品中心</span>
</el-menu-item>
<el-menu-item index="/contactUs" class="m-menu-icon icon4" @click="mobileNav">
<span slot="title">联系我们</span>
</el-menu-item>
</el-menu>
</div>
<div :class="['main-content',{'pdb0':activeIndex == '/contactUs'}]">
<router-view :class="[activeIndex == '/contactUs'?'':'content']"></router-view>
</div>
<Footer v-if="activeIndex != '/contactUs'"></Footer>
</div>
</template>
<script>
import Footer from './components/footer/Footer'
import ElCol from "element-ui/packages/col/src/col";
export default {
name: 'App',
data() {
return {
activeIndex: '',
activeColor:'#409EFF',
mobile_nav:false
};
},
components: {
ElCol, Footer
},
methods: {
handleSelect(val){
},
mobileNav(){
this.mobile_nav = !this.mobile_nav
},
getPath(){
this.activeIndex =this.$route.path
},
goLogin(url,opt_label){
window.open(url)
_hmt.push(['_trackEvent', 'login', 'click', opt_label])
}
},
created(){
this.activeIndex =this.$route.path
},
watch: {
'$route':'getPath'
},
}
</script>
<style lang="less">
@import "style/common.less";
</style>
要約する
上記はこのプロジェクトの全内容ですが、コードを通信または取得する必要がある場合は、WeChat パブリック アカウントに注意してください: コーディング ガソリン スタンド、