vue学习

vue3中的过滤方法放在utils文件下
通过npm run serve 运行项目
如果是刚从git上面拉下来的先运行 npm install
先写路由吧在routes文件夹下面的index.ts下面

import { createRouter, createWebHashHistory, RouteRecordRaw } from "vue-router";
import Login from "../views/login/index.vue";

const routes: Array<RouteRecordRaw> = [
  {
    path: "/",
    redirect:"login"
  },
  {
    path: "/login",
    name: "login",
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: Login,
  },
];

const router = createRouter({
  history: createWebHashHistory(),
  routes,
});

export default router;

这边我让他们直接跳转到login页面去了
这边写了login就要在views文件下面创建一个login.vue要不然会报错：显示找不到
在界面中我们会应用到element-plus框架，他是基于vue3用着会很舒服
直接看文档吧element-plus

import { stripscript,validdateEmail  } from "@utils/validate.js";

前面花括号里面的是方法名称，后面是他的路径
@utils是在自己的配置文件里面已经定义过的
vue.config.js文件内容如下：

const { defineConfig } = require("@vue/cli-service");
const path = require('path');
module.exports = defineConfig({
  transpileDependencies: true,
  lintOnSave: true,
  configureWebpack:(config)=> {
    config.resolve={
      extensions:['.js','.json','.vue','.ts'],
      alias: {
        '@': path.join(__dirname, './src'),
        '@views': path.join(__dirname, './src/views'),
        '@components': path.join(__dirname, './src/components'),
        '@utils': path.join(__dirname, './src/utils'),
        '@api':path.join(__dirname, './src/api'),
        '@router':path.join(__dirname, './src/router'),
        '@store':path.join(__dirname, './src/store')
      }
    }
  },
  devServer: {
    //open:false,//编译完是否打开网页
    //host:'0.0.0.0',//使用指定地址可以被外界访问
    //https:false,//编译失败时，刷新界面
    //port: 8023, // 访问端口
    //hot:true,//开启热加载
    //hotOnly:false,
    proxy: {
        '/api': { //请求路径关键字
            target: process.env.VUE_APP_API, //对应自己的接口
            changeOrigin: true,//是否允许跨域,在本地会创建一个虚拟服务端，然后发送请求的数据，
                                // 并同时接收请求的数据，这样服务端和服务端进行数据的交互就不会有跨域问题
            ws: true,
            pathRewrite: {
                '^/api': ''      //这里理解成用‘/api’代替target里面的地址，后面组件中我们掉接口时直接用api代替
                                    // 比如我要调用'http://localhost:8024/management/user/add'，直接写‘/api/user/add’即可
            }
        }
    }
},
});

注意写名字的时候注意大小写，不会也会出错！
下面开始写axios调用api

我这边有使用

yarn add axios

详细可以去看使用yarn搭建Vue,ElementUI,axios环境

在调用axios的时候可以去看看axios中文文档
我们运行方法之前先去定义一个拦截器名字起为request，一样放在utils文件夹下
内容如下

import axios from 'axios'
const service = axios.create();
// 添加请求拦截器
service.interceptors.request.use(function (config) {
    // 在发送请求之前做些什么
    return config;
  }, function (error) {
    // 对请求错误做些什么
    return Promise.reject(error);
  });

// 添加响应拦截器
service.interceptors.response.use(function (response) {
    // 2xx 范围内的状态码都会触发该函数。
    // 对响应数据做点什么
    return response;
  }, function (error) {
    // 超出 2xx 范围的状态码都会触发该函数。
    // 对响应错误做点什么
    return Promise.reject(error);
  });

  export default service;

然后我们就可以创建一个api接口放在api文件夹下，以方便以后维护

import service from '@/utils/request'//这边是引入我们上面说的拦截器
/**
 * 获取验证码
 */
export function Getsend() {
    service.request({
        method: "post",
        url: "api/user/send-emailr",
        data: {}
    })
}
/**
 * 登录
 */

最后在我们的登录界面中调用

import { Getsend } from "@api/login"//这边只需要调用接口就可以，Getsend是我们接口方法的名称，可以写多个

我们再看vue的环境变量环境变量