[JavaScript知识库]VUE3-博客全栈 04-前端

本节：开始创建项目，搭建基础的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.把路由暴露出去，才可以使用。