基础的前端vite项目创建过程详解
作者：黄彦祺
这篇文章主要介绍了如何使用Vite创建一个前端项目,并配置了Vue Router、Vuex、Element Plus、Axios和Element Plus图标等第三方依赖,文中通过代码介绍的非常详细,需要的朋友可以参考下
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.暴露store
export 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 axios yarn 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/value
import 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
总结
到此这篇关于前端vite项目创建的文章就介绍到这了,更多相关前端vite项目创建内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！