Vite+Vue3+Element-plus+Axios+Router前端框架搭建 1

记录自己的学习路程，bu'qi1.打开VSCode2.terminal终端输入命令npm init @vitejs/appvite.config.js内容如下import{defineConfig}from'vite'importvuefrom'@vitejs/plugin-vue'constpath=require("path");//https://vitejs.dev/config/expo

skdsxx

757人浏览 · 2021-07-20 16:18:55

skdsxx · 2021-07-20 16:18:55 发布

记录自己的学习路程，每天再进步一点点

1.打开VSCode

2.terminal终端输入命令npm init @vitejs/app

vite.config.js内容如下

import { defineConfig } from 'vite'

import vue from '@vitejs/plugin-vue'

const path = require("path");



// https://vitejs.dev/config/

export default defineConfig({



  alias: {

    // 配置路径别名

    '@': path.resolve(__dirname, 'src'),

    'view': path.resolve(__dirname, 'src/view'),

    'com': path.resolve(__dirname, 'src/components'),

    'api': path.resolve(__dirname, 'src/api'),

    'utils': path.resolve(__dirname, 'src/utils'),

  },

  plugins: [vue()],

   // hostname: '0.0.0.0',

  // port: 8090,

  // 是否自动在浏览器打开

  // open: true,

  // 是否开启 https

  https: false,

  // 服务端渲染

  ssr: false,

  /**

   * 在生产中服务时的基本公共路径。

   * @default '/'

   */

   base: './',

   /**

   * 与“根”相关的目录，构建输出将放在其中。如果目录存在，它将在构建之前被删除。

   * @default 'dist'

   */

  outDir: 'dist',

  server: {

    proxy: {

      '/api': {

        target: 'http://192.168.163.154:8088/',

        changeOrigin: true,

        ws: true,

        pathRewrite: {

          "^/api": ""

        }

      },

    },

    }
})

3.配置路由(下载router4版本)

npm install vue-router@4 -s

4.在src文件夹下面创建文件夹views/login，在login文件夹下面创建login.vue

5.编辑src/router/index.js，内容如下：

目录截图如下

6.在配置文件main.js中添加router的配置，如图

7.安装vuex使用命令npm install vuex@next

8.在src下创建store文件夹,添加index.js文件

import { createStore } from 'vuex'

