Vite项目，vite + vue3 + ts + vuex + vue-router + axios + scss + 自动导入api（就是用v3不需要引入api直接使用）

置顶彩色之外

已于 2023-04-11 17:07:22 修改

阅读量3.6k

点赞数 5

分类专栏： vite 文章标签： vue.js scss 前端 vite

于 2022-06-27 20:28:26 首次发布

CSDN-@活在风浪里001

本文链接：https://blog.csdn.net/m0_57904695/article/details/125487996

版权

vite 专栏收录该内容

2 篇文章 2 订阅

订阅专栏

webpack回顾

（移动端打包）一步一步,一步从代码到,打包成为手机App,上传至nginx服务器 (Vue项目)_0.活在风浪里的博客-CSDN博客_移动端打包一步一步,一步从代码到,打包成为手机App,上传至ngnix服务器 (Vue项目)https://blog.csdn.net/m0_57904695/article/details/122500485?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522165632131516782246419577%2522%252C%2522scm%2522%253A%252220140713.130102334.pc%255Fblog.%2522%257D&request_id=165632131516782246419577&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~blog~first_rank_ecpm_v1~rank_v31_ecpm-6-122500485-null-null.nonecase&utm_term=%E7%A7%BB%E5%8A%A8%E7%AB%AF&spm=1018.2226.3001.4450

为什么写这篇，因为使用vite构建项目，与cli、不同，需要自己新建router、vuex、sass

你需要有点基础，在博文中我全程以cnpm叙述，因为方便复制，cnpm镜像下载速度快，安装node自有npm，npm去下载cnpm, 念及此那就直接开始

安装和创建项目：

npm create vite

还是那句话，在项目开始前配置好 vite.config.ts

配置vite.config.ts

我们在写vue3的时候每个组件都要频繁的引入下面这样借用插件可以不用引入直接用，默认只配置了vue vuex、element plus需要自己在配置

//非常的繁琐
import { ref, torefs, nextTick, onMounted..... } from 'vue'

这时候我们只需要下载一个插件

cnpm i -D unplugin-auto-import

找到 vite.config.ts/js 配置一下

import AutoImport from 'unplugin-auto-import/vite';
import Components from 'unplugin-vue-components/vite';

plugins: [
    vue(), //vue
    AutoImport({
      //引入vue 自动注册api插件
      imports: ['vue', 'vue-router', 'vuex'], // 配置需要自动导入的库
      dts: 'src/auto-import.d.ts' // 自动引入生成api的地址
    }),

    AutoImport({
      //plus按需引入
      resolvers: [ElementPlusResolver()]
    }),
    Components({
      //plus按需引入
      resolvers: [ElementPlusResolver()],
      dts: 'src/components.d.ts' //自动引入生成的组件的地址
    })
  ],

找到 tsconfig.json 配一下（解决不引入相关依赖ts报错）

"include": [
		"src/**/*.ts",
		"src/**/*.d.ts",
		"src/**/*.tsx",
		"src/**/*.vue",
		 "auto-imports.d.ts",
         "components.d.ts"
	],

下面配置跨域和路径别名和element-plus组件库按需引入完整vite.config.ts/js代码

import { defineConfig } from 'vite';
import AutoImport from 'unplugin-auto-import/vite';
import Components from 'unplugin-vue-components/vite';
import vue from '@vitejs/plugin-vue';
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers';
import * as path from 'path';

export default defineConfig({
  base: './',
  plugins: [
    vue(), //vue
    AutoImport({
      //引入vue 自动注册api插件
      imports: ['vue', 'vue-router', 'vuex'], // 配置需要自动导入的库
      dts: 'src/auto-import.d.ts' // 自动引入生成api的地址
    }),

    AutoImport({
      //plus按需引入
      resolvers: [ElementPlusResolver()]
    }),
    Components({
      //plus按需引入
      resolvers: [ElementPlusResolver()],
      dts: 'src/components.d.ts' //自动引入生成的组件的地址
    })
  ],
  build: {
    minify: 'terser',
    terserOptions: {
      compress: {
        //生产环境时移除console
        drop_console: true,
        drop_debugger: true
      }
    }
  },

  resolve: {
    //配置根路径别名： import('/@/pages/login/login.vue')
    alias: {
      '/@': path.resolve(__dirname, 'src')
    }
  },
  // 跨域
  server: {
    //使用IP能访问
    host: '0.0.0.0',
    // 热更新
    hmr: true,
    //自定义代理规则
    proxy: {
      // 选项写法
      '/api': {
        // target: "https://admin.ccc.com",
        // changeOrigin: true,
        // rewrite: (path) => path.replace(/^\/api/, ""),
      }
    }
  }
});

