基礎(chǔ)的前端vite項目創(chuàng)建過程詳解

更新時間：2024年11月19日 11:18:34 作者：黃彥祺

這篇文章主要介紹了如何使用Vite創(chuàng)建一個前端項目,并配置了Vue?Router、Vuex、Element?Plus、Axios和Element?Plus圖標(biāo)等第三方依賴,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下

1. 準(zhǔn)備環(huán)境

確保你的計算機(jī)上已安裝Node.js和npm（或yarn，如果你更偏好使用yarn）。你可以通過運行node -v和npm -v（或yarn -v）來檢查它們是否已安裝以及安裝的版本。

2. 安裝Vite

在命令行（終端）中，使用npm（或yarn）全局安裝Vite。雖然對于單個項目來說，全局安裝不是必需的，但這樣做可以確保你可以在任何地方使用Vite命令。

3.創(chuàng)建一個vite前端項目

yarn create vite 項目名 --template vue

4. 進(jìn)入到創(chuàng)建的項目路徑

cd  項目名

 yarn //安裝依賴

5.安裝配置項目所需的第三方依賴

第三方依賴vue-router，vuex ，element-plus， axios ，qs ，element-plus-icon是vite基礎(chǔ)項目的必須依賴，其他依賴可根據(jù)自己實際需求來安裝。

5.1.配置路由

5.1.1.安裝路由:

yarn  add   vue-router

5.1.2 .vue-router的配置

在src創(chuàng)建router目錄, 在router目錄創(chuàng)建index.js，將以下基本內(nèi)容復(fù)制粘貼。

import { createRouter, createWebHistory} from 'vue-router'?
?
const routes = [
];
?
const router = createRouter({
        routes,  //路由規(guī)則
        history:  createWebHistory(),
        linkActiveClass:'active'
    });
?
//全局前置路由守衛(wèi)?
?
export default router;

在main.js文件中配置router

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

5.2.配置vuex (全局的狀態(tài)管理)

5.2.1.安裝vuex

yarn add vuex

5.2.2.vuex的配置

在src目錄下創(chuàng)建store目錄, 在store目錄創(chuàng)建一個index.js

//1.導(dǎo)入createStore函數(shù)
import {createStore} from 'vuex'?
?
//2.創(chuàng)建vuex的核心對象
//定義一個狀態(tài)
const  state={
}
//state的計算屬性
const getters={
?
}
?
//修改狀態(tài)的  同步的
const  mutations ={
?
}
?
//actions  操作  定義事件,讓組件觸發(fā)事件
const actions = {
   
       
}
?
const plugins =[]
?
//3. 調(diào)用createStore創(chuàng)建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圖標(biāo)

5.4.1.安裝element-plus圖標(biāo)

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目錄創(chuàng)建一個http目錄, 創(chuàng)建兩個文件

1.axios實例配置文件: config.js,將以下基本配置復(fù)制粘貼

//axios的配置文件
export default {
    method: 'get',
    // 基礎(chǔ)url前綴
    baseUrl: 'http://localhost:8080',//根據(jù)項目進(jìn)行修改
    // 請求頭信息
    headers: {
      //默認(rèn)的請求context-type: application/json
      'Content-Type': 'application/json;charset=UTF-8'
    },
    // 參數(shù)
    data: {},
    // 設(shè)置超時時間
    timeout: 10000,
    // 攜帶憑證  是否攜帶cookie
    withCredentials: true,
    // 返回數(shù)據(jù)類型
    responseType: 'json'
  }

2.創(chuàng)建一個request.js 封裝axios 工具庫

import { ElLoading,ElMessage } from 'element-plus'
import axios from 'axios'
import qs from 'qs'  //把json進(jìn)行序列化成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) --> 轉(zhuǎn)換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

總結(jié)

到此這篇關(guān)于前端vite項目創(chuàng)建的文章就介紹到這了,更多相關(guān)前端vite項目創(chuàng)建內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频