记录自己搭建前端项目的学习过程和开发过程,希望一起学习进步
采用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去配置。
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
//导入路由 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组件上
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
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是跳转到对应路由的组件,目前我是没用到,可以做点击跳转的功能。这儿点比较简单,可以看官网学习。我不写了
第四步,完善登录界面,这点比较考验审美和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请求。一般来说这两个就足够了
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
//引入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导入,并且挂载全局!这里我是踩坑的了,小白可以细看下…先贴代码后写结论
(导入路由的部分没一起贴,讲到哪一部分就贴哪一部分的,省的回头太多了也看的迷糊)
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
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更好嘿嘿!)