12.9 Vue3+Vuex+Js+El-Plus+vite（项目搭建）

参考案例

C端：consumer消费者【我们看的端】

B端：business 商家【element-plus饿了么】

应用：服务器端，用户端，后台管理【B端】

vue3+vuex+ts+el-plus+vite+axios+router

初始化项目

TypeScript 复制代码

//创建项目
pnpm create vite my-vue3

//进目录
cd my-vue3

//安装依赖
pnpm i

//启动
npm run dev

配置proxy跨域和路径别名

vite.config.js

通过配置服务器反向代理，实现跨域

JavaScript 复制代码

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from "path"

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  resolve:{
    // 设置别名
    alias:{
      "@":path.resolve(__dirname,'src')
    }
  },
  server:{
    // 配置服务器代码，实现跨域
    proxy:{
       // 所有以 'api'为前缀的借口都会转向http://localhost:3001
      "/api":{
        target:"http://localhost:3001",
        changeOrigin:true,
        // 去掉接口中的 'api' 以便和后端接口匹配
        rewrite:(path)=>path.replace(/^\/api/,'')
      }
    }
  }
})

安装包依赖

JSON 复制代码

"dependencies": {
    "@element-plus/icons-vue": "^2.1.0",
    "axios": "^1.7.7",
    "dayjs": "^1.11.9",
    "element-plus": "^2.3.7",
    "lodash": "^4.17.21",
    "sass": "^1.81.0",
    "vue": "^3.5.12",
    "vue-router": "^4.5.0",
    "vuex": "^4.1.0"
  }

配置路由

创建基础组件

src/pages/notFound/index.vue 404页面
src/pages/login/index.vue 登录页面
src/pages/layout/index.vue 管理页面

src/router/index.js

配置路由，设置路由拦截

JavaScript 复制代码

import { createRouter, createWebHistory } from 'vue-router'
const routes = [
    {
        path: '/',
        name: 'admin',
        component: () => import('@/pages/layout/index.vue')
    },
    {
        path: '/login',
        name: 'login',
        component: () => import('@/pages/login/index.vue')
    },
    { 
        // 推荐使用这种方式，不要使用重定向的方式
        path: '/:pathMatch(.*)*', 
        name: 'NotFound', 
        component: () => import('@/pages/notFound/index.vue')
    }
]

const router = createRouter({history: createWebHistory(),
    routes, // routes: routes 的缩写
})

export default router

main.js引入路由

JavaScript 复制代码

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

App.vue定义路由出口

Plain 复制代码

<template>
  <RouterView></RouterView>
</template>

添加路由拦截

src/router/index.js

JavaScript 复制代码

...
//路由拦截
router.beforeEach((to,from)=>{
    let token = sessionStorage.getItem('token');
    // 如果token不存在，并且要跳转的不是login页，则重定向到login
    if(!token && to.fullPath !== '/login'){
        return {
            path:'/login'
        }
        // return '/login'
    }
})
...

API封装(axios的二次封装)

api/config.js

配置请求url，超时时间
配置请求拦截器，以便携带token信息
配置相应拦截器，集中处理错误

JavaScript 复制代码

import axios from "axios";
// 创建axios实例
const instance = axios.create({
    baseURL:'/api',
    // 超时时间
    timeout:5000
})

// 添加请求拦截器，会在发送请求之前执行相应的需求
// 应用场景：携带token 
instance.interceptors.request.use(
    config=>{
        // 携带token
        let token = sessionStorage.getItem('token')
        if(token){
            // config.headers.common['Authorization'] = 'Bearer '+token;
            // 如果上面格式报错，替换成下面这种形式
            config.headers.Authorization = 'Bearer '+ token;
        }
        return config;
    },
    function(error){
        return Promise.reject(error)
    }
)

// 添加响应拦截器，会在返回数据后先执行相应的需求
// 应用场景：集中处理错误响应
instance.interceptors.response.use((response)=>{
        let {code} = response.data;
        if(code === 401){
            // token失效
        }
        return response;
    },function(error){
        console.log("res-err",error);
        return Promise.reject(error);
})
export default instance;

举例：接口的第一种写法

api/news.js

JavaScript 复制代码

import axios  from "./config"

// 添加新闻
export function _addNews(data) {
    // return 的是axios()调用后返回的promise对象
    return axios({
        url:'/news',
        method:'post',
        data
    })
}

// 获取新闻列表
export function _getNews(params) {
    return axios({
        url:'/news',
        method:'get',
        params
    })
}

// 获取制定newsId的新闻
export function _getOneNews(newId) {
    return axios({
        url:`/news/${newId}`,
        method:'get'
    })
}

// 编辑新闻
export function _editNews(data) {
    return axios({
        url:'/news',
        method:'put'，
        data
    })
}

// 删除新闻
export function _delNews(params) {
    return axios({
        url:'/news',
        method:'delete',
        params
    })
}

举例：接口第二种写法

api/new.js

JavaScript 复制代码

import axios  from "./config"

// 添加新闻
// export function _addNews(data) {
    // return 的是axios()调用后返回的promise对象
    // return axios({
        // url:'/news',
        // method:'post',
        // data
    // })
// }
export const _addNews = data => axios.post('/news',data);

// 获取制定newsId的新闻
export function _getOneNews(newId) {
    return axios({
        url:`/news/${newId}`,
        method:'get'
    })
}

// 编辑新闻
export function _editNews(data) {
    return axios({
        url:'/news',
        method:'put'，
        data
    })
}

// 删除新闻
export function _delNews(params) {
    return axios({
        url:'/news',
        method:'delete',
        params
    })
}

接口在组件中使用

JavaScript 复制代码

import { onMounted } from 'vue';
import { _addUsers } from '@/api/user.js';
onMounted(async () => {
    let res = await _addUsers();
    console.log(res);
})