基础的前端vite项目创建

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