vite创建基本项目架构

117 阅读2分钟

参考vite官网:cn.vitejs.dev/guide/

1.初始化

升级最新版本:npm install vue@next​创建名为'test'的项目:npm init vite-app test

2.下载依赖 运行

npm installnpm run dev

3.加入ip登录

4.依赖vue-router 参考博客:juejin.cn/post/700185…

npm install vue-router@4.0 

创建src/router/index.ts文件,配置路由

import { createRouter, createWebHashHistory } from 'vue-router'export default createRouter({  // 指定路由模式  history: createWebHashHistory(),  // 路由地址  routes: []})​

5.添加依赖vuex 创建src/store/index.ts,配置vuex

import { createStore } from 'vuex'export default createStore({  state: {    name: 'vueX'  }})​

6.添加依赖axios

// http/index.jsimport axios from 'axios'import {    ElLoading,    ElMessage} from 'element-plus';//创建axios的一个实例 var instance = axios.create({    baseURL: import.meta.env.VITE_APP_URL, //接口统一域名    timeout: 6000, //设置超时    headers: {        'Content-Type': 'application/json;charset=UTF-8;',    }})let loading;//正在请求的数量let requestCount = 0//显示loadingconst showLoading = () => {    if (requestCount === 0 && !loading) {        loading = ElLoading.service({            text: "Loading  ",            background: 'rgba(0, 0, 0, 0.7)',            spinner: 'el-icon-loading',        })    }    requestCount++;}//隐藏loadingconst hideLoading = () => {    requestCount--    if (requestCount == 0) {        loading.close()    }}​//请求拦截器 instance.interceptors.request.use((config) => {        showLoading()        // 每次发送请求之前判断是否存在token,如果存在,则统一在http请求的header都加上token,不用每次请求都手动添加了        const token = window.localStorage.getItem('token');        token && (config.headers.Authorization = token)        //若请求方式为post,则将data参数转为JSON字符串        if (config.method === 'POST') {            config.data = JSON.stringify(config.data);        }        return config;    }, (error) =>    // 对请求错误做些什么    Promise.reject(error));​//响应拦截器instance.interceptors.response.use((response) => {    hideLoading()    //响应成功    console.log('拦截器报错');    return response.data;}, (error) => {    console.log(error)    //响应错误    if(error.response&&error.response.status){       const status = error.response.status        switch (status) {            case 400:                message = '请求错误';                break;            case 401:                message = '请求错误';                break;            case 404:                message = '请求地址出错';                break;            case 408:                message = '请求超时';                break;            case 500:                message = '服务器内部错误!';                break;            case 501:                message = '服务未实现!';                break;            case 502:                message = '网关错误!';                break;            case 503:                message = '服务不可用!';                break;            case 504:                message = '网关超时!';                break;            case 505:                message = 'HTTP版本不受支持';                break;            default:                message = '请求失败'        }            ElMessage.error(message);            return Promise.reject(error);       }    return Promise.reject(error);});​​export default instance;————————————————版权声明:本文为CSDN博主「慌张°」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。原文链接:https://blog.csdn.net/weixin_44698285/article/details/116271180

import axios from 'axios';​// 请求域名-本地请求// const http: string = 'http://192.168.1.128:8870';​const http: string = '/api';// url处理const getUrl = (url: string) => {    if (!url) {        return '';    }    return `${http}${url}`;};// post请求const Post = ({ url = '', data = {} }) => {​    let theUrl: string = getUrl(url);​    return axios.post(theUrl, data)        .then((response) => {            if (response) {                return response;            } else {                return Promise.reject();            }        })};// Get请求const Get = ({ url = '', data = {} }) => {    let theUrl: string = getUrl(url);    return axios.get(theUrl, {        params: data    }).then((response) => {        if (response) {            return response;        } else {            return Promise.reject();        }    })​}// export default {//     Post// };export {    Post, Get};​

7.导入main.ts

import { createApp } from 'vue'import App from './App.vue'// 导入router和storeimport router from './router/index'import store from './store/index'​const app = createApp(App)app.use(router)app.use(store)app.mount('#app')​

8.vue-tsc 版本较低 可以用tsc 来替换