vue3+vite+vant4手机端项目实录

最新推荐文章于 2024-04-25 10:46:55 发布

xiaowu1127

最新推荐文章于 2024-04-25 10:46:55 发布

阅读量7.7k

点赞数 14

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/xiaowu1127/article/details/128935132

版权

一、项目介绍

一款在线招聘App，有四个模块分别为登录注册模块、用户端模块、企业端模块、管理员模块

二、项目的搭建

1.vite的安装

# npm 6.x

npm init vite@latest my-vue-app --template vue

# npm 7+, 需要额外的双横线：

npm init vite@latest my-vue-app -- --template vue

2.启动vite项目

指令：npm run dev

3.vant4的引入与使用

vant4是轻量、可定制的移动端 Vue 组件库

3.1安装指令

npm i vant

3.2引入vant4

main.js

import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
import vant from 'vant';
import { Icon } from 'vant';
import 'vant/lib/index.css';
// 导入router配置文件
import router from "./router"
// 导入阿里图标
import './assets/font/iconfont.css'
// 导入vuex
import store from './store'
createApp(App).use(router).use(vant).use(Icon).use(store).mount('#app')

4.路由router的引入

4.1安装指令

npm install vue-router@4

4.2路由配置

router/index.js

//1. 导入vue-router相关函数
import { createRouter, createWebHashHistory } from "vue-router"
// 2.路由规则
const routes = [
 {
      path:"路由地址",
      name:"路由名称",
      component:组件名称
   }
]
// 3.路由对象实例化
const router = createRouter({
    history: createWebHashHistory(),
    routes
})
// 暴露导出
export default router

main.js

import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
import vant from 'vant';
import { Icon } from 'vant';
import 'vant/lib/index.css';
// 导入router配置文件
import router from "./router"
// 导入阿里图标
import './assets/font/iconfont.css'
// 导入vuex
import store from './store'
createApp(App).use(router).use(vant).use(Icon).use(store).mount('#app')

5.路径别名设置

vite.config.js 文件

import vue from '@vitejs/plugin-vue'
import { defineConfig } from 'vite'
import WindiCSS from 'vite-plugin-windicss'
// 1.导入node的path路径模块
import path from "path"
// https://vitejs.dev/config/
export default defineConfig({
  resolve: {
    alias: {
      // 配置别名
      "~": path.resolve(__dirname, "src")
   }
 }
})

6.json-server

6.1json-server安装

npm install json-server

6.2json-server启动项配置

在src的同级目录先创建文件夹mock，并创建mock/db.json文件,添加数据

{
    "infomation": [
        {
            "id": 1,
            "title": "json-server 的第1条数据",
            "desc": "奥特曼不想打小怪兽，明明可以做好朋友的",
            "author": "被奥特曼打了很久的怪兽"
        },
        {
            "id": 2,
            "title": "json-server 的第2条数据",
            "desc": "葫芦娃不想去救爷爷，一个一个的去送不好",
            "author": "种出七个葫芦的爷爷"
        },
        {
            "id": 1,
            "title": "json-server 的第一条数据",
            "desc": "王者荣耀其实不是很好玩，这并不是我内心的真话",
            "author": "想玩游戏的我"
        }
    ],
    "infomation2": [
        {
            "id": 11,
            "title": "json-server 的第11条数据",
            "desc": "奥特曼不想打小怪兽，明明可以做好朋友的",
            "author": "被奥特曼打了很久的怪兽"
        },
        {
            "id": 12,
            "title": "json-server 的第12条数据",
            "desc": "葫芦娃不想去救爷爷，一个一个的去送不好",
            "author": "种出七个葫芦的爷爷"
        },
        {
            "id": 12,
            "title": "json-server 的第13条数据",
            "desc": "王者荣耀其实不是很好玩，这并不是我内心的真话",
            "author": "想玩游戏的我"
        }
    ]
}

（举例数据）

6.3启动命令：npm run mock

7.axios请求数据

7.1安装axios依赖

npm install axios

7.2简单封装axios

在src文件在下创建utils文件夹，在utils里创建 http.js文件

//引入安装好的axios插件
import axios from "axios";
// 查询数据
const get = (url) => {
    return axios.get(url);
};
// 添加数据
const post = (url, data) => {
    return axios.post(url, data);
};
// 修改数据
const put = (url, data) => {
    return axios.put(url, data);
};

// 局部修改
const patch = (url, data) => {
    return axios.patch(url, data);
};

// 删除数据
const del = (url) => {
    return axios.delete(url);
};

//将二次封装好的axios导出
export { get, post, put, del, patch };

7.3项目使用axios

项目的端口为8080,然后json文件的端口为3000，这样就会涉及到跨域，解决跨域的方式很多种，此处讲解一下配置proxy代理在根目录下创建文件vue.config.js，覆盖webpack的一些内容。

vite.config.js

server: {
    proxy: {
      '/api': {
        target: 'http://localhost:3000',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, '')
      }
    }
  }

三、登录注册模块

1.登录页面

代码：

<template>
  <van-nav-bar
    title="登录"
    left-text="返回"
    left-arrow
    @click-left="onClickLeft"
  />
  <div class="login">
    <img :src="img" alt="" />
    <van-form @submit="onSubmit">
      <van-cell-group inset>
        <van-field
          v-model="username"
          left-icon="phone-o"
          name="username"
          placeholder="手机号码"
          :rules="[{ required: true, message: '请填写用户名' }]"
        />
        <van-field
          v-model="password"
          left-icon="manager-o"
          type="password"
          name="password"
          placeholder="密码"
          :rules="[{ required: true, message: '请填写密码' }]"
        />
      </van-cell-group>
      <div style="margin: 16px">
        <van-button round block type="primary" native-type="submit">
          提交
        </van-button>
      </div>
    </van-form>
  </div>
  <div class="find">
    <router-link to="/enroll"><span>注册新用户</span></router-link>
    <router-link to="/verify"><span>找回密码</span></router-link>
  </div>
  <div class="ways">
    <span>其他登录方式</span>
    <div>
      <span class="iconfont">&#xe882;</span>
      <span class="iconfont">&#xe600;</span>
      <span class="iconfont">&#xe65a;</span>
    </div>
  </div>
</template>
<!-- 逻辑层 -->
<script setup>
import { reactive, ref } from "