注意配置路径别名，在使用的页面可能爆错找不到页面

这是TypeScript给我们报的错，因为他不知道@指向哪里，我们需要在tsconfig.json里面加上如下配置，告诉他 基准路径 和 @ 指向哪里就好了。

{
    "compilerOptions":{
        //...
        "baseUrl": ".",
        "paths": {
          "/@/*": ["src/*"],
        }
    }
}

完整 tsconfig.json

{
  "compilerOptions": {
    "target": "es2021",
    "module": "commonjs",
    "outDir": "./dist",
    "lib": ["esnext", "dom", "dom.iterable", "scripthost"],
    "jsx": "preserve",
    "strict": true,
    "moduleResolution": "node",
    "esModuleInterop": true,
    "baseUrl": ".",
    "paths": {
      "/@/*": ["src/*"]
    },
    "types": ["vite/client", "element-plus/global"],
    "allowSyntheticDefaultImports": true,
    "experimentalDecorators": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true,
    "noImplicitAny": false,
    "resolveJsonModule": true
  },

  "include": [
    "src/**/*.ts",
    "src/**/*.d.ts",
    "src/**/*.tsx",
    "src/**/*.vue",
    "auto-imports.d.ts",
    "components.d.ts"
  ],
  "exclude": ["node_modules", "**/*.spec.ts"]
}

可是vscode的终端仍然报错，同样vite不知道我们@指向哪里。

最后在vite.config.js里面添加如下配置，但你发现path又报错，原因是path这个模块是使用js编写的，而我们使用的是ts，包必须有ts的声明文件，这里需要再次执行 npm install @types/node来安装node的ts声明文件，为什么需要安装node的ts声明文件，因为path是node内置的。

// vite.config.js
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from "path";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  resolve: {
    // 配置路径别名
    alias: {
      '/@': path.resolve(__dirname, './src'),
    }
  },
})

或者直接使用

import * as path from 'path';

页面效果：

路径别名、跨域、自动引入api都配好了，现在整合路由

安装路由：

cnpm install vue-router@next

创建一个文件，用来配置route:

import { createRouter,createWebHistory} from "vue-router"

 
const routes = [
  {
    path:'/',
    redirect: 'login'
  },
  {
    path:'/login',
    component: () => import('@/pages/login/login.vue')
  },
  {
    path:'/home',
    component: () => import('@/pages/home/home.vue')
  }
]
 
// 导出路由
const router = createRouter({
  history: createWebHistory(),  //开启history模式
  routes
});
 
export default router;

创建好了router文件后，记得一定要导出，在main.ts中使用

//main.ts
 
import { createApp } from 'vue'
import App from '@/App.vue'
 
//导入router配置文件
import route from '@/route/router'
 
//类似于:
/**
vue-cli:
Vue.use(router)
const app = new Vue({
	render: h => h(App)
}).$mount("#app")
*/

const app = createApp(App)
//全局注册
app.use(route)
 
app.mount('#app')

安装 vuex：

cnpm install vuex@next --save

新建文件store.js/ts:

//store.ts:

import { createStore } from "vuex";
const store = createStore({
    state()
    {
        return {
            count: '666',
        };
    },
    getters: {
        getCount(state)
        {
            return state.count;
        },
    },
    mutations: {
        increment(state)
        {
            state.count++;
        },
    },
});

export default store;

在main.js中使用：

// main.js/ts：
 
import { createApp } from 'vue'
import App from '@/App.vue'
 
import route from '@/route/router'
import store from '@/store/store'
 
const app = createApp(App)
//全局注册
app.use(route)
app.use(store)
 
app.mount('#app')

在页面使用vuex:

// login.vue

