記錄自己搭建前端項目的學習過程和開發過程，希望一起學習進步

採用Vue3+element-plus+axios+vue-router+sass……（目前剛開始是用到了這些,隨着開發慢慢更新）

npm是比較慢的， 所以我用的是pnpm。安裝指令：npm i pnpm

簡單介紹下作用

Vue3:前端框架,能看我這個博客的應該不用我介紹了吧~

element-plus：前端組件庫,以前我比較喜歡naive的樣式，最近發現element的支持虛擬化table，可以渲染大量數據，所以這次就選用這個了

axios：類似ajax，主要用於發送請求

vue-router：vue算是單頁面框架，路由可以在你的頁面中來回跳轉這樣子。

sass: 支持嵌套css,也還不錯，可用可不用。看喜好(我是覺得有比沒有好，多學點，雖然不是很重要的一部分)

第一步，使用vite創建初始的vue項目。vite相當於vue腳手架。是目前官方推薦的（對於現在的我來説，好像也沒什麼區別，反正就是用來初始化一個項目模板~）

指令:pnpm create vite，隨後根據提示設置項目名(好像是全部都得小寫，我沒試過大寫會怎麼樣),選擇項目模板vue，選擇腳本語言 JS(如果你懂ts更好，因為vue3的官方文檔好像都是ts為主，包括組件庫也是ts案例)

第二步，安裝需要用到的組件庫，或者其他的包。

我寫的時候是一個一個引入的，比如我先引入element-plus，然後導入，然後測試是否正確引入。然後做了個登錄頁面，然後再引入了路由，用作登錄之後跳轉到home主頁面，然後引入axios發送請求，再然後覺得css寫的不好，引入了sass……下面我直接寫對應的指令：

安裝element組件庫: pnpm install element-plus

安裝sass：pnpm i sass

安裝 vue-router：pnpm i vue-router

……

其實要用什麼，官網都會寫指令，我不繼續寫了。

第三步，假設你此時寫了 登錄界面Login，登錄成功跳轉到主界面Home。此時我們不考慮兩個界面具體如何，我們要做的就是可以互相跳轉。那麼此時需要用到的就是路由(vue-router)

可以在main.js裏寫，但是似乎一般開發都會將其封裝成單獨的JS文件，然後引入使用，我這裏也是如此，我不貼全部的代碼了，只做基礎的講解，節省篇幅，我會把我寫的項目放到開源的git倉庫，大家一起學習吧！

這個是我們封裝的router.js文件，目前只有兩個.vue頁面，那後期頁面多的話，行數更多，所以不會直接在main.js去配置。

//導入路由
import { createRouter,createWebHistory } from "vue-router";
//導入vue頁面
import Home from '../components/Home.vue'
import Login from '../components/Login.vue'
//設置路由集合
const routes = [
    { path: '/Home/:id?', component: Home },
    {path:'/',component:Login}
]
//創建路由實例
const router = createRouter({
    history:createWebHistory(),
    routes:routes
})
//導出默認路由規則
export default router

View Code

main.js引入我們封裝的router.js文件，並且掛載app組件上

import { createApp } from 'vue'
import App from './App.vue'
//這個是導入封裝的router文件
import router from './config/router.js'
//這個是導入element-plus
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
//創建vue實例
var app = createApp(App)
//使用導入的一些組件庫或者封裝的文件
app.use(ElementPlus)
app.use(router)
//綁定到id為app的div
app.mount('#app')

View Code

 此時基本完成了，然後我們需要在app.vue頁面的template中加上router-view。這個會把匹配到的路由的頁面渲染到此處。

<template>
  <router-view></router-view>
</template>

 router-link是跳轉到對應路由的組件，目前我是沒用到，可以做點擊跳轉的功能。這兒點比較簡單，可以看

第四步，完善登錄界面，這點比較考驗審美和css的基礎。

按照常規的H5來做就可以，不過肯定是在element-plus的基礎上。可以去官網找到對應的組件模板。我這裏使用的是form組件。具體代碼我就不多寫了。因為官網大部分都有，我回頭會把我遇到的坑單獨的寫出來，然後大家注意下就好了。(主要是js和ts寫法有些不一樣，會踩坑) 

