(小規模プログラム) uniapp+vite4+vue3 | uni-app+uview-plus テンプレートに基づいてクロスエンド プロジェクトを構築する

(小規模プログラム) uniapp+vite4+vue3 | uni-app+uview-plus テンプレートに基づいてクロスエンド プロジェクトを構築する

---

---

バージョン情報：

HBuilderX: 3.8.4
Vite: 4.2.1
uView-Plus: 3.1.31

1. uniapp+vue3 プロジェクトを作成します。

1. エディターのファイル > 新規 > プロジェクトをクリックします (ショートカット キー Ctrl+N)

2. ユニアプリ プロジェクトを選択し、プロジェクト名/パスを入力し、プロジェクト テンプレートを選択して、vue3 バージョンを確認し、[作成] をクリックして正常に作成します。

3. エディターの「実行」をクリックし、「ブラウザーで実行」>「ブラウザーを選択」

もちろん、携帯電話やエミュレータ上で実行したり、アプレット ツール上で実行したりすることもできます。

ここでは、単純な uniapp+vue3 プロジェクトがビルドされます。

---

2. uniapp+vue3 コンポーネント ライブラリ uview-plus および uni-ui の導入（省略）

現在、uniapp vue3 コンポーネント ライブラリは uni-ui (公式)、uview-plus などをサポートしています。

1. hbuilderx を使用して uview-plus コンポーネント ライブラリをインポートします

2. uview-plus とスタイルをインポートします (3 ファイル)

// main.js
import uviewPlus from '@/uni_modules/uview-plus'

import {
    
     createSSRApp } from 'vue'
export function createApp() {
    
    
  const app = createSSRApp(App)
  app.use(uviewPlus)
  return {
    
    
    app
  }
}

/* uni.scss */
@import '@/uni_modules/uview-plus/theme.scss';

/* app.vue */
<style lang="scss">
    /* 注意要写在第一行，同时给style标签加入lang="scss"属性 */
    @import "@/uni_modules/uview-plus/index.scss";
</style>

---

注: コードを送信するときに uni-modules を送信する必要があります

---

ソリューションのリファレンス: https://www.cnblogs.com/xiaoyan2017/p/17487018.html