第8に、lessとreset.cssのリファレンスを学習して、ホームページのアクティビティと製品推奨モジュールを完了します。

7番目に、vueカルーセルの使用を完了し、次にホームページ、製品モジュールのアクティビティを完了しました。

1つ少ない見積もり

使用法と紹介https://www.jianshu.com/p/bf641d9d979a

①最初にlessをインストールし、cmdでプロジェクトディレクトリを入力し、コマンドを入力します

$ cnpm install lessless-roader--save-dev。

②インストール後に使用できます。<style> lang属性で定義するだけです。

次に、reset.cssの参照

今日の人気のあるブラウザの中には、独自の方法でcss仕様を理解しているものがあります。その結果、ブラウザによるcssの解釈のみが、デザイナーのcss定義と競合し、一部のブラウザでWebページの外観が正しく表示されるようになります。設計者の考えによると、ただし、一部のブラウザは設計者が望むように表示されないため、ブラウザの互換性の問題が発生します。したがって、ボタンタグのcssプロパティをリセットし、それを均一に定義することで、同じ表示効果を生み出すことができます。

css resetの機能は、各ブラウザのcssスタイルに統一されたベンチマークを持たせることであり、このベンチマークはより「リセット」されます。

①URLhttps ： //cssreset.com/をダウンロードし、ダウンロードしたファイルをsrcファイルにコピーします。

②次にApp.vueで紹介します。

③導入が成功したかどうかをテストします。たとえば、<h1>のマージンがゼロです。

3.新しいアクティビティと製品推奨コンポーネント

（1）アクティビティ推奨コンポーネントを作成する--- activity.vue

①conponentsディレクトリに入り、新しいアクティビティ推奨コンポーネントを作成します--- activity.vue

コンポーネントの構造を構築する

<テンプレート>の構造を構築する

<スタイル>コンテンツ：

<style lang = "less"スコープ> 
  .activity {
    背景：#eee; 
    .title {
      幅：100％; 
      高さ：50px; 
      行の高さ：50px; 
      text-align：center; 
      色：灰色; 
      border-bottom：1px solid＃000; 
      背景：#fff; 
    } 
    .content { 
      .content_item {
        背景：#fff; 
        マージンボトム：10px; 
        img {
          幅：100％; 
          高さ：150px; 
        } 
      } 
      .name { 
        font-size：15px; 
        色：＃000; 
        マージンボトム：5px; 
      }
      .desc { 
        font-size：13px; 
        色：＃000; 
      } 
    } 
  } 
</ style>

<スクリプト>コンテンツ：

②この時点でコンポーネントactivity.vueが完了しているので、使用してください

ビューディレクトリでhome.vueファイルを見つけ、ここでactivity.vueコンポーネントを参照します。

③ブラウザに移動して効果を確認します。

（2）製品推奨コンポーネントを作成する--- recommend.vueコンポーネント（具体的な方法はactivity.vueコンポーネントの方法と同様です）

<テンプレート>構造：

<スクリプト>コンテンツ：

css設定：

<style lang = "less"スコープ> 
.recommend {
  背景：#eee; 
  .title {
    幅：100％; 
    高さ：50px; 
    行の高さ：50px; 
    text-align：center; 
    色：灰色; 
    border-bottom：1px solid＃000; 
    背景：#fff; 
  } 
  .content {
    表示：フレックス; 
    フレックス方向：行; 
    フレックスラップ：ラップ; 
    justify-content：space-between; 
    .content_item {
      背景：#fff; 
      マージンボトム：5px; 
      幅：180px; 
      img {
        幅：100％; 
        高さ：200px; 
      } 
      .name {
        パディング：0 5px;
        フォントサイズ：15px; 
      } 
      .desc {
        パディング：0 5px; 
        オーバーフロー：非表示; 
        フォントサイズ：13px; 
        .price {
          色：赤; 
        } 
        .price_pre {
          色：＃8e8e8e; 
          テキスト装飾：ラインスルー; 
        } 
      } 
    } 
  } 
} 
</ style>