vue3项目实战+element-plus

记录自己搭建前端项目的学习过程和开发过程，希望一起学习进步

采用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

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')

 此时基本完成了，然后我们需要在app.vue页面的template中加上router-view。这个会把匹配到的路由的页面渲染到此处。

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

 router-link是跳转到对应路由的组件，目前我是没用到，可以做点击跳转的功能。这儿点比较简单，可以看官网学习。我不写了

入门 | Vue Router (vuejs.org)

第四步，完善登录界面，这点比较考验审美和css的基础。

按照常规的H5来做就可以，不过肯定是在element-plus的基础上。可以去官网找到对应的组件模板。我这里使用的是form组件。具体代码我就不多写了。因为官网大部分都有，我回头会把我遇到的坑单独的写出来，然后大家注意下就好了。(主要是js和ts写法有些不一样，会踩坑) 

我的登录界面：本身使用了组件库，基本的样式都有，无非是跳转下大小啦，位置啦，显示的文字啦这些，form还有表单验证，也是可以使用的，挺不错的，很好看也很好用

Home页面目前不重要，主要是在于我们登录成功之后能跳转就好了。

第五步，封装axios，用于请求服务端。

（这里是踩了一下坑的……）跟封装router差不多，也是添加一个axios的js文件。导入axios。如果第一次用，可以去官网看看基本的一些配置说明

Axios 中文文档 | Axios 中文网 | Axios 是一个基于 promise 的网络请求库，可以用于浏览器和 node.js (axios-http.cn)

我只封装了 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);
    }
})

 封装之后别忘了在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')

 我踩的坑的地方是挂载全局这块儿：大约在半年前，我记得挂载全局使用的是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，我还没写完，所以暂时博客就到这里了！后面等我做好之后会继续更新的~~~

 

 

 

 

我可能博客写的不好，如果有错误希望大佬可以指出来，大家一起学习进步~~~~

git地址前端:反正也不被需要/manage-bbs-vue - 码云 - 开源中国 (gitee.com)

git地址后端：Net6WebAPI: 基于Net6的WebAPI项目。仓储模式，封装了基础增删改查，可根据需求自定义或重写基础接口。 (gitee.com)

（能给我点个star更好嘿嘿！）