前端项目的准备工作

1.下载less或sass（如果使用的话）

        pnpm i -D less   |   pnpm i -D sass     （-D: 这是一个选项或标志，表示安装的软件包将被添加为开发依赖项（devDependencies）。开发依赖项是指在开发过程中需要使用的工具、库或插件，而不是在生产环境中运行的必需组件。）

2.下载axios

        pnpm i axios

import axios from 'axios'
const request = axios.create({
  baseURL: '', // 设置请求的基础地址,基础路径
  timeout: 5000 //超时的时间设置
})

3.element-plus

//在main.ts的配置
import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import App from './App.vue'

const app = createApp(App)

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

4.下载vue-router

        pnpm i vue-router@latest

//新建的文件
import { createRouter, createWebHistory } from 'vue-router'


const router = createRouter({
    history: createWebHistory(),
    routes: [
        {
             path: '/login',
            component: () => import('@/views/login/login.vue'),
            name: 'login',
            meta: {
                title: "登录",
                hidden: true,
                icon:'House',
            }
        }
    ],
    //滚动行为,
    scrollBehavior() {
        return {
            top: 0,
            left: 0
        }
    }
})
//对外暴露
export default router

//main.ts
import { createApp } from 'vue'
import router from './router'
const app = createApp(App)
app.use(router)
app.mount('#app')

5.下载pinia

        pnpm install pinia

//新建的文件
import {createPinia} from 'pinia'
//此为大仓库
let pinia = createPinia();
export default pinia; 



//main.ts
import { createApp } from 'vue'
import pinia from './stores'
import App from './App.vue'

const pinia = createPinia()
const app = createApp(App)
app.use(pinia)
app.mount('#app')

6.mock

        pnpm i mockjs vite-plugin-mock@latest  -D

//vite.config.ts
import { defineConfig,ConfigEnv } from 'vite'
import vue from '@vitejs/plugin-vue'
//引入mock接口 
import { viteMockServe } from 'vite-plugin-mock'
// https://vitejs.dev/config/

export default  defineConfig(({ command }: ConfigEnv) => {
  return {
    plugins: [
      vue(),
      viteMockServe({
        
        mockPath: 'mock',
        localEnabled: command === 'serve',
      }),
    ],
  }
})

//使用
function createUserList() {
    return [
        {
            username: 'fengfeng',
            password: '111111',
            token: 'My Token',
        }
    ]
}
export default [
    {
        url: 'user/login',
        method: 'post',
        response: ({ body }) => {
            //获取请求体携带的用户密码
            const { username, password } = body;
            const checkUser = createUserList().find(el => el.username == username && el.password == password)
            //如果没有用户返回失败的信息
            if(!checkUser){
                return { code:200,data:{message:'账号或密码错误'} }
            }
            //存在该用户者返回成功信息
            const {token} = checkUser
            return {code:200,data:{token}}

        }
    }
]

7.下载element-plus 图标库

        pnpm install @element-plus/icons-vue

//main.ts 
//设置为全局组件
import * as ElementPlusIconsVue from '@element-plus/icons-vue'

const app = createApp(App)
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
  app.component(key, component)
}

8. 下载插件nprogress 

        使用它当路由进行跳转时，有一个进度条的效果

        pnpm install --save nprogress

        一般搭配路由首位使用，这里仅做简单举例，在比较详细的将在下一篇展示

import nprogress from "nprogress"
//引入进度条的样式，他的样式可以自己设置 路径：node_modules\nprogress\nprogress.css ，进度条的属性：#nprogress .bar
import "nprogress/nprogress.css"
nprogress.configure({showSpinner:false})//删除加载进度条傍边的小球，我觉得不好看，若你喜欢可以不写这行
import router from "@/router" //此处为引入我放置的路由


//全局前置首位
router.beforeEach(async (to: any, from: any, next: any) => {
    //进度条开始
   nprogress.start();
})
//全局后置首位
router.afterEach(() => {
    //进度条结束
    nprogress.done();

})

如果 import nprogress from "nprogress" 报红 ，说找不到模块 ，则需要在终端中输入pnpm i --save-dev @types/nprogress