3、html ページの構築 Vue プロジェクトの手順のアイデア

ページの構成では、アーティストは通常、最初にエフェクト画像を作成し、次に画像を html にカットします. html を取得した後、最初に構造を分析して、コンポーネントに分割できるようにします. vue プロジェクトはコンポーネント開発であり、最終的には、インターフェイスを介してデータを取得するなど、対応するビジネスロジックを実現します。

ウェブサイトのホームページの分析に基づいて、それは一般的に頭、中間のコンテンツ部分、および尾に分けられます。この構造に従って、対応するコンテンツを格納するための新しいフォルダを作成して、ストレージコンポーネントを作成します。

コンポーネントを開発するときは、次の点に注意する必要があります。

1. コンポーネントのスタイルと画像パスが正しい必要があります

2. vue プロジェクトはlessスタイルを使用しています. 静的 html はすべてcssスタイルです. ブラウザはcssスタイルを認識し、less スタイルを認識しないため、less および less-loader 依存パッケージをインストールする必要があります.vueファイル、styleノード Add lang="less"attributes to it 、あまり直接使用できず、ブラウザはそれを認識できます

less と less-loader をインストールします。バージョン番号を追加しない場合、デフォルトで最新バージョンがインストールされます。バージョンが高すぎるとエラーが報告されることがあります。通常、バージョンはインストール時に指定されます。バージョンここでは 5 を使用

コマンド：npm install --save less less-loader@5

ビューでのコンポーネントの手順:

(1) コンポーネントの作成

(2) コンポーネントスタイルの導入とコンポーネントの開発

(3) 対応するビジネスロジックをコンポーネントに実装します。たとえば、インターフェイスを呼び出してデータを取得するなどです。

(4) コンポーネントを使用する手順:

【1】インポートによるコンポーネント導入、

たとえば、現在のディレクトリにコンポーネント/ヘッダーをインポートします

【2】コンポーネントを登録する、コンポーネントを介してコンポーネントを登録する（登録後のみコンポーネントを利用可能）

【3】部品を使う

例：

<template>
  <div id="app">
    <!-- 3、使用组件header -->
    <Header></Header>
    </div>
</template>

<script>
//1、引入vue 引入当前目录下components/Header  
import Header from "./components/Header";
export default {
  name: "App",
  components: {
    //2、注册组件
    Header,
  },
};
</script>

3、html ページの構築 Vue プロジェクトの手順のアイデア

おすすめ