赞
踩
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
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。