vite+vue3+element-plus プロジェクトをビルドする手順

$ npm init vite-app <プロジェクト名>
$ cd <プロジェクト名>
$ npmインストール
$ npm 実行 dev

npm インストール element-plus --save

'vue' から {createApp} をインポートします。
'element-plus' から ElementPlus をインポートします。
'element-plus/lib/theme-chalk/index.css' をインポートします。
'./App.vue' からアプリをインポートします。

const app = createApp(App)
app.use(ElementPlus)
app.mount('#app')

npm と sass -D

npm と eslint -D

npx eslint --init

vue-router@4 を npm でインストールします

'vue-router' から VueRouter として * をインポートします。

定数ルート = [
  {
    パス： '/'、
    コンポーネント: () => import('../page/Home.vue')
  }, {
    パス: '/login',
    コンポーネント: () => import('../page/Login.vue')
  }
]

デフォルトのVueRouter.createRouterをエクスポートします({
  履歴: VueRouter.createWebHashHistory(),
  ルート
})

'./router' からルーターをインポートします
//...
app.use(ルーター)

npm インストール vuex@next --save

'vuex' から {createStore} をインポートします。

エクスポートデフォルトcreateStore({
  州 （） {
    戻る {
      ユーザー名: ''
    }
  },
  突然変異:
    setUserName (状態、ペイロード) {
      state.username = ペイロード
    }
  }
})

'./store' から vuex をインポートします
//...
アプリを使用する(vuex)

npmとaxios

// アクシオス
'axios' から axios をインポートします
// '../../config' から設定をインポートします
'vue-router' から { useRouter } をインポートします。

エクスポートデフォルト関数（）{
  // 1. リクエストを送信するときに、トークンがある場合は、リクエスト ヘッダーに添付する必要があります。const token = localStorage.getItem('token')
  インスタンス = axios

  if (トークン) {
    インスタンス = axios.create({
      // ベースURL: config.server,
      ヘッダー: {
        認証: 'Bearer' + トークン
      }
    })
  }

  定数ルーター = useRouter()
  インスタンスインターセプターレスポンスの使用(
    (回答) => {
      // 2. 応答時にトークンがある場合はトークンをローカルに保存する（localstorage）
      if (resp.data.data.token) {
        localStorage.setItem('token', resp.data.data.token)
      }
      // 3. 応答時に、応答メッセージコードが403（トークンなし、トークン無効）の場合は、トークンをローカルで削除します
      （応答データコード === 403）の場合{
        localStorage.removeItem('トークン')
        localStorage.removeItem('ユーザー名')
        router.push({ name: 'ログイン' })
      }
      応答を返す
    },
    (エラー) => {
      Promise.reject(err) を返します。
    }
  ）

  インスタンスを返す
}

'./axios.js' からのインポート要求
'../../config' から設定をインポートします
エクスポートデフォルト{
  // ログイン login (params) {
    request().post(`${config.server}/login`, params) を返します。
  },
  // ユーザーリストを取得する getUserList (params) {
    リクエスト()を返します。get(`${config.server}/user/list`, {
      パラメータ: パラメータ
    })
  },
  // ユーザーを追加する createUser (params) {
    request().post(`${config.server}/user/`, params) を返します。
  },
  //...

<テンプレート>
  <div class="user-wrap">
      <el-ボタン
        クラス="create-btn"
        タイプ="成功"
        サイズ="小"
      @click="handleCreate">ユーザーを追加+</el-button>
      <el-テーブル
        :data="テーブルデータ"
        スタイル="幅: 100%">
        <el-テーブル列
            label="ユーザー名"
            prop="ユーザー名">
        </el-table-column>
        <el-テーブル列
            label="パスワード"
            prop="パスワード">
        </el-table-column>
        <el-テーブル列
            align="right">
            <テンプレート #ヘッダー>
                <el-入力
                v-model="検索"
                @blur="検索ユーザー"
                サイズ="ミニ"
                placeholder="検索するユーザー名を入力してください"/>
            </テンプレート>
            <テンプレート #default="スコープ">
                <el-ボタン
                サイズ="ミニ"
                @click="handleEdit(scope.$index, scope.row)">編集</el-button>
                <el-ボタン
                サイズ="ミニ"
                タイプ="危険"
                @click="handleDelete(scope.$index, scope.row)">削除</el-button>
            </テンプレート>
        </el-table-column>
    </el-table>
    <el-ページネーション
      :hide-on-single-page="1 ページで非表示"
      クラス="ページ折り返し"
      @size-change="ハンドルサイズ変更"
      @current-change="現在の変更を処理する"
      :current-page="現在のページ"
      :ページサイズ="[10, 20, 30, 40]"
      :page-size="ページサイズ"
      layout="total, sizes, prev, pager, next, jumper"
      :total="合計数">
    </el-pagination>
    <el-dialog title="ユーザー情報" v-model="dialogFormVisible">
        <el-form :model="フォーム">
            <el-form-item label="ユーザー名" :label-width="フォームラベルの幅">
                <el-input v-model="form.username" autocomplete="オフ"></el-input>
            </el-form-item>
            <el-form-item label="パスワード" :label-width="フォームラベルの幅">
                <el-input v-model="form.password" オートコンプリート="オフ"></el-input>
            </el-form-item>
        </el-form>
        <テンプレート #フッター>
            <span class="ダイアログフッター">
                <el-button @click="dialogFormVisible = false">キャンセル</el-button>
                <el-button type="primary" @click="confirmUser">確認</el-button>
            </span>
        </テンプレート>
    </el-ダイアログ>
  </div>
