pinia

20.vue3/project5/package.json

@@ -11,17 +11,22 @@
     "type-check": "vue-tsc --build"
   },
   "dependencies": {
+    "element-plus": "^2.14.3",
     "pinia": "^4.0.2",
+    "vant": "^4.10.0",
     "vue": "^3.5.38",
     "vue-router": "^5.1.0"
   },
   "devDependencies": {
     "@tsconfig/node24": "^24.0.4",
     "@types/node": "^24.13.2",
+    "@vant/auto-import-resolver": "^1.3.0",
     "@vitejs/plugin-vue": "^6.0.7",
     "@vue/tsconfig": "^0.9.1",
     "npm-run-all2": "^9.0.2",
     "typescript": "~6.0.0",
+    "unplugin-auto-import": "^21.0.0",
+    "unplugin-vue-components": "^32.1.0",
     "vite": "^8.0.16",
     "vite-plugin-vue-devtools": "^8.1.2",
     "vue-tsc": "^3.3.5"

20.vue3/project5/src/App.vue

@@ -12,6 +12,20 @@
     <button @click="addMain">增加</button>
     <button @click="changeWeather">修改天气</button>
     <button @click="changeMain">修改数据</button>
+    <van-button type="primary">主要按钮</van-button>
+    <van-button type="success">成功按钮</van-button>
+    <van-button type="default">默认按钮</van-button>
+    <van-button type="danger">危险按钮</van-button>
+    <van-button type="warning">警告按钮</van-button>
+
+    <div class="button-row">
+      <el-button plain>Plain</el-button>
+      <el-button type="primary" plain>Primary</el-button>
+      <el-button type="success" plain>Success</el-button>
+      <el-button type="info" plain>Info</el-button>
+      <el-button type="warning" plain>Warning</el-button>
+      <el-button type="danger" plain>Danger</el-button>
+    </div>
   </div>
 </template>
 

20.vue3/project5/src/main.ts

@@ -5,10 +5,22 @@ import App from './App.vue'
 import router from './router'
 import { createPinia } from 'pinia';
 
+// 1. 引入你需要的组件
+import { Button } from 'vant';
+// 2. 引入组件样式
+import 'vant/lib/index.css';
+// import AutoImport from 'unplugin-auto-import/vite';
+// import Components from 'unplugin-vue-components/vite';
+// import { VantResolver } from '@vant/auto-import-resolver';
+import ElementPlus from 'element-plus'
+import 'element-plus/dist/index.css'
+
 const pinia = createPinia()
 const app = createApp(App)
 
+app.use(Button);
 app.use(router)
+app.use(ElementPlus)
 app.use(pinia)
 
 app.mount('#app')

20.vue3/project5/src/store/count.ts

@@ -23,3 +23,4 @@ export const useCountStore = defineStore('count1', {
         }
     }
 })
+