vue3.0+ts+element-plus+axios專案初體驗

專案基於[email protected]下開發的，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