step1:导入vuetify

yarn add vuetify

step2: package.json数据 D:\vue_project\project-vue-json-main\package.json

  "dependencies": {"axios": "^1.6.8","json-server": "^1.0.0-alpha.23","vue": "^3.3.4","vue-router": "^4.2.5","vuetify": "^3.5.17"},

step3: main.js引入 D:\vue_project\project-vue-json-main\src\main.js

javascript">import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import Axios from 'axios'
// Vuetify
import 'vuetify/styles'
import { createVuetify } from 'vuetify'
import * as components from 'vuetify/components'
import * as directives from 'vuetify/directives'const vuetify = createVuetify({components,directives,
})createApp(App).use(Axios).use(router).use(vuetify).mount('#app')

step4: router 导航 D:\vue_project\project-vue-json-main\src\App.vue

<script setup>javascript">
import { RouterLink, RouterView } from 'vue-router'
</script><template><header><nav><RouterLink to="/">Home</RouterLink><RouterLink to="/new">Create new</RouterLink></nav></header><main><RouterView /></main>
</template>

step5: 导航管理类 D:\vue_project\project-vue-json-main\src\router\index.js

javascript">import { createRouter, createWebHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue'const router = createRouter({history: createWebHistory(import.meta.env.BASE_URL),routes: [{path: '/',name: 'home',component: HomeView},{path: "/new",name: "new document",component: () => import("../views/NewDocumentView.vue")}]
})export default router

step6: D:\vue_project\project-vue-json-main\src\views\HomeView.vue

<template><div id="app"><v-btn @click="topPage">新增</v-btn><v-btn @click="subPage">修改</v-btn><v-btn @click="userListPage">删除</v-btn><v-btn @click="userListPage">查询</v-btn></div>
</template><script>javascript">
import Axios from 'axios'export default {name: 'HelloWorld',props: {msg: String},data() {return {list: []}},created(){this.fetch()},methods: {topPage() {const a = 3;const b = 5;const c = a + b;console.log("click test1"+c)},subPage() {this.createUser()console.log("click test2")},userListPage() {console.log("click test3")},createUser() {console.log("click test4")},fetch() {Axios.get("/clientes/1").then(res => {this.list = res.dataconsole.log(res)}).catch( err=> {console.log(err)})}}
}
</script><style>
</style>

end