此項(xiàng)目通過vs code編譯，使用vant2基本框架實(shí)現(xiàn)一些基本的骨架樣式.并在小窗口下安裝并引入vant2和flexible，已經(jīng)進(jìn)行一些必要的配置

?

? ? ? ?注：這里使用的是按需導(dǎo)入配置，所以這里的vant.js就是存放這些的地方

?

?首先是登錄頁面

1、創(chuàng)建?src/views/login/index.vue?并寫入以下內(nèi)容

? ? ?

<template><div class="login-container">登錄頁面</div> </template><script> export default {} </script><style scoped lang="less"></style>

2、然后在?src/router/index.js?中配置登錄頁的路由表

??

布局結(jié)構(gòu)

這里主要使用到三個(gè) Vant 組件：

• NavBar 導(dǎo)航欄
• Form 表單
  • Field 輸入框
  • Button 按鈕

?3.然后將一些公共樣式存放在

?其中，src/views/login/index.vue

<template><div><!-- 導(dǎo)航欄 --><van-nav-bar title="登陸" /><van-form @submit="onSubmit"><van-fieldv-model="info.mobile"label="手機(jī)號(hào)"placeholder="請(qǐng)輸入手機(jī)號(hào)":rules="rules.mobile"/><van-fieldv-model="info.code"label="驗(yàn)證碼"placeholder="請(qǐng)輸入驗(yàn)證碼":rules="rules.code"/><div style="margin: 16px"><van-button v-bind:loading="isLoading" loading-text="加載中.." round block type="info" native-type="submit">登陸</van-button></div></van-form></div> </template><script> import { loginAPI } from "@/api";export default {data() {return {isLoading:false,info: {mobile: "13911111111",code: "246810",},rules: {// 手機(jī)號(hào)mobile: [// required：表示是否必填// message：錯(cuò)誤提示信息{ required: true, message: "請(qǐng)輸入手機(jī)號(hào)" },{ pattern: /^1[2-9]\d{9}$/, message: "手機(jī)號(hào)不合法" },],// 驗(yàn)證碼code: [{ required: true, message: "請(qǐng)輸入驗(yàn)證碼" },{ pattern: /^\d{6}$/, message: "驗(yàn)證碼不合法" },],},};},methods: {async onSubmit(values) {this.isLoading = truetry {console.log("成功提交");let res = await loginAPI({mobile: this.info.mobile,code: this.info.code,});console.log(res);// 修改vuex中的tokenthis.$store.commit('changeToken',res.data.data)// 存放數(shù)據(jù)在本地存儲(chǔ)里// setToken(res.data.data)this.$toast.success('成功文案');} catch {this.$toast.fail('失敗文案');}this.isLoading = false},}, }; </script><style> </style>

4、創(chuàng)建?src/api/user.js?封裝請(qǐng)求方法

?

?二：個(gè)人中心頁面

1.提前在views里面建立好一些頁面如：

?

?

?注：在使用組件之前需要引入相應(yīng)的組件

?

在mine頁面中

<template><div><!-- 頂部 --><div class="box"><van-imageroundwidth="100px"height="100px"fit="cover"src="https://img01.yzcdn.cn/vant/cat.jpeg"/><!-- 頂部信息欄 --><div class="info"><h4>xxx</h4><span>2009-08-07</span></div></div><!-- 中間信息 --><van-row><van-col span="8"><van-icon name="newspaper-o" color="blue"/><div>我的作品</div></van-col><van-col span="8"><van-icon name="star-o" color="red"/><div>我的收藏</div></van-col><van-col span="8"><van-icon name="sign" color="orange"/><div>閱讀歷史</div></van-col></van-row><!-- 底部欄 --><van-cell title="編輯資料" is-link /><van-cell title="小智同學(xué)" is-link /><van-cell title="系統(tǒng)設(shè)置" is-link /><van-cell title="退出登錄" is-link arrow-direction="down" /></div> </template><script> export default {} </script><style lang="less" scoped>.box{background-color: #3298fa;height: 140px;display: flex;align-items: center;}.van-image{width: 90px;height: 90px;margin-left: 20px;margin-right: 10px;}.info {h4 {color: #fff;font-size:20px}span {background-color: #fff;// color: @color;}}.van-row{.van-col {text-align: center;padding: 20px 0;}.van-icon{font-size: 30px;// color: @color}} </style>

總結(jié)

以上是生活随笔為你收集整理的从登录页到个人中心页的大致流程的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。