我的登錄界面：本身使用了組件庫，基本的樣式都有，無非是跳轉下大小啦，位置啦，顯示的文字啦這些，form還有表單驗證，也是可以使用的，挺不錯的，很好看也很好用

Home頁面目前不重要，主要是在於我們登錄成功之後能跳轉就好了。

第五步，封裝axios，用於請求服務端。

（這裏是踩了一下坑的……）跟封裝router差不多，也是添加一個axios的js文件。導入axios。如果第一次用，可以去官網看看基本的一些配置説明

我只封裝了 get，post請求。一般來説這兩個就足夠了

//引入axios
import axios from 'axios'
//根URl,一般就是公共的請求url
const rootUrl = 'http://XXXX/api'
//axios請求實例:
//url是rootUrl後面的具體方法
//methond代表是哪種請求：get，post等
//data：參數放在請求體內
//params:參數拼接在url上
//success：請求成功之後的操作
//err:請求失敗的操作
//axios實例中不懂的可以去官網看一下
function https(url, method, data, params, success, err) {
    axios({
        method: method,
        url: url,
        data: data,
        baseURL: rootUrl,
        headers: {
            //  'Content-Type':'application/json'
        },
        params: params,
        timeout: 3500,
        withCredentials: false
    }).then(res => {
        if (res.data.state == 200) {
            success(res.data)
        }
    }).catch(function (error) {
        console.log(error);
    });
}
//導出方法：只做了get和post
export default ({
    get: function (url, data, params, success, err) {
        https(url, 'get', data, params, success, err);
    },
    post: function (url, data, params, success, err) {
        https(url, 'post', data, params, success, err);
    }
})

View Code

 封裝之後別忘了在main.js導入，並且掛載全局！這裏我是踩坑的了，小白可以細看下…先貼代碼後寫結論

（導入路由的部分沒一起貼，講到哪一部分就貼哪一部分的，省的回頭太多了也看的迷糊）

import { createApp } from 'vue'

import App from './App.vue'
//導入封裝的axios組件
import httpAxios from './config/axios.js'

var app = createApp(App)
//掛載全局
app.provide('axios',httpAxios);

app.mount('#app')

View Code

app.config.globalProperties.$api = api(這個api就是你導入的封裝好的axios.js的名字)。但是現在這種方法竟然不行了！搜一些vue3的教程就是這樣的呀，看官網其實我覺得講的也不清楚，笑死，就這樣查了大半天時間（主要還是嘗試解決以config這種寫法）…，後來終於找到了一個可以用的。就是我上面代碼貼的app.provide('axios',httpAxios);説句丟人的話，我不精通前端，所以官網的解釋我一開始就沒看懂55…反正是得到了正確的解決方法就好啦~吼吼吼~  provide 和 inject 通常成對一起使用，所以provide掛載全局之後，需要用的地方就要使用inject 。

比如此時我的login頁面。點擊登錄頁面，就要請求接口了。不過寫這個博客的時候，我請求的接口是發送郵件的接口，所以這裏就以發送郵件為案例。

<script setup>
//導入vue裏的組件
import { reactive, ref, inject } from 'vue'
//獲取axios，這個就是取剛才掛載的全局axios了,後面的''代表如果沒用就是''
const axios = inject('axios', '');
//發送郵箱按鈕5秒發送一次
function sendMail() {
  //發送請求
  if (Login.userEmail != null) {
    var params = {
      email: Login.userEmail
    }
    axios.get('XXX', null, params, res => {
      console.log(res);
    });
  }
}
</script>

我標紅的一部分我要解釋下，xxx就是請求的方法，封裝axios的時候不是設置了baseurl嗎？所以真正請求的url就是baseurl+xxx這個例如baseurl=http://123.com,xxx表示GetCode方法。真正的請求就是http://123.com/GetCode。一般get請求參數在params，所以第二個參數data我就傳null了。第三個參數params,第四個是success的回調函數。如果你還是不理解，可以看看封裝的axios裏面，大概就會明白了。

 到了這裏，axios也已經正確的配置好了。接下來就要完善登錄之後跳轉home頁面的具體操作了。現在是2023-8-27-23:52，我還沒寫完，所以暫時博客就到這裏了！後面等我做好之後會繼續更新的~~~

我可能博客寫的不好，如果有錯誤希望大佬可以指出來，大家一起學習進步~~~~