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
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>
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
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>
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.data
console.log(res)
}).catch( err=> {
console.log(err)
})
}
}
}
</script>
<style>
</style>
end