</テンプレート>

<スクリプト>
'vue' から { ref, computed } をインポートします
'../../../api/index' から api をインポートします
'element-plus' から { ElMessage, ElMessageBox } をインポートします。

エクスポートデフォルト{
  設定 （） {
    ステータスを '' にします
    ユーザーIDをnullにする
    定数フォームラベル幅 = ref('120px')

    // ユーザーリストを取得 const tableData = ref([])
    非同期関数 getList (params) {
      const res = api.getUserList(params) を待機します
      （res.data.success）の場合{
        テーブルデータ値 = res.data.data.userList
        合計カウント値 = res.data.data.count
        検索値 = ''
      } それ以外 {
        ElMessage.error('ユーザーリストの取得に失敗しました:' + res.data.msg)
      }
    }
    getList()

    定数フォーム = ref({
      ユーザー名: ''、
      パスワード: ''
    })

    定数 dialogFormVisible = ref(false)

    // ユーザー情報を送信する async function confirmUser() {
      // 情報が完全であることを確認します if (!(form.value.username && form.value.password)) {
        ElMessage.error('フォーム情報が不完全です')
        戻る
      }
      スイッチ（ステータス）{
        ケース '作成':
          createUser(フォームの値)
          壊す
        ケース '編集':
          updateUser(ユーザーID、フォームの値)
          壊す
      }
    }

    // ユーザー非同期関数handleCreate()を追加{
      フォームの値 = {
        ユーザー名: ''、
        パスワード: ''
      }
      dialogFormVisible.値 = true
      ステータス = '作成'
    }
    // ユーザー情報を追加する async function createUser (params) {
      const res = api.createUser(params) を待機します
      （res.data.success）の場合{
        getList()
        ElMessage.成功({
          メッセージ: '正常に追加されました'、
          タイプ: '成功'
        })
        dialogFormVisible.値 = false
      } それ以外 {
        ElMessage.error('追加に失敗しました:' + res.data.msg)
      }
    }

    // ユーザーを編集する async function handleEdit (index, row) {
      console.log(インデックス、行)
      dialogFormVisible.値 = true
      ステータス = '編集'
      form.value.username = row.username
      フォーム.値.パスワード = 行.パスワード
      ユーザーID = 行ID
    }
    // ユーザー情報を変更する async function updateUser (id, params) {
      const res = api.updateUser(id, params) を待機します
      （res.data.success）の場合{
        ElMessage.成功({
          メッセージ: 「変更は成功しました」
          タイプ: '成功'
        })
        getList()
        dialogFormVisible.値 = false
      } それ以外 {
        ElMessage.error('変更に失敗しました: ' + res.data.msg)
      }
    }

    // ユーザーを削除する const handleDelete = async (index, row) => {
      ElMessageBox.confirm('この操作によりユーザーは永久に削除されます。続行しますか?', 'Prompt', {
        confirmButtonText: '確認'、
        cancelButtonText: 'キャンセル'、
        タイプ: '警告'
      }).then(非同期() => {
        delUser(行ID)を待機します
      }).catch(() => {
        エルメッセージ({
          タイプ: '情報'、
          メッセージ: '削除されました'
        })
      })
    }
    // ユーザー情報を削除する async function delUser (id) {
      const res = api.delUser(id) を待機します
      （res.data.success）の場合{
        getList()
        ElMessage.成功({
          タイプ: '成功'、
          メッセージ: '正常に削除されました!'
        })
      } それ以外 {
        ElMessage.error('削除に失敗しました: ' + res.data.msg)
      }
    }

    // ユーザーを検索 const search = ref('')
    非同期関数searchUser(){
      現在のページの値 = 1
      ページサイズ値 = 10
      if (検索値 === '') {
        getList({ ページインデックス: 現在のページの値、ページサイズ: ページサイズの値 })
        戻る
      }
      現在のページ.val = 1
      const res = api.findUserByUsername({ ユーザー名: search.value }) を待機します
      （res.data.success）の場合{
        テーブルデータ値 = res.data.data.userList
        ElMessage.成功({
          メッセージ: 「検索成功」
          タイプ: '成功'
        })
      } それ以外 {
        ElMessage.error('変更に失敗しました: ' + res.data.msg)
      }
    }

    // ページング関連 const totalCount = ref(0)
    定数currentPage = ref(1)
    定数ページサイズ = ref(10)
    関数handleSizeChange(val) {
      ページサイズ.値 = val
      getList({ ページインデックス: 現在のページ値、 ページサイズ: val })
    }
    関数handleCurrentChange(val){
      現在のページの値 = val
      getList({ ページインデックス: val, ページサイズ: pageSize.value })
    }
    // ページが複数ある場合はページングプラグインを非表示にする const hideOnSinglePage = computed(() => {
      totalCount.value <= 10 を返す
    })

    戻る {
      テーブルデータ、
      検索、
      ダイアログフォーム表示、
      形状、
      フォームラベル幅、
      ユーザーの作成、
      ハンドル編集、
      ハンドル削除、
      ユーザー確認、
      ハンドル作成、
      検索ユーザー、
      現在のページ、
      合計数、
      ハンドルサイズ変更、
      ハンドル現在変更、
      ページサイズ、
      単一ページで非表示
    }
  }
}
</スクリプト>

<style lang="scss" スコープ>
    .user-wrap{
        幅: 100%;
        最小幅: 500px;
        .create-btn{
            下マージン: 10px;
            ディスプレイ: フレックス;
            コンテンツの端揃え: flex-end;
        }
        .ページ折り返し{
            上マージン: 10px;
        }
    }
</スタイル>