Vite项目基础配置

1. 初始化项目 npm init vue@latest
2. 安装依赖vuex``element-plus``normalize.css
3. 如果需要按需导入elementPlus组件,执行npm install -D unplugin-vue-components unplugin-auto-import
4. 在入口文件main.js中导入全局使用的vuex配置文件及css全局样式
5. 在vite.config.js配置文件中的plugins根据elementPlus官方文档添加按需引入代码
6. 防止数据刷新丢失,使用vuex的数据持久化插件,比如npm i vuex-persistedstate -D
7. 在store/index.js中导入import createPersistedState from "vuex-persistedstate"
8. 在index.js写入以下代码

plugins:
        [
// 这里若直接写 createPersistedState()则表示所有数据都缓存
            createPersistedState({
                reducer: state => {
                    return {
                        userInfo: state.userInfoModule.userInfo
                    }
                }
            })
        ]

9. 在service/index.js写入以下代码

import axios from 'axios'

// eslint-disable-next-line no-undef
switch (process.env.NODE_ENV) { 
    case 'development':
        axios.defaults.baseURL = 'http://47.96.0.211:3001/admin';
        break;
    case 'production':
        axios.defaults.baseURL = 'http://47.96.0.211:3001/admin';
        break;
}

// 设置超时时间
axios.defaults.timeout = 5000;
// 设置跨域是否需要携带凭证
axios.defaults.withCredentials = false;


axios.interceptors.request.use(config => {
    config.headers.token = localStorage.getItem('token');
    return config;
});
axios.interceptors.response.use(response => {
    response?.data?.data?.token && localStorage.setItem("token", response?.data?.data?.token);
    return response?.data;
 })

export default axios;

10. 在api/user.js写入user相关api代码

import request from '@/service'

export function login(data) { 
    return request({
        url: '/admin/login',
        method: 'post',
        data
    })
}