H5ele项目介绍与初始化

107 阅读1分钟

项目介绍

一个简单仿饿了么的项目,主要功能点包括:

  1. 轮播图。
  2. 滚动加载。
  3. 图片懒加载。
  4. 购物车。
  5. 滚动组件。
  6. 动画效果。
  7. Token登录。 image.png

项目创建

可以试试用这个命令去创建项目,该命令可以使我们不用安装vue-cli就可以创建项目。:

npm init vue

安装Vant和使用

npm i vant

在main.ts里面导入样式

import 'vant/lib/index.css';

在组件里面进行使用:

<template>
  <div class='app'>
    <Button type="primary">主要按钮</Button>
  </div>
</template>

<script setup lang='ts'>
import { Button } from 'vant';
</script>

json-server搭建mock数据

image.png 首先创建一个文件夹,然后初始化文件,最后安装json-server包。

mkdir serve 
npm init
npm i json-server -S