vue3.0+ts+element-plus+axios项目初体验
项目基于vue-cli@4.5下开发的，vue-cli4.5和之前的3.0以下的老版本不一样，安装命令也有所不同。
首先得全局安装cli
npm install -g @vue/cli //全局安装vue-cli最新版本
第二步：实例化项目
vue create mypro // 创建项目，mypro项目名，项目名中不允许出现大写字母
要使用3.0 选择 >Default (Vue 3 Preview) ([Vue 3] babel, eslint)
目前为止你的项目已经实例化出来了，但是 没有vue-router typescript等，需要手动添加
进入项目
cd mypro
添加typescript
vue add typescript
添加vue-router
vue add router
添加element-plus
vue add element-plus
添加axios
vue add axios
$这里要特别注意，通过这种写法添加的axios是2.0的写法，需要自己重构下，我直接贴我修改后的代码
vue3.0没有全局的vue对象 需要使用app.config.globalProperties 去扩展全局方法
axios.ts
"use strict";
import axios from "axios";
// Full config: https://github.com/axios/axios#request-config
// axios.defaults.baseURL = process.env.baseURL || process.env.apiUrl || '';
// axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;
// axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
let config = {
// baseURL: process.env.baseURL || process.env.apiUrl || ""
// timeout: 60 * 1000, // Timeout
// withCredentials: true, // Check cross-site Access-Control
};
const _axios = axios.create(config);
_axios.interceptors.request.use(
function(config) {
// Do something before request is sent
return config;
},
function(error) {
// Do something with request error
return Promise.reject(error);
}
);
// Add a response interceptor
_axios.interceptors.response.use(
function(response) {
// Do something with response data
return response;
},
function(error) {
// Do something with response error
return Promise.reject(error);
}
);
export default {
install:function(app:any, options:any) {
app.config.globalProperties.axios = _axios;
// 添加全局的方法
app.config.globalProperties.$translate = (key: any) => {
// return key.split('.').reduce((o, i) => {
// if (o) return o[i]
// }, i18n)
return key
}
}
}
main.ts
import { createApp } from 'vue'
import App from './App.vue'
// @ts-ignore
import axios from './plugins/axios.ts'
// @ts-ignore
import installElementPlus from './plugins/element.ts'
// 引入公共scss
import './element-variables.scss'
import router from './router'
const app = createApp(App).use(router).use(axios)
installElementPlus(app)
app.mount('#app')
转载： https://blog.csdn.net/marko_zheng/article/details/110520551