Vue3 and typescript基础配置

依赖

• element-plus
• unplugin-vue-components

// vue.config.js
const Components = require('unplugin-vue-components/webpack')
const {ElementPlusResolver} = require('unplugin-vue-components/resolvers')  //如果是antd插件名称为：AntDesignVueResolver

module.exports = {
    configureWebpack: {
        plugins: [
            Components({
                resolvers: [
                    ElementPlusResolver(),
                ]
            })
        ]
    }
}

//.eslintrc.js
rules: {
  'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
  'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
  '@typescript-eslint/no-var-requires': 'off',         //此处需添加，否则vue.config.js配置require报错
}

使用axios

// 全局挂载axios
import {createApp} from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import {AxiosInstance} from 'axios'
import axios from 'axios'

declare module '@vue/runtime-core' {
    interface ComponentCustomProperties {
        $axios: AxiosInstance;
    }
}
const app = createApp(App)
app.config.globalProperties.axios = axios
axios.defaults.baseURL = "http://localhost:8081"
app.use(store).use(router).mount('#app')

//使用axios
<script lang="ts">
import {defineComponent, getCurrentInstance} from "vue";

export default defineComponent({
  name: "Home",
  components: {},
  setup() {
    const {proxy}: any = getCurrentInstance()
    const btn = () => {
      proxy.axios.post("/ping").then((res: any) => {
        console.log(res)
      })
    }
    return {
      btn
    };
  },
});
</script>