vue3.0 (无 typescript )

//安装 element-plus
npm install element-plus --save

//引入 element-plus
import ElementPlus from ‘element-plus‘; 
import ‘element-plus/lib/theme-chalk/index.css‘;

//调用
const app = createApp(App)
app.use(store)
app.use(router)
app.use(ElementPlus)
app.mount(‘#app‘)

//引入路由：
import { createRouter, createWebHashHistory, createWebHistory } from ‘vue-router‘

//调用路由
const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),// History 路由
  history: createWebHashHistory(), // Hash 路由
  routes
})

const port = process.env.port || process.env.npm_config_port || 3020 // dev port
module.exports = {
    publicPath: ‘./‘,
    outputDir: ‘dist_vue3_3‘,
    assetsDir: ‘static‘,
    lintOnSave: false,
    productionSourceMap: false,
    devServer: {
        host: ‘0.0.0.0‘,
        port: port,
        open: true,
        overlay: {
            warnings: false,
            errors: true
        },
        proxy: {
            [process.env.VUE_APP_BASE_API]: {
                target: process.env.VUE_APP_URL_API,
                changeOrigin: true,
                ws: true,
                pathRewrite: {
                    [‘^‘ + process.env.VUE_APP_BASE_API]: ‘‘
                }
            }
        }
    },
}

ENV = ‘development‘

VUE_APP_BASE_API = ‘/api‘
VUE_APP_URL_API = ‘http://192.168.1.81:7001‘
VUE_CLI_BABEL_TRANSPILE_MODULES = true

ENV = ‘production‘

VUE_APP_BASE_API = ‘/api‘
VUE_APP_URL_API = ‘http://XXXXXX.com‘

//安装axios
npm install axios --save

import Vue from ‘vue‘

//引入axios
import axios from ‘axios‘
import { ElMessage } from ‘element-plus‘
import { getToken } from ‘@/utils/auth‘
import Cookies from ‘js-cookie‘
import router, { resetRouter } from ‘@/router‘

//创建新的 axios 实例
const service = axios.create({
    baseURL: process.env.VUE_APP_BASE_API,
    withCredentials: true, // send cookies when cross-domain requests
    timeout: 15000 // request timeout
})

//请求拦截
service.interceptors.request.use(
    config => {
        config.headers[‘X-Token‘] = getToken(); //设置请求头
        return config
    },
    error => {
        return Promise.reject(error)
    }
)

//响应 response 拦截器
service.interceptors.response.use(response => {
    if (response.status === 200) {
        const data = response.data;
        return data;
    } else if (response.code === 302) {
　　　　　//响应超时，跳转到登录页
        router.replace({
            path: ‘/login‘,
            query: {}
        })
        ElMessage.error({
            message: ‘请求异常!‘,
            type: ‘error‘,
            duration: 5 * 1000,
        });
    }
    return response;
});
export default service

//安装js-cookie
npm install js-cookie --save

//引入js-cookie
import Cookies from ‘js-cookie‘

const token = ‘token‘
export function getToken() {
    return Cookies.get(token)
}
export function setToken(tokens) {
    return Cookies.set(token, tokens,  {
        expires: 3 // 设置token过期时间: 3天
    })
}
export function removeToken() {
    return Cookies.remove(token)
}

import request from ‘@/utils/https‘
// 登录
export function login(data) {
    return request({
        url: ‘/user/login‘,
        method: ‘post‘,
        data
    })
}

<template>
  <div class="dashboard-container">
    <el-row :gutter="24" class="login_from">
        <el-col class="login_tit">登录</el-col>
        <el-col :span="12" :offset="6">
            <el-form label-position="right" label-width="90px" :model="formLabelAlign">
                <el-form-item label="用户名">
                    <el-input v-model="formLabelAlign.userName"></el-input>
                </el-form-item>
                <el-form-item label="密码">
                    <el-input v-model="formLabelAlign.passWord"></el-input>
                </el-form-item>
                <el-button type="primary" @click="getUserRepositories">登录</el-button>
            </el-form>
        </el-col>
    </el-row>
  </div>
</template>

<script>
import { onMounted, ref, reactive } from ‘vue‘
import { ElMessage } from ‘element-plus‘
import { setToken } from ‘@/utils/auth‘
import { login } from ‘@/api/user‘ //引入接口管理
    export default {
        name: ‘Home‘,
        setup() {
            const formLabelAlign = reactive({
                userName: ‘‘,
                passWord: ‘‘,
            })//定义登录的用户名和密码
            const getUserRepositories = () => {// 定义一个方法（ 登录事件 ）
                if(formLabelAlign.userName == null || formLabelAlign.userName.length == 0 || formLabelAlign.userName == ‘‘) {
                    ElMessage.warning({
                        message: ‘用户名不能为空!‘,
                        type: ‘warning‘
                    });
                    return false
                }
                if(formLabelAlign.passWord == null || formLabelAlign.passWord.length == 0 || formLabelAlign.passWord == ‘‘) {
                    ElMessage.warning({
                        message: ‘密码不能为空!‘,
                        type: ‘warning‘
                    });
                    return false
                }
　　　　　　　　　 //登录接口请求
                login(formLabelAlign).then(res => {
                    console.log(res);
                }).catch(err => {
                        
                })
            }
            return {
                formLabelAlign,
                getUserRepositories
            }
        }
    }
</script>