vite+vue3项目搭建(非ts)

1、创建基本模板项目

yarn create vite

2、配置vite.config.js

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { resolve } from 'path' 
export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      '@': resolve(__dirname, 'src') 
    }
  },
  server: {
    port: 3000, 
    open: true // 设置服务启动时是否自动打开浏览器
  }
})

3、配置环境变量,根据需要，此次配置了3个环境变量

.env.development   开发环境。
.env.testing       测试环境
.env.production    生产环境

在各环境变量中，根据需要配置相应的信息，例如VITE_APP_BASE_URL，可用以设置接口的请求地址

//.env.development文件中的一个设置
VITE_APP_BASEURL = '开发环境的接口URL'

//在packpage.json中的修改
"scripts": {
    "dev": "vite --mode development",
    "build": "vite build --mode development",
    "build--test": "vite build --mode testing",
    "build--prod": "vite build --mode production"
 }

4、安装vue-router

yarn add vue-router

创建 src/router/index.js文件

import { createRouter, createWebHashHistory } from "vue-router"
const routes = [{
    path: '/',
    name: 'home',
    component: () => import('@/views/Home.vue') // 路由懒加载，优化访问性能
}, {
    path: '/demo',
    name: 'demo',
    component: () => import('@/views/Demo.vue')
}]
const router = createRouter({
    history: createWebHashHistory(),
    routes
})
export default router

在 main.js 文件中引入router

import { createApp } from 'vue'
import App from './App.vue'
import router from './router/index'

createApp(App).use(router).mount('#app')

5、安装vuex

yarn add vuex@next

创建 src/store/index.ts 文件

import { createStore } from 'vuex'
import user from "./user"

export default createStore({
  state: {
    spinning: false
  },
  mutations: {
    loading(state, status) {
      state.spinning = status
    }
  },
  modules: {
    user
  }
})

在 main.ss 文件中引入vuex相关文件

import { createApp } from 'vue'
import App from './App.vue'
import store from './store/index'

createApp(App).use(store).mount('#app')

6、安装ant-design-vue组件库

yarn add ant-design-vue@next

引入unplugin-vue-components，并在vite.config.js文件中进行相应的配置，自动按需加载组件，无需在各个页面进行手动引入组件

npm install unplugin-vue-components -D

//vite.config.js中的配置
import { defineConfig } from 'vite'
import Components from 'unplugin-vue-components/vite'
import {  AntDesignVueResolver } from 'unplugin-vue-components/resolvers'
export default defineConfig({
  plugins: [
    Components({
      resolvers: [ AntDesignVueResolver() ]
    })
  ]
})

安装unplugin-auto-import，借助unplugin-auto-import/vite这个插件，自动导入vue3的hooks

npm i unplugin-auto-import -D 

// vite.config.js中的配置
import { defineConfig } from 'vite'
import AutoImport from 'unplugin-auto-import/vite'
export default defineConfig({
  plugins: [
    AutoImport({
      imports: ['vue', 'vue-router', 'vuex']
    })
  ]
})

7、国际化设置

8、主题设置

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import Components from 'unplugin-vue-components/vite'
import { AntDesignVueResolver } from 'unplugin-vue-components/resolvers'

export default defineConfig({
  plugins: [
    vue(),
    Components({
      resolvers: [
        AntDesignVueResolver({ importStyle: 'less' })  
       //{ importStyle: 'less' }是重点，缺失将导致主题的配置不生效
      ]
    })
  ],
  css: {
    preprocessorOptions: {
      less: {
        modifyVars: {
          'primary-color': '#ff7575'
        },
        javascriptEnabled: true
      }
    }
  }
})

9、接口返回状态码逻辑处理

import { message } from 'ant-design-vue'

const HTTP_STATUS = {
  400: '错误请求',
  401: '用户没有权限',
  403: '拒绝访问',
  404: '资源不存在',
  405: '请求方法未允许',
  406: '请求格式不可得',
  408: '请求超时',
  410: '请求资源被永久删除',
  422: '验证错误',
  500: '服务器内部错误',
  501: '服务未实现',
  502: '网络错误',
  503: '服务不可用',
  504: '网络超时',
  505: 'HTTP版本不受支持'
}
export const errorPrompt = res => {
    const { status } = res
    if(status == 401) window.location.href = `${import.meta.env.VITE_APP_JUMPURL as any}/#/login?fromUrl=${encodeURIComponent(window.location.href)}`
    else if(res.code=='0001'){
         message.warning(HTTP_STATUS[status]|| res.message)
    } else {
         message.error(HTTP_STATUS[status]|| res.message) 
    } 
}

10、axios请求封装

import axios from 'axios'
import store from '../store/index'
import { errorPrompt } from './errorPrompt'
import { getCookie } from './commonFunction'

const instance = axios.create({
  baseURL: import.meta.env.VITE_APP_BASEURL, 
  timeout: 30000, // 请求超时时间
  showLoading: true
})

let loadingNum = 0
instance.interceptors.request.use(config => {
  if(config.showLoading) {
    loadingNum ++
    store.commit('loading', true)
  }  
  if(getCookie('user')) config.headers.Authorization = getCookie('user')  
  return config
}, error => Promise.reject(error))

instance.interceptors.response.use(response => {
  loadingNum --
  if(loadingNum <= 0) store.commit('loading', false)
  if(response.data.code === '0000') return response.data
  else {
    errorPrompt(response.data)
    return Promise.reject(response)
  }
}, error => {
  loadingNum--
  if(loadingNum <= 0) store.commit('loading', false)
  errorPrompt(error.response)
  return Promise.reject(error.response)
})

export function get(url, data) {
  return instance.get(url, { params: data })
}
export function post(url, data, params) {
  return instance.post(url, data, { params: params })
}  
export function deleteReq(url, data) {
  return instance.delete(url, { params: data })
}  
export function put(url, data, params) {
  return instance.put(url, data, { params: params })
}

请求接口时使用

import { get, post } from "@/utils/request"
export function login(params) {
  return post('account-center/login', params)
}