这篇文章主要介绍了如何使用Vite创建一个前端项目,并配置了Vue Router、Vuex、Element Plus、Axios和Element Plus图标等第三方依赖,文中通过代码介绍的非常详细,需要的朋友可以参考下 
目录
1. 准备环境2. 安装Vite3.创建一个vite前端项目4. 进入到创建的项目路径5.安装配置项目所需的第三方依赖5.1.配置路由5.1.1.安装路由:5.1.2 .vue-router的配置5.2.配置vuex (全局的状态管理)5.2.1.安装vuex5.2.2.vuex的配置5.3.配置element-plus5.3.1 .安装element-plus5.3.2.在main.js配置5.4.配置element-plus图标5.4.1.安装element-plus图标5.4.2. 在main.js配置5.5.配置axios5.5.1 安装axios和qs5.5.2.axios的配置总结1. 准备环境
确保你的计算机上已安装Node.js和npm（或yarn，如果你更偏好使用yarn）。你可以通过运行node -v和npm -v（或yarn -v）来检查它们是否已安装以及安装的版本。
2. 安装Vite
在命令行（终端）中，使用npm（或yarn）全局安装Vite。虽然对于单个项目来说，全局安装不是必需的，但这样做可以确保你可以在任何地方使用Vite命令。
3.创建一个vite前端项目
yarn create vite 项目名 --template vue
4. 进入到创建的项目路径
cd 项目名 yarn //安装依赖
5.安装配置项目所需的第三方依赖
第三方依赖vue-router，vuex ，element-plus， axios ，qs ，element-plus-icon是vite基础项目的必须依赖，其他依赖可根据自己实际需求来安装。
5.1.配置路由
5.1.1.安装路由:
yarn add vue-router
5.1.2 .vue-router的配置
在src创建router目录, 在router目录创建index.js，将以下基本内容复制粘贴。
import { createRouter, createWebHistory} from 'vue-router'const routes = [];const router = createRouter({ routes, //路由规则 history: createWebHistory(), linkActiveClass:'active' });//全局前置路由守卫export default router;在main.js文件中配置router
import router from './router'app.use(router)
5.2.配置vuex (全局的状态管理)
5.2.1.安装vuex
yarn add vuex
5.2.2.vuex的配置
在src目录下创建store目录, 在store目录创建一个index.js
//1.导入createStore函数import {createStore} from 'vuex'//2.创建vuex的核心对象//定义一个状态const state={}//state的计算属性const getters={}//修改状态的 同步的const mutations ={}//actions 操作 定义事件,让组件触发事件const actions = { }const plugins =[]//3. 调用createStore创建store对象const store = createStore({ state, mutations, actions, getters, plugins,});//4.暴露storeexport default store;在main.js配置store
import store from './store'app.use(store)
5.3.配置element-plus
5.3.1 .安装element-plus
yarn add element-plus
5.3.2.在main.js配置
import ElementPlus from 'element-plus'import 'element-plus/dist/index.css'app.use(ElementPlus)
5.4.配置element-plus图标
5.4.1.安装element-plus图标
yarn add @element-plus/icons-vue
5.4.2. 在main.js配置
import * as ElementPlusIconsVue from '@element-plus/icons-vue'for (const [key, component] of Object.entries(ElementPlusIconsVue)) { app.component(key, component)}5.5.配置axios
5.5.1 安装axios和qs
yarn add axiosyarn add qs
5.5.2.axios的配置
在src目录创建一个http目录, 创建两个文件
1.axios实例配置文件: config.js,将以下基本配置复制粘贴
//axios的配置文件export default { method: 'get', // 基础url前缀 baseUrl: 'http://localhost:8080',//根据项目进行修改 // 请求头信息 headers: { //默认的请求context-type: application/json 'Content-Type': 'application/json;charset=UTF-8' }, // 参数 data: {}, // 设置超时时间 timeout: 10000, // 携带凭证 是否携带cookie withCredentials: true, // 返回数据类型 responseType: 'json' }2.创建一个request.js 封装axios 工具库
import { ElLoading,ElMessage } from 'element-plus'import axios from 'axios'import qs from 'qs' //把json进行序列化成key/valueimport config from './config'import $router from '../router'const instance = axios.create({ baseURL: config.baseUrl, headers: config.headers, timeout: config.timeout, withCredentials: config.withCredentials })// request 拦截器instance.interceptors.request.use( config => { let token = sessionStorage.getItem("token"); // 带上token if (token) { config.headers.token = token } return config });const request = async function (loadtip, query) { let loading if (loadtip) { loading = ElLoading.service({ lock: true, text: '正在加载...', background: 'rgba(0, 0, 0, 0.7)', }) } const res = await instance.request(query) if (loadtip) { loading.close() } if (res.data.meta.status === 401) { //ElMessage.error(); $router.push({ path: '/login' }) return Promise.reject(res.data) //reject() catch捕获 } else if (res.data.meta.status === 500) { return Promise.reject(res.data) } else if (res.data.meta.status === 501) { return Promise.reject(res.data) } else if (res.data.meta.status === 502) { $router.push({ path: '/login' }) return Promise.reject(res.data) } else { return Promise.resolve(res.data) // then() } /* .catch(e => { if (loadtip) { loading.close() } return Promise.reject(e.msg) }) */}const get = function (url, params) { const query = { url: url, method: 'get', withCredentials: true, timeout: 30000, params: params, //params: queryString headers: { 'request-ajax': true } } return request(false, query)}const post = function (url, params) { const query = { url: url, method: 'post', withCredentials: true, timeout: 30000, data: params, //请求体 headers: { 'Content-Type': 'application/json', 'request-ajax': true } } return request(false, query)}const postWithLoadTip = function (url, params) { const query = { url: url, method: 'post', withCredentials: true, timeout: 30000, data: params, headers: { 'Content-Type': 'application/json', 'request-ajax': true } } return request(true, query)}const postWithOutLoadTip = function (url, params) { const query = { url: url, method: 'post', withCredentials: true, timeout: 30000, data: params, headers: { 'Content-Type': 'application/json', 'request-ajax': true } } return request(false, query)}const postWithUrlEncoded = function (url, params) { const query = { url: url, method: 'post', withCredentials: true, timeout: 30000, data: qs.stringify(params), //params:json qs.stringify(json) --> 转换key/value headers: { 'Content-Type': 'application/x-www-form-urlencoded', 'request-ajax': true } } return request(false, query)}const del = function (url, params) { const query = { url: url, method: 'DELETE', withCredentials: true, timeout: 30000, data: params, headers: { 'Content-Type': 'application/json', 'request-ajax': true } } return request(true, query)}const put = function (url, params) { const query = { url: url, method: 'PUT', withCredentials: true, timeout: 30000, data: params, headers: { 'Content-Type': 'application/json', 'request-ajax': true } } return request(true, query)}const form = function (url, params) { const query = { url: url, method: 'post', withCredentials: true, timeout: 30000, data: params, headers: { 'Content-Type': 'multipart/form-data', 'request-ajax': true } } return request(false, query)}export default { post, postWithLoadTip, postWithOutLoadTip, postWithUrlEncoded, get, form, del, put}3.在main.js配置
import $http from './http/request.js'app.config.globalProperties.$http = $http
