赞
踩
采用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,也还不错,可用可不用。看喜好(我是觉得有比没有好,多学点,虽然不是很重要的一部分)
指令: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
……
其实要用什么,官网都会写指令,我不继续写了。
可以在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是跳转到对应路由的组件,目前我是没用到,可以做点击跳转的功能。这儿点比较简单,可以看官网学习。我不写了
按照常规的H5来做就可以,不过肯定是在element-plus的基础上。可以去官网找到对应的组件模板。我这里使用的是form组件。具体代码我就不多写了。因为官网大部分都有,我回头会把我遇到的坑单独的写出来,然后大家注意下就好了。(主要是js和ts写法有些不一样,会踩坑)
我的登录界面:本身使用了组件库,基本的样式都有,无非是跳转下大小啦,位置啦,显示的文字啦这些,form还有表单验证,也是可以使用的,挺不错的,很好看也很好用
Home页面目前不重要,主要是在于我们登录成功之后能跳转就好了。
(这里是踩了一下坑的……)跟封装router差不多,也是添加一个axios的js文件。导入axios。如果第一次用,可以去官网看看基本的一些配置说明
- //引入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,我还没写完,所以暂时博客就到这里了!后面等我做好之后会继续更新的~~~
我可能博客写的不好,如果有错误希望大佬可以指出来,大家一起学习进步~~~~
(能给我点个star更好嘿嘿!)
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。