vue3前端小总结

最近再写前端项目，写得我晕头转向()，不过我还是有学到和总结一些东西的，于是记录下来。

首先是main.js脚本(或者main.ts)，这个脚本是用来写一些全局配置相关的东西的。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
import { createApp } from 'vue'
import App from './App.vue'
import naive from 'naive-ui'
import { createDiscreteApi } from 'naive-ui'
import { router } from './common/router'
import { createPinia } from "pinia";
import axios from 'axios'

// 服务端地址
axios.defaults.baseURL = "http://localhost:8080"
// 独立API
const { message, notification, dialog} = createDiscreteApi(
    ['message', 'dialog', 'notification']
  )

const app = createApp(App)
//provide提供出去axios
app.provide('axios',axios)
app.provide('message',message)
app.provide('notification',notification)
app.provide('dialog',dialog)

app.use(naive)
app.use(createPinia());
app.use(router);

app.mount('#app')

其次是路由配置，路由的配置项写在router.js文件，通过exports暴露出去

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
import { createRouter, createWebHashHistory } from "vue-router";

let routes = [
    { path: "/test", component: () => import("../views/Test.vue") },
    { path: "/login", component: () => import("../views/Login.vue") },
    { path: "/dashboard", component: () => import("../views/Dashboard/Dashboard.vue"),children:[
        {path: "/dashboard/article",component:()=>import("../views/Dashboard/Article.vue")},
        {path: "/dashboard/category",component:()=>import("../views/Dashboard/Category.vue")}
    ]}
]

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

export { router, routes };

接着是App.vue，只需写个router-view标签基本完事。

1
2
3
4
5
6
7
8
9
<template>
  <router-view></router-view>
</template>

<script setup>
</script>

<style scoped>
</style>