创建vite+vue3+ts+element-plus项目架子时,走过的坑

axios

因为每一次请求需要携带请求token,为了方便想在请求头中携带token,按照之前在vue2+js中的写法,会报类型错误

创建vite+vue3+ts+element-plus项目架子时,走过的坑

(property) AxiosRequestConfi难破mg5g.headers?: AxiosRequestHeaders | undeAPPfined

解决方式:

// 覆盖axios ts对config.headers的类型限制
interface YXRequestConfig extends AxiosRequestConfig {
    headers?: any
}
// 请求拦截
axios.interceptors.request.use((config:YXRequestConfig)=>{
    // 设置请求头
    if(window.sessionStorage.getItem('token')){
        config.headers['token'] = window.sessionStorage.getItem('token');
    }else if(window.localStorage.getItem('token')){
        config.headers['token'] = window.localStorage.getItem('token');
    }
    nprogress.start()
    return config
},error=>{
    return Promise.reject(error);
})

vue-router

在定义routes数组时会报类型错误

解决方式:

import { RouteRecordRaw } from 'vue-router'
const routes:RouteRecordRaw[] = [....]
export default routes

require不支持的状况

ts可能会不兼容部分es6的新语法,所以如果要在ts中使变量名用es6的一些新语法,最好下载@types/node插件
npm i @types/node -D

配置环境变量

定义环境变量:

之前在vue-cli脚难破mg5日剧手架中,配置环境变变量是什么意思量,写在.env文件中,且以VUE_APP_开头即可,但是在vite项目中,需要变更为VITE_APP_开头的形式;

创建vite+vue3+ts+element-plus项目架子时,走过的坑

访问环境变量:

import.meta.env.变量名

挂载全局属性

之前在vue2中我们都是直接将需要全局使用的属性,添加到Vue的原型对象上,然后通过this.的方式去访问;
然而在vue3中却不能这么操作,如果我们需数组去重方法要在vue3的实例上,挂载变量,则需要使用以下的方式:

app.config.globalProperties.API = API // 将axios添加到vue实例上

访问方式:
因为在vue3中,我们的业务逻辑都在setup中,不再使用this,所以,访问vue挂载的变量的方式就变成以变量泵下形式:

const {appContext} = getCurrentInstance()
const {API} = appContext.config.globalProperties

我觉得这apple种方式又臭又长,还不如直接导入来的快,如果大家有更好的解决方式,请留言告诉我,谢谢。
另外,数组如果你的项目是ts的,上面代码会报类型变量与函数错误,解决方式如下:
创建一个hooksapplication文件夹,里面新建一个u男配每天都在体内成绩se***.ts的文件,这个文件名随意。在文件中下入如下代码

import { getCurrentInstance, ComponentInternalInstance } from 'vue'
export function useGlobalMmount(){
    const {appContext} = getCurrentInstance() as ComponentInternalInstance
    return appContext.config.globalProperties
}

其他文件中使用:

  import {useGlobalMmount} from '../hooks/usegetCurrentInstance'
  let {API} = useGlobalMmount();

element-plus主题变量名的命名规则定制

根据官方文档的教程,我的项目报错

./src/assets/style/element/index.scss (./node_modules/css-loader/dist/cjs.js??ref--9-oneOf-3-1!./node_modules/postcss-loader/src??ref--9-oneOf-3-2!./node_modules/sass-loader/dist/cjs.js??ref--9-oneOf-3-3!./node_modules/style-resources-loader/lib??ref--9-oneOf-3-4!./src/assets/style/element/index.scss)
Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: @forward rules must be written before any other rules.
  @forward 'element-plus/theme-chalk/src/common/var.scss' with (
   $colors: (
     'primary': (
       'base': #3F66D4,
     ),
   )
 );

我的解决方式: 在src下创建style>element>index.scss

创建vite+vue3+ts+element-plus项目架子时,走过的坑

注意如果想在vite中支持scss,你需要安装变量值sass
npm i sass -S
创建好后,index.scss中的代码如下:

$--colors: (
  "primary": (
    "base": rgb(250, 184, 2),
  ),
  "success": (
    "base": rgb(250, 184, 2),
  ),
  "warning": (
    "base": #f2711c,
  ),
  "danger": (
    "base": #db2828,
  ),
  "error": (
    "base": #db2828,
  ),
  "info": (
    "base": #42b8dd,
  ),
);
@forward "element-plus/theme-chalk/src/common/var.scss" with (
  $colors: $--colors,
);
@use "element-plus/theme-chalk/src/dark/css-vars.scss" as *;

数组公式后我们需要变量泵在vite.config.ts中做出如下配置 安装两个插件动态引入elNPMemeapplicationnt+的样式:
npm i unplugin-vue-components/vite unplugin-vue-components/reso女配每天都在为国争光lvers -D

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
export default defineConfig({
    plugins: [
        vue(),
        Components({
          resolvers: [
            ElementPlusResolver({
              importStyle: 'sass',
            }),
          ],
        }),
      ],
      //css预处理
      css: {
            preprocessorOptions: {
            scss: {
                additionalData: '@use "./src/style/element/index.scss";'
                }
            }
        },
})

我们在这里已经全局使用了element定制的样式,所以在mai数组指针n.ts中,就不需要引入element的默认样式和自定义样式了

后续可能还会踩更多的坑,往后的坑就在这篇文章的基础上继续编辑更新,有更多好的建application议,请各位大axios和ajax区别佬在评论区指教。

发表评论

提供最优质的资源集合

立即查看 了解详情