VUE移动端项目跟练1（简洁易懂）1.准备工作 ai工具：chatgpt；cursor 1.1 使用vant2进行 1.

1.准备工作

ai工具：chatgpt；cursor

1.1 使用vant2进行

2. 创建新项目

2.1 包管理器简单介绍（这里我使用npm）

npm是包管理器 （此外，yarn、pnpm也是包管理器（这里不做额外拓展，可自行查询文档和命令差异））

2.2 项目创建步骤

2.3 更换src

稍后在网盘分享

2.4 启动项目（确保路径正确，直接在文件夹的导航栏输入cmd->回车）

2.5 自动格式化插件

作用：解决格式或缩进问题

3. 正式开发

3.1 组件库

组件库有分pc端和移动端

3.2 导入vant组件

3.2.1 vant的两种导入方式（不能混用）

3.2.1.1 全部导入

3.2.1.2 按需导入

需要什么就导入什么模块（较麻烦）第一步要先安装插件

3.3 项目适配（移动端项目）

通过查看vue2文档进行使用

3.3.1 vw或Rem布局适配（这里我使用vw）

3.4 路由搭建

路由结构（一级路由和二级路由）

3.4.1 路由规则

index.js文件中配置一级、二级路由规则

import Vue from "vue";
import VueRouter from "vue-router";

// 导入一级路由组件
import Login from "@/views/Layout/Login";
import Register from "@/views/Layout/Register";
import Detail from "@/views/Layout/Detail";
import Home from "@/views/Layout/Home";

// 导入二级路由组件
import Article from "@/views/Layout/Article";
import Like from "@/views/Layout/Like";
import Collect from "@/views/Layout/Collect";
import User from "@/views/Layout/User";

Vue.use(VueRouter);

const routes = [
  { path: "/login", component: Login },
  { path: "/register", component: Register },
  { path: "/detail", component: Detail },
  // 主页路由（在主页路由中配置二级路由(二级路由可以不写斜线)）
  {
    path: "/",
    // 二级路由中的重定向
    redirect: "/article",
    component: Home,
    children: [
      { path: "article", component: Article },
      { path: "like", component: Like },
      { path: "collect", component: Collect },
      { path: "user", component: User },
    ],
  },
];

const router = new VueRouter({
  routes,
});

export default router;

3.5 Home.vue（主页）

使用到vue2中的tabbar标签页

3.5.1 导入tabbar效果

结果：

3.5.2 实现点击icon切换路由效果

3.5.3 使用vant组件库中的内置图标更改图标

home.vue的完整代码

<template>
  <div class="home-page">
    <!-- 二级路由的出口 (router-view 是占位符)-->
    <router-view></router-view>
    <!-- 底部标签(导入vue2中的van-tabbar) -->
    <van-tabbar>
      <van-tabbar-item to="/article" icon="home-o">面经</van-tabbar-item>
      <van-tabbar-item to="/collect" icon="star-o">收藏</van-tabbar-item>
      <van-tabbar-item to="/like" icon="like-o">喜欢</van-tabbar-item>
      <van-tabbar-item to="/user" icon="manager-o">我的</van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>
export default {
  name: "HomePage",
  created() {
    console.log("Home loaded");
  },
};
</script>

<style lang="less" scoped></style>

3.6 toast轻提示

3.6.1 简单演示

3.6.1.1 登录提示

<template>
  <div class="login-page">登录页</div>
</template>

<script>
export default {
  name: "Login-Page",
  mounted() {
    this.$toast("登陆成功");
  },
};
</script>

<style lang="less" scoped></style>

3.6.1.2 登录成功提示

<template>
  <div class="login-page">登录页</div>
</template>

<script>
export default {
  name: "Login-Page",
  mounted() {
    // this.$toast("登陆成功");
    this.$toast.success("登陆成功");
  },
};
</script>

<style lang="less" scoped></style>

4 各个路由页面编写

4.1 login页面编写（使用导航组件和表单组件实现效果）

预期效果预览

4.1.1 导航组件使用

4.1.2 表单组件使用

（注意：表单组件要把js也拿过来，否则只有样式显示而没有交互效果）

4.1的login页面总代码和效果展示

<template>
  <div class="login-page">
    <van-nav-bar title="面经登录" />
    <!-- 登录表单 -->
    <van-form @submit="onSubmit">
      <van-field
        v-model="username"
        name="用户名"
        label="用户名"
        placeholder="用户名"
        :rules="[{ required: true, message: '请填写用户名' }]"
      />
      <van-field
        v-model="password"
        type="password"
        name="密码"
        label="密码"
        placeholder="密码"
        :rules="[{ required: true, message: '请填写密码' }]"
      />
      <div style="margin: 16px">
        <van-button block type="info" native-type="submit">登录</van-button>
      </div>
    </van-form>
    <!-- 超链接 -->
    <router-link class="link" to="/register">还没账号？去注册</router-link>
  </div>
</template>

<script>
export default {
  name: "Login-Page",
  data() {
    return {
      username: "",
      password: "",
    };
  },
  methods: {
    onSubmit(values) {
      console.log("submit", values);
    },
  },
};
</script>

<style lang="less" scoped>
.link {
  float: right;
  margin-right: 20px;
  font-size: 14px;
  color: #1989fa;
}
</style>

效果：

4.1.3 登录页面数据获取