export default createStore({

state() {

return {

count: 0,

};

mutations: {

increment(state) {

state.count++;

actions: {

increment(context) {

context.commit("increment");

});

9.安装axios和qs

npm install axios -S

npm install qs -S

10.在项目中创建axios.js如图，根据需要自己设定具体文件夹名称，这里设置为src/common/axios.js

11.编辑axios.js的文件内容

import axios from "axios"
// import store from '../store';
// import {router} from '../router/index';

// let vm = new Vue();
const instance = axios.create({
  baseURL: 'http://192.168.163.154:8001/api',
  timeout: 30000
})
instance.defaults.withCredentials = false;
//设置axios为form-data
instance.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
// 请求拦截
instance.interceptors.request.use(config => {
  // 自定义header，可添加项目token
  let token = localStorage.getItem('token');
  config.headers['Authorization'] = "Bearer "+token;
  return config;
}, error => {
  console.log(error);
  return Promise.reject(error);
})

// 响应拦截
instance.interceptors.response.use(response => {
  // const resCode = response.status;
  // if (resCode === 200) {
  //   return Promise.resolve(response);
  // } else {
  //   return Promise.reject(response);
  // }
  return response;
}, error => {
  if (error && error.response) {
    // const resCode = error.response.status;
    // switch (resCode) {
    //   case 401:
    //     vm.$Message.error(error.response.data.message);
    //     // store.commit('logout', this);
    //     // store.commit('clearOpenedSubmenu');
    //     // console.log('token-0', store.state.app.token);
    //     router.replace({
    //       path: '/login'
    //     });
    //     break;
    //   case 403:
    //     vm.$Message.error('拒绝访问');
    //     break;
    //   case 404:
    //     vm.$Message.error('网络请求不存在');
    //     break;
    //   case 405:
    //     vm.$Message.error('请求方法未允许');
    //     break;
    //   case 408:
    //     vm.$Message.error('请求超时');
    //     break;
    //   case 500:
    //     vm.$Message.error('服务器连接错误');
    //     break;
    //   case 501:
    //     vm.$Message.error('网络未实现');
    //     break;
    //   case 502:
    //     vm.$Message.error('网络错误');
    //     break;
    //   case 503:
    //     vm.$Message.error('服务不可用');
    //     break;
    //   case 504:
    //     vm.$Message.error('网络超时');
    //     break;
    //   // 其他状态码错误提示
    //   default:
    //     vm.$Message.error(error.response.data.message);
    // }
    console.log(error);
  }
  return Promise.reject(error);
})

/*
 *封装get方法
 *@param{String} url [请求地址]
 *@param{Object} params 请求参数
 */
export function Get(url, params) {
  return new Promise((resolve, reject) => {
    instance.get(url,{
      params: params
    }).then((res) => {
      resolve(res.data);
    }).catch((error) => {
      console.log(error);
      reject(error.data);
    })
  })
}

/**
 *封装post方法
 *@param{String} url 请求地址
 *@param{Object} params 请求参数
 */
export function Post(url, data) {
  return new Promise((resolve, reject) => {
    instance.post(url, data).then((res) => {
      resolve(res.data);
    }).catch((error) => {
      console.log(error);
      reject(error.data);
    })
  })
}

/**
 *封装put方法
 *@param{String} url 请求地址
 *@param{Object} params 请求参数
 */
export function Put(url, params) {
  return new Promise((resolve, reject) => {
    instance.put(url, params).then((res) => {
      resolve(res.data);
    }).catch((error) => {
      console.log(error);
      reject(error.data);
    })
  })
}

/**
 *封装patch方法
 *@param{String} url 请求地址
 *@param{Object} params 请求参数
 */
export function Patch(url, params) {
  return new Promise((resolve, reject) => {
    instance.put(url, params).then((res) => {
      resolve(res.data);
    }).catch((error) => {
      console.log(error);
      reject(error.data);
    })
  })
}

/**
 *封装delete方法
 *@param{String} url [请求地址]
 *@param{Object} params [请求参数]
 */
export function Delete(url, params) {
  return new Promise((resolve, reject) => {
    instance.delete(url, {
      params: params
    }).then((res) => {
      resolve(res.data);
    }).catch((error) => {
      console.log(error);
      reject(error.data);
    })
  })
}

12.main.js中全局引用axios

13.安装element-plus 命令 npm install element-plus --save

在main.js中引入，即可正常使用了

14.编写Login.vue

<template>
  <div class="login-bac">
    <el-row>
      <img src="../../assets/logo.png" />
    </el-row>
    <el-row>
      <div class="flag">Login</div>
    </el-row>
    <el-row class="accountBox">
      <el-col :span="3"></el-col>
      <el-col :span="18"><el-input v-model="account" placeholder="账号" clearable></el-input></el-col>
      <el-col :span="3"></el-col>
    </el-row>
    <el-row class="passwordBox">
      <el-col :span="3"></el-col>
      <el-col :span="18">
          <el-input
          v-model="password"
          placeholder="密码"
          show-password></el-input></el-col>
      <el-col :span="3"></el-col>
    </el-row>
    <el-row class="password">
      <el-button type="primary" class="submit" @click="OnLogin">登录</el-button>
    </el-row>
  </div>
</template>

<script>
import {useRouter} from 'vue-router'
var router=useRouter();
export default {
  data() {
    return {
      account: "",
      password: ""
    };
  },
  methods: {
      OnLogin() {
     var isLogin=false;
     //这里添加登录服务器验证
     if(this.account.trim().length>0&&this.password.trim().length>0)
     {
       isLogin=true;
     }
    if(isLogin){
        //验证成功,使用replace,避免登录成功后通过浏览器历史记录返回登录页面
        this.$router.replace({path:'/homepage'})
    }else{
        //验证失败
        this.&router.push({
          path: '/login'
        })
    }
    }
  },
};
</script>

<style>
.login-bac{
  border-style:solid;
  border-width:1px;
  border-block-color: #444444;
  width: 400px;
  height: 500px;
  /* 居中设置 */
  position: absolute;
   top: 0;
   bottom: 0;
   left: 0;
   right: 0;
   margin: auto;

   /* 阴影设置 */
   box-shadow: 2px 2px 8px #333333;
}
img {
  margin-top: 50px;
  width: 40px;
  height: 40px;
  margin-left: auto;
  margin-right: auto;
}
.flag {
  font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
  font: 5em sans-serif;
  margin: auto;
  text-shadow: 2px 2px 6px #111111;
}
.accountBox {
  display: block;
  margin-top: 40px;
}
.passwordBox {
  display: block;
  margin-top: 20px;
}
.el-button.submit {
  width: 150px;
  margin-top:20px;
  margin-left: auto;
  margin-right:auto;
}
</style>

腾讯云开发者社区

腾讯云面向开发者汇聚海量精品云计算使用和开发经验，营造开放的云计算技术生态圈。

更多推荐

终极指南：Flink SQL连接器版本管理从混乱到有序的升级之路

Apache Flink作为流处理领域的佼佼者，其SQL连接器的版本管理一直是开发者面临的核心挑战。本文将系统讲解Flink SQL连接器版本管理的最佳实践，帮助你轻松应对版本兼容性问题，实现从混乱到有序的升级之旅。## 连接器版本管理的常见痛点 😫在Flink应用开发中，连接器版本管理常常让开发者头疼不已。不同版本的连接器可能导致各种兼容性问题，例如API变更、功能差异甚至运行时错误。

腾讯云开发者社区

Elasticsearch复杂数据类型终极指南：从入门到精通

Elasticsearch作为功能强大的搜索引擎，支持多种复杂数据类型，让开发者能够灵活处理各种结构化和非结构化数据。本文将带你全面了解Elasticsearch中的复杂数据类型，从基础概念到实际应用，助你轻松掌握数据建模的核心技巧。## 内部对象：构建层级化数据结构在Elasticsearch中，对象类型（Object）是最基础的复杂数据类型之一，用于表示具有嵌套关系的数据。例如，我们可

腾讯云开发者社区

如何快速搭建Neon无服务器PostgreSQL：面向初学者的完整指南

Neon是一款革命性的无服务器PostgreSQL解决方案，它通过分离存储和计算层，实现了自动扩缩容、类代码式数据库分支以及零级扩展能力。本指南将帮助你从零开始搭建Neon开发环境，体验这款创新数据库的强大功能。## 准备工作：环境要求与依赖项在开始搭建Neon环境前，请确保你的系统满足以下要求：- Linux操作系统（推荐Ubuntu 20.04+或Debian 11+）- Git