2021-03-16-vueプロジェクトは、Web側フレームワーク要素-UIを統合し、モバイル側フレームワークの前衛的な操作手順を統合します

序文

• Vueは人気のあるフロントエンドフレームワークであり、それに応じて、vueに対応する多くのスキンコンポーネントライブラリが誕生しました。モバイルページやWebページでvueが使用できるコンポーネントライブラリは多数あります。
• 2つのコンポーネントライブラリを使用して、vueとの統合手順について説明しましょう

element-ui

• element-ui公式ドキュメント
• インストール

npm i element-ui -S

• main.jsは次のコードを追加します

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);

• たとえば、使用するには、公式のelement-uiに直接移動してコンポーネントコードをコピーし、プロジェクトで新しく作成されたvueファイルに入れて使用します

<template>
  <el-table
      ref="multipleTable"
      :data="tableData"
      tooltip-effect="dark"
      style="width: 100%"
      @selection-change="handleSelectionChange">
      <el-table-column
        type="selection"
        width="55">
      </el-table-column>
      <el-table-column
        v-if="false"
        width="120"
        prop="id"
      >
      </el-table-column>
 </el-table>
</template>

勝った

• ヴァント公式文書
• インストール

# Vue 2 项目，安装 Vant 2：
npm i vant -S

# Vue 3 项目，安装 Vant 3：
npm i vant@next -S

• main.jsは次のコードを追加します

import Vant from 'vant';
import 'vant/lib/index.css';

Vue.use(Vant);

• を使用して（たとえば）、公式のvantに直接移動してコンポーネントコードをコピーし、プロジェクトで新しく作成されたvueファイルに入れて使用します

<template>
      <van-search
        v-model="value"
        shape="round"
        background="#4fc08d"
        placeholder="请输入备件编码"
        @search="onSearch"
        @cancel="onCancel"
      />
</template>