pnpm vite create jdz

cd jdz

pnpm install
pnpm run dev

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path'

export default defineConfig({
  plugins: [
    vue()
  ],
  resolve: {
    alias: {
      '@': path.resolve(__dirname, 'src')
    }
  },
})

pnpm install vue-router@4

import { createRouter, createWebHashHistory } from 'vue-router'

const routes = [
  { path: '/', name: 'Home', component: () => import('@/views/home.vue') },
]

const router = createRouter({
  history: createWebHashHistory(),
  routes
})
export default router

import { createApp } from 'vue'
import App from './App.vue'
import router from './router/index'
const app = createApp(App)

app.use(router)
app.mount('#app')

import { useRouter, useRoute } from 'vue-router'

const route = useRoute()
const router = useRouter()

const {data} = route.query
router.push({path:'/page',query:{data:1}})

pnpm i vant

pnpm add unplugin-vue-components -D

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// vant按需引入
import Components from 'unplugin-vue-components/vite';
import { VantResolver } from 'unplugin-vue-components/resolvers';

export default defineConfig({
  plugins: [
    vue(),
    Components({
      resolvers: [VantResolver()],
    })
  ],
})

<template>
  <van-button type="primary" @click="alert(1)">button</van-button>
</template>

pnpm install pinia

import { defineStore } from 'pinia'

export const useStore = defineStore('store', 
  state: () => {
    return {
      userInfo: null,
      allImages: null,
      scenic: [],
      food: [],
      play: [],
      porcelain: [],
    }
  })

import { createPinia } from 'pinia'

app.use(createPinia())

<script setup>
import { useStore, storeToRefs } from '@/store'
import { computed } from 'vue'

const store = useStore()

// 可以直接使用
cosnt scenic = store.scenic

// 转成ref
const { scenic, food, porcelain } = storeToRefs(store)

// 使用computed
const isLike = computed(() => store.userInfo ? store.userInfo.likes : false)
</script>