<script setup lang="ts">
import { useStore } from "vuex";
import { computed, onMounted } from "vue";
let store = useStore();

const count = computed(() => store.state.count);
onMounted(() => {
  console.log("插件自动引入,上面没引入onMounted，这里直接用");
});
const addClick = () => {
  store.commit("increment");
};
</script>

<template>
  <router-link to="/home">跳转 home</router-link>
  <br />
  <hr />
  <!--这里是vuex的数据，不要直接在这里使用 不然修改vuex数据页面不能及时相应，需要在计算属性中处理下
      在vue3.0中，可以直接写，因为 proxy 可以监听到任意数据的变化
  -->
  <p>{{ $store.state.count }}</p>

  <!-- 通过计算属性可以及时变化 -->
  <p>{{count}}</p>
  <button @click="addClick">增加</button>
</template>

安装：scss

cnpm install sass

使用：<style lang="scss" scoped></style>

vue3+vite 封装axios请求

//挂载全局属性或者方法，类似于 Vue.prototype.$api = api
app.config.globalProperties.$api = api

安装axios:

cnpm install axios

创建axios实例:

新建一个network文件夹

// network/index.js
import 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
//显示loading
const showLoading = () => {
    if (requestCount === 0 && !loading) {
        loading = ElLoading.service({
            text: "Loading  ",
            background: 'rgba(0, 0, 0, 0.7)',
            spinner: 'el-icon-loading',
        })
    }
    requestCount++;
}
//隐藏loading
const 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;

对 baseURL: import.meta.env.VITE_APP_URL, 解释

在根目录新建三个文件

.env.development

# 本地环境
ENV = 'development'

# 本地环境接口地址
VITE_API_URL = 'http://192.168.0.50:8888/'
//与后台在同一局域网，这个他电脑的ip

.env.production

# 线上环境
ENV = 'production'

# 线上环境接口地址
VITE_API_URL = 'https://api-hmugo-web.itheima.net/api/public/v1/home/swiperdata'

.env.test

# 本地环境
ENV = 'test'

# 本地环境接口地址
VITE_API_URL = 'https://testhg.itrustnow.com/'

封装请求方式

// http/request.js
import instance from "./index"


const axios = ({
    method,
    url,
    data,
    config
}) => {
    method = method.toLowerCase();
    if (method == 'post') {
        return instance.post(url, data, {...config})
    } else if (method == 'get') {
        return instance.get(url, {
            params: data,
            ...config
        })
    } else if (method == 'delete') {
        return instance.delete(url, {
            params: data,
            ...config
        }, )
    } else if (method == 'put') {
        return instance.put(url, data,{...config})
    } else {
        console.error('未知的method' + method)
        return false
    }
}
export default axios

封装请求接口

//api.js/ts
import axios from "../http/request"
//请求示例
//get
export const mokeGet = (data) => {
    return axios({
        url: "/api/xxxx",
        method: "get",
        data,
        config: {
            headers: {
                'Request-Type': 'wechat'
            },
            timeout: 10000
        }
    })
}
//post
export const mokePost = (data) => {
    return axios({
        url: "/api/xxxx",
        method: "post",
        data,
        config: {
            headers: {
                'Request-Type': 'wechat'
            },
            timeout: 10000
        }
    })
}

vue中调用

import { mokePost } from "@/api";
import {onMounted} from "vue"
export default {
  setup() {
     onMounted(() => {
      mokePost().then(res=>{
        console.log(res)
      })
    })
    return {};
  },
};

彩色之外

关注

5
点赞
踩
30

收藏

觉得还不错? 一键收藏
打赏
1
评论
Vite项目，vite + vue3 + ts + vuex + vue-router + axios + scss + 自动导入api（就是用v3不需要引入api直接使用）

webpack回顾（移动端打包）一步一步,一步从代码到,打包成为手机App,上传至nginx服务器 (Vue项目)_0.活在风浪里的博客-CSDN博客_移动端打包一步一步,一步从代码到,打包成为手机App,上传至ngnix服务器 (Vue项目) https://blog.csdn.net/m0_57904695/article/details/122500485?ops_request_misc=%257B%2522request%255Fid%2522%253A%25221656
复制链接

扫一扫