三,路由以及其他

一,集成路由

1.安装：

npm i vue-router@4

2.在src目录下面添加router文件夹 然后在文件夹下添加index.ts文件 index.ts:

import { createRouter, createWebHashHistory } from "vue-router"; 

// 引入通用的路由
import commRoute from "../router/commonRoute/common";

//创建路由：history模式
const router = createRouter({
    history: createWebHashHistory(),
    routes:[...commRoute]
})

//简单的路由导航守卫可以根据自己的需求修改
router.beforeEach((to,from,next)=>{
    let token = localStorage.getItem('token')
    if(token){
        next()
    }else{
        console.log(to.path,'--to.path')
        if(to.path!=='/login'){
            next({
                path:'/login'
            })
        }else{
            next()
        }
    }
})

export default router 

3. 引入通用路由-在router文件夹下面新建commonRoute文件夹新建common.ts文件

common.ts

import {RouteRecordRaw } from "vue-router"; 
const commRoute: Array<RouteRecordRaw> = [
    {
        path:'/index',
        name:'Index',
        component:() => import('@/views/index/index.vue')
    },
    {
        path:'/login',
        name:'Login',
        component:() => import('@/views/login/login.vue')
    },
    {path:'/',redirect:{name:'Login'}}
]

export default commRoute

4.在main.ts中挂载

main.ts：

import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import router from './router/index'
import store from './store/index'
const app = createApp(App)

app.use(router).use(store).use(ElementPlus).mount('#app')

二,安装scss/less（可选）

1.安装

npm i sass -D
npm i less -D

还有其他的就可以根据自己项目的需求去添加了，我们基础的搭建就ok啦