vue3 プロジェクトを素早く構築し、関連機能を紹介する vite+ts の詳細な説明

npm init vite-app <プロジェクト名>

'path' からパスをインポートする

モジュール.エクスポート = {
 エイリアス: {
 '/@/': path.resolve(__dirname, './src')
 },
 最適化依存関係: {
 含める: ['lodash']
 },
 プロキシ： {}
}

'vue-router' から {createRouter、createWebHistory} をインポートします。

定数ルート = [
 {
 パス： '/'、
 名前: 'ホーム'、
 コンポーネント: () => import('/@/views/Home.vue')
 },
 {
 パス: '/lifeCycle',
 名前: 'ライフサイクル',
 コンポーネント: () => import('/@/views/LifeCycle.vue')
 }
]

エクスポートデフォルトcreateRouter({
 履歴: createWebHistory('/krry/'),
 ルート
})

{
 "コンパイラオプション": {
 ...// その他の構成「パス」: {
  "/@/*": [
  "ソース/*"
  ]
 },
 "ライブラリ": [
  「esnext」、
  「ドム」、
  "dom.iterable",
  「スクリプトホスト」
 ]
 },
 "含む"： [
 "src/**/*.ts",
 "src/**/*.tsx",
 "src/**/*.vue",
 "src/types/images.d.ts",
 "テスト/**/*.ts",
 「テスト/**/*.tsx」
 ]、
 「除外」: [
 「ノードモジュール」
 ]
}

モジュール '*.vue' を宣言します {}

モジュール '*.svg' を宣言します
モジュール '*.png' を宣言します
モジュール '*.jpg' を宣言します
モジュール '*.jpeg' を宣言します
モジュール '*.gif' を宣言します
モジュール '*.bmp' を宣言します
モジュール '*.tiff' を宣言します

'vue' から {createApp} をインポートします。
'/@/router' からルーターをインポートします

'/@/App.vue' からアプリをインポートします

const app = createApp(App)
app.use(ルーター)
app.mount('#app')

// props - コンポーネントが受け取るプロパティ context - コンテキスト setup(props, context) {
 戻る {
 //バインドするデータとメソッド}
}

'vue' から { toRefs } をインポートします

セットアップ(プロパティ) {
 const { title } = toRefs(props)
 console.log(タイトル.値)
}

設定（） {
 マウント時(() => {
 console.log('コンポーネントがマウントされました')
 })

 マウント解除時(() => {
 console.log('コンポーネントのアンインストール')
 })

 更新時(() => {
 console.log('コンポーネントの更新')
 })

 更新前に(() => {
 console.log('コンポーネントが更新されます')
 })

 アクティブ化(() => {
 console.log('keepAlive コンポーネントがアクティブ化されました')
 })

 onDeactivated(() => {
 console.log('keepAliveコンポーネントがアクティブ化されていません')
 })

 戻る {}
}

<テンプレート>
 <div>
 <div>
  <ul v-for="eleList 内の ele" :key="ele.id">
  <li>{{ 要素名 }}</li>
  </ul>
  <button @click="addEle">追加</button>
 </div>
 <div>
  <ul v-for="todoList 内の要素" :key="ele.id">
  <li>{{ 要素名 }}</li>
  </ul>
  <button @click="addTodo">追加</button>
 </div>
 </div>
</テンプレート>

<スクリプト>
'vue' から { ref, reactive, toRefs } をインポートします。

エクスポートデフォルト{
 設定（） {
 // 参照
 定数eleList = ref([])
 関数addEle() {
  len = eleList.value.lengthとします
  eleList.value.push({
  id:len,
  名前: 'ref increment' + len
  })
 }

 // リアクティブ
 const dataObj = リアクティブ({
  やることリスト: []
 })
 関数addTodo() {
  len = dataObj.todoList.lengthとします
  dataObj.todoList.push({
  id:len,
  名前: 'リアクティブ増分' + 長さ
  })
 }

 戻る {
  要素リスト、
  追加エレ、
  追加ToDo、
  ...toRefs(データオブジェクト)
 }
 }
}
</スクリプト>

// 計算された
合計を計算します(() => dataObj.todoList.length + eleList.value.length)
console.log('セットアップ参照は計算された値:' + sum.value)

//時計
時計（
 要素リスト、
 (現在の値、古い値) => {
 console.log('リスナー:', curVal, oldVal)
 },
 {
 深い: 本当
 }
）

定数カウント = ref(0)
// count の値が変更されると、コールバックが実行されます const stop = watchEffect(() => console.log(count.value))

// リスニングを停止する stop()

const unwatch = this.$watch('say', curVal => {})

// リスニングを停止する unwatch()

'vue-router' から {useRoute, useRouter} をインポートします。

const route = useRoute() // vue2 の this.$route と同等
const router = useRouter() // vue2 の this.$router と同等

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

設定（）{
 const store = useStore() // vue2 の this.$store と同等
 store.dispatch() // ストアオブジェクトを通じて非同期タスクをディスパッチする store.commit() // ストアデータの変更をコミットする let category = computed(() => store.state.home.currentCagegory
 { カテゴリ } を返す
}