Vue3 Vue CLI マルチ環境設定

NODE_ENV=開発
VUE_APP_SERVER=http://127.0.0.1:8880

NODE_ENV=本番
VUE_APP_SERVER=https://www.baidu.com

{
  "名前": "ウェブ",
  "バージョン": "0.1.0",
  「プライベート」：true、
  「スクリプト」: {
    "serve-dev": "vue-cli-service サーブ --mode dev --port 8080",
    "serve-prod": "vue-cli-service サーブ --mode prod",
    "build-dev": "vue-cli-service ビルド --mode dev",
    "build-prod": "vue-cli-service ビルド --mode prod",
    "lint": "vue-cli-service lint"
  },
  「依存関係」: {
    "@ant-design/icons-vue": "^5.1.9",
    "ant-design-vue": "^2.0.0-rc.3",
    "axios": "^0.21.0",
    "vue": "^3.0.0",
    "vue-router": "^4.0.0-0",
    "vuex": "^4.0.0-0"
  },
  「devDependencies」: {
    "@typescript-eslint/eslint-plugin": "^4.18.0",
    "@typescript-eslint/パーサー": "^4.18.0",
    "@vue/cli-plugin-eslint": "~4.5.0",
    "@vue/cli-plugin-router": "~4.5.0",
    "@vue/cli-plugin-typescript": "~4.5.0",
    "@vue/cli-plugin-vuex": "~4.5.0",
    "@vue/cli-service": "~4.5.0",
    "@vue/コンパイラ-sfc": "^3.0.0",
    "@vue/eslint-config-typescript": "^7.0.0",
    "eslint": "^6.7.2",
    "eslint-プラグイン-vue": "^7.0.0",
    "typescript": "~4.1.5"
  }
}

console.log('環境',process.env.NODE_ENV);
console.log('server',process.env.VUE_APP_SERVER);

'vue' から {createApp} をインポートします。
'ant-design-vue' から Antd をインポートします。
'./App.vue' からアプリをインポートします。
'ant-design-vue/dist/antd.css' をインポートします。
'./router' からルーターをインポートします。
'./store' からストアをインポートします。
'axios' から axios をインポートします。
axios.defaults.baseURL=process.env.VUE_APP_SERVER;

// 開発が簡単という利点がありますが、パッケージ化するとファイルサイズが大きくなるという欠点があります（ただし、影響はありません）
createApp(App).use(store).use(router).use(Antd).mount('#app')

console.log('環境', process.env.NODE_ENV);
console.log('server', process.env.VUE_APP_SERVER);

<テンプレート>
  <a-レイアウト>
    `<a-layout-sider width="200" style="background: #fff">
      <a-メニュー
          モード="インライン"
          v-model:selectedKeys="selectedKeys2"
          v-model:openKeys="openKeys"
          :style="{ 高さ: '100%', 右境界線: 0 }"
      >
        <a-サブメニューキー="sub1">
          <テンプレート #タイトル>
                <span>
                  <ユーザーによるアウトライン />
                  サブナビ1
                </span>
          </テンプレート>
          <a-menu-item key="1">オプション1</a-menu-item>
          <a-menu-item key="2">オプション2</a-menu-item>
          <a-menu-item key="3">オプション3</a-menu-item>
          <a-menu-item key="4">オプション4</a-menu-item>
        </a-サブメニュー>
        <a-サブメニューキー="sub2">
          <テンプレート #タイトル>
                <span>
                  <ラップトップのアウトライン />
                  サブナビ2
                </span>
          </テンプレート>
          <a-menu-item key="5">オプション5</a-menu-item>
          <a-menu-item key="6">オプション6</a-menu-item>
          <a-menu-item key="7">オプション7</a-menu-item>
          <a-menu-item key="8">オプション8</a-menu-item>
        </a-サブメニュー>
        <a-サブメニューキー="sub3">
          <テンプレート #タイトル>
                <span>
                  <通知の概要 />
                  サブナビ3
                </span>
          </テンプレート>
          <a-menu-item key="9">オプション9</a-menu-item>
          <a-menu-item key="10">オプション10</a-menu-item>
          <a-menu-item key="11">オプション11</a-menu-item>
          <a-menu-item key="12">オプション12</a-menu-item>
        </a-サブメニュー>
      </a-メニュー>
  </a-layout-sider>
    `
    <a-list 項目レイアウト="垂直" サイズ="大"
            :grid="{ ガター: 16, 列: 3 }" :data-source="ebooks1">
      <テンプレート #renderItem="{ アイテム }">
        <a-list-item キー="item.name">
          <テンプレート #アクション>
          <span v-for="{ type, text } アクション内" :key="type">
            <コンポーネント v-bind:is="type" style="margin-right: 8px"/>
            {{ 文章 }}
          </span>
          </テンプレート>
          <a-list-item-meta :description="item.description">
            <テンプレート #タイトル>
              <a :href="item.href" rel="外部nofollow" >{{ item.name }}</a>
            </テンプレート>
            <テンプレート #アバター><a-アバター :src="item.cover" /></テンプレート>
          </a-リスト項目メタ>
        </a-リスト項目>
      </テンプレート>
    </a-リスト>
  </a-レイアウト>
</テンプレート>

<script lang="ts">
'vue' から {defineComponent、onMounted、reactive、ref、toRef} をインポートします。
'axios' から axios をインポートします。
'@ant-design/icons-vue' から {LikeOutlined、MessageOutlined、StarOutlined} をインポートします。

const listData: レコード<文字列, 文字列>[] = [];

エクスポートデフォルトdefineComponent({
  コンポーネント:
    星のアウトライン、
    アウトラインのように、
    メッセージアウトライン、
  },
  名前: 'ホーム'、
  設定（）{
    const ページネーション = {
      onChange: (ページ: 番号) => {
        console.log(ページ);
      },
      ページサイズ: 3,
    };
    constアクション: Record<文字列, 文字列>[] = [
      { タイプ: 'StarOutlined'、テキスト: '156' },
      { タイプ: 'LikeOutlined'、テキスト: '156' },
      { タイプ: 'MessageOutlined'、テキスト: '2' },
    ];
    console.log('セットアップ');
    //データバインディングにはrefを使用します。const ebooks=ref();
    // リアクティブデータバインディングを使用する const ebooks1 = reactive({books:[]})
    マウント時(()=>{
      axios.get("/ebook/list?name=").then(応答 => {
        console.log("マウントされた状態");
        定数データ = レスポンス.データ;
        ebooks.value = データコンテンツ;
        ebooks1.books = データコンテンツ;
        console.log(応答);
      })
    })
    戻る {
      ページネーション、
      行動、
      電子書籍1: 電子書籍、
      ebooks2: toRef(ebooks1, "書籍")
    }

  }
});
</スクリプト>
<スタイルスコープ>
.ant-レイアウト-サイダー {
  フロート: 左;
}

.ant-アバター{
  幅: 50px;
  高さ: 50px;
  行の高さ: 50px;
  境界線の半径: 8%;
  マージン: 5px 0;
}
</スタイル>