使用接口文档
全部文档/15-面经移动端.md · 老汤/顺义157vue基础 - Gitee.com
管理员登录 - 传智教育-面经项目--h5移动端接口文档
控制台中获取的数据（以键值对形式） 文档中要求的键的名称（与上方图中的键名不一样（所以需要调整））

在代码中更改键名以做到统一 更改后效果；

4.1.4 两种正则校验规则的写法

效果展示：

4.1.5 数据提交

前提：已经注册了账号密码（可先跳转至4.2看register注册页面）
思路：
1.点击登录时执行
2.储存token
3.提示登录成功（从res.data.message中获取）
4.清空输入框 5.跳转到面经列表页
login完整代码

<template>
  <div class="login-page">
    <van-nav-bar title="面经登录" />
    <!-- 登录表单 -->
    <van-form @submit="onSubmit">
      <van-field
        v-model="username"
        name="username"
        label="用户名"
        placeholder="用户名"
        :rules="userRule"
      />
      <van-field
        v-model="password"
        type="password"
        name="password"
        label="密码"
        placeholder="密码"
        :rules="[
          { required: true, message: '请填写密码' },
          { pattern: /^\w{6,20}$/, message: '请输入6~20位密码' },
        ]"
      />
      <div style="margin: 16px">
        <van-button block type="info" native-type="submit">登录</van-button>
      </div>
    </van-form>
    <!-- 超链接 -->
    <router-link class="link" to="/register">还没账号？去注册</router-link>
  </div>
</template>

<script>
import request from "@/utils/request";
import { loginAPI } from "@/api/user";
export default {
  name: "Login-Page",
  data() {
    return {
      username: "",
      password: "",
      userRule: [
        { required: true, message: "请填写用户名" },
        { pattern: /^\w{2,10}$/, message: "请输入2~10位用户名" },
      ],
    };
  },
  methods: {
    // 点击登录的时候执行
    async onSubmit(values) {
      try {
        // 登录成功提示登录成功
        const { data: res } = await request({
          method: "POST",
          url: "/h5/user/login",
          data: values,
        });
        // 存储token
        localStorage.setItem("token", res.data.token);
        // 清空输入框
        this.username = this.password = "";
        // 跳转主页
        this.$router.push("/article");
        this.$toast.success("登录成功");
      } catch (error) {
        if (error.response) {
          this.$toast(error.response.data.message);
        } else {
          this.$toast("登录失败");
        }
      }
    },
  },
};
</script>

<style lang="less" scoped>
.link {
  float: right;
  margin-right: 20px;
  font-size: 14px;
  color: #1989fa;
}
</style>

效果展示；

4.2 register注册页面编写

先将login代码复制粘贴至register.vue中，再做稍许修改

4.2.1 安装并使用axios包

4.2.1.1 安装axios包

安装包

4.2.1.2 使用axios

这里创建一个名为request的axios副本，配置好基础规则，直接在register.vue中导入 结果：

4.2.2 抽离API方法（提高复用性）

此处针对的是收藏、点赞题目的功能，减少代码冗余，提高代码复用性

收藏、点赞题目/取消收藏、点赞题目接口 - 传智教育-面经项目--h5移动端接口文档

4.2.3 注册后的成功与失败提示

将控制台中输出的结果（response=》data=》message中的信息通过轻提示的方法响应给用户）

<template>
  <div class="register-page">
    <van-nav-bar title="面经注册" />
    <!-- 登录表单 -->
    <van-form @submit="onSubmit">
      <van-field
        v-model="username"
        name="username"
        label="用户名"
        placeholder="用户名"
        :rules="userRule"
      />
      <van-field
        v-model="password"
        type="password"
        name="password"
        label="密码"
        placeholder="密码"
        :rules="[
          { required: true, message: '请填写密码' },
          { pattern: /^\w{6,20}$/, message: '请输入6~20位密码' },
        ]"
      />
      <div style="margin: 16px">
        <van-button block type="info" native-type="submit">注册</van-button>
      </div>
    </van-form>
    <!-- 超链接 -->
    <router-link class="link" to="/login">已有账号，去登录</router-link>
  </div>
</template>

<script>
// 导入配置好的request.js
// import request from "@/utils/request";
import { registerAPI } from "@/api/user";
export default {
  name: "register-Page",
  data() {
    return {
      username: "",
      password: "",
      userRule: [
        { required: true, message: "请填写用户名" },
        { pattern: /^\w{2,10}$/, message: "请输入2~10位用户名" },
      ],
    };
  },
  methods: {
    // 点击注册的时候执行
    async onSubmit(values) {
      // 此处的values就是表单中的数据，即：values={username: "", password: ""}
      // 提示注册的信息
      // 如果注册成功
      try {
        const { data: res } = await registerAPI(values);
        // 1.提示注册成功
        this.$toast("注册成功");
        // 2.重置表单
        this.username = this.password = "";
        // 3.跳转登录页面
        this.$router.push("/login");
      } catch (err) {
        // 如果有响应结果，则提示响应结果
        if (err.response.data.message) {
          this.$toast(err.response.data.message);
          // 如果响应结果中没有message，则提示注册失败
        } else {
          this.$toast("注册失败");
        }
      }
    },
  },
};
</script>

<style lang="less" scoped>
.link {
  float: right;
  margin-right: 20px;
  font-size: 14px;
  color: #1989fa;
}
</style>