基础的前端vite项目创建过程详解

yarn create vite 项目名 --template vue

cd  项目名

 yarn //安装依赖

yarn  add   vue-router

import { createRouter, createWebHistory} from 'vue-router'​
​
const routes = [
];
​
const router = createRouter({
        routes,  //路由规则
        history:  createWebHistory(),
        linkActiveClass:'active'
    });
​
//全局前置路由守卫​
​
export default router;

import router from './router'
app.use(router)

yarn add vuex

//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;

import store from './store'
app.use(store)

yarn add  element-plus

import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
app.use(ElementPlus)

yarn add @element-plus/icons-vue

import * as ElementPlusIconsVue from '@element-plus/icons-vue'
​
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
  app.component(key, component)
}

yarn add  axios
yarn add   qs

//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'
  }

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
}

import $http from './http/request.js'
app.config.globalProperties.$http =  $http