vue3.0+ts+element-plus项目初体验

最新推荐文章于 2024-07-12 15:34:35 发布

Markov Zheng

最新推荐文章于 2024-07-12 15:34:35 发布

阅读量1.6w

点赞数 8

分类专栏：网络学习日志 vue 文章标签： vue proxy

本文链接：https://blog.csdn.net/marko_zheng/article/details/110520551

版权

本文档介绍了在vue-cli@4.5环境下，使用Vue3.0、TypeScript、Element-Plus和Axios创建项目的过程。重点讲述了Vue3.0中如何通过app.config.globalProperties扩展全局方法来适配Axios，以及在没有全局vue对象的情况下进行配置的注意事项。

摘要由CSDN通过智能技术生成

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