本节：开始创建项目，搭建基础的main.js配置和路由配置
整个项目上传到了gitee，这是链接:VUE3 博客全栈: VUE3 博客全栈
一、项目搭建
1.搭建一个vue3项目，搭建流程：（(71条消息) Vue基础-02_V_zcm的博客-CSDN博客）
2. 然后在项目下，要安装 axios ,pinia,sass,vue-router,naive-ui,wangeditor 5 富文本编辑器 ，用 npm install 模块名字就可以安装了，,vue-router,naive-ui,wangeditor 5一些可能会更新版本的模块，要去对应网站看安装代码
3.安装完，在终端打开项目：命令行执行： npm run dev ，页面可以成功打开项目就搭建好了。
二、在main.js文件 ，进行基础配置，将要用的一些全局模块在这里引入。比如：用的组件框架，pinia,aixios,自己创建的路由，自己创建的store文件；一些组件或者内容在这里注入，然后在别的页面引入inject方法，就可以全局调用了。
// 以上的代码顺序很重要，比如：要先创建才能执行，挂载要放在所有的use下面等。
import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
// 首先要安装 axios ,pinia,sass,vue-router,naive-ui,wangeditor 5富文本编辑
import naive from 'naive-ui' //1.引入模块
import { createDiscreteApi } from 'naive-ui' //1.引入模块
import { AdminStore } from './stores/AdminStore' //1.引入
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)
app.provide('axiosTool', axios) //provide(使用的名字，真正注入的程序)方法注入
// 然后在别的页面，要用的时候，在vue里面引入inject就可以注入成功
app.provide('message', message)
app.provide('notification', notification)
app.provide('dialog', dialog)
app.provide("server_url", axios.defaults.baseURL)
app.use(naive)
app.use(createPinia())
//拦截器，这样就不用每次接口都传header了,
// 每次请求都会先拦截下来，加个headers信息再请求
const adminStore = AdminStore();
axios.interceptors.request.use((config) => {
config.headers.token = adminStore.token
return config
})
app.use(router)
app.mount('#app') //挂载要放在所有的use下面
// 以上的代码顺序很重要，因为要先创建再执行，（app.vue这些文件的 margin和padding布局设置为0）
三、在common 下创建一个router.js作为路由器：
路由器的主要内容步骤：
1.引入路由模块 ，2.设置路由模式 ， 3.把路由暴露出去，才可以使用。 4.路由的设置
import { createRouter, createWebHashHistory } from 'vue-router' //1.引入路由模块
let routes = [ //4.路由的设置
{ path: '/test', component: () => import('../views/Test.vue') }, //路由
{ path: '/', component: () => import('../views/HomePage.vue') },
{ path: '/login', component: () => import('../views/LoginView.vue') },
{ path: '/detail', component: () => import('../views/Detail.vue') },
{
path: '/dashboard', component: () => import('../views/dashboard/Dashboard.vue'),
children: [//子路由
{ path: "/dashboard/category", component: () => import('../views/dashboard/Category.vue') },
{ path: "/dashboard/article", component: () => import('../views/dashboard/Article.vue') },
]
},
]
const router = createRouter({ // 2.设置路由模式
history: createWebHashHistory(),
routes,//当前页面的路由信息
})
export { router, routes } // 3.把路由暴露出去，才可以使用。