[适合前端新手项目]超级可爱的宠物APP > <

基于网上找的UI设计图，实现简单的移动端静态页面；利用VUE框架进行管理；Mock实现模拟数据；添加了token登录和注册功能 本项目用到的技术栈： vue-cli + vue-router + vuex + axios + Mockjs + Swiper

为什么做这个项目

因为在自学前端，刚刚跟着尚硅谷的<vue前端硅谷外卖>课程学了一遍vue用法，但是无奈基于饿了么的APP页面实在是一点美感都没有， 于是自己上网扒了一个有趣且有设计感的图作为练手项目。如果你也和我一样对设计图有一定的要求，那可以试试这个项目。

UI设计图

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-NNNK9hfy-1605970018820)(/img/UI-MODEL.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-EKbFtYxr-1605970018821)(/img/Login.png)] [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ookohdJy-1605970018821)(/img/homepage.png)] [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-17MELAy0-1605970018821)(/img/pet.png)]

实现的效果

1.用flexible实现移动端自适应，以及字体在不用dpr下的大小 2.swiper实现轮播和滑动 3.登录/注册用户本地存储、并附加token验证，退出(localStarage本地存储) 4.导航守卫和拦截器确保用户登录状态下才能进入特定页面 5.Mockjs模拟数据，axios读取数据

项目结构

├── build/ # 项目打包配置文件 无需修改
  ├── node_modules/ #模块文件 无需修改
  ├── config/ #配置文件 vue-cli 初始化的配置 无需修改
  ├── dist/  #打包后的文件存放目录 无需修改
  ├── src/ #项目入口目录 无需修改
      ├── assets/   #前端资源目录 无需修改
      ├── components/   # vue组件目录/.vue文件存放目录 无需修改
      ├── router/  # vue路由管理目录 
          ├── index.js # 路由主文件
      ├── store/ # vuex状态管理目录
          ├── index.js # 状态管理入口主文件
      ├── App.vue # 项目根组件
      ├── main.js # 项目入口文件
      ├── mock # Mockjs入口文件
         ├── mock.js # 接口编辑文件
         ├── users.json # 数据json文件
      ├── pages # 路由页面入口文件
         ├── index  # vue文件
         ├── login # vue文件
         ├── pet # vue文件
  ├── static/ #静态文件存放目录 无需修改
  ├── test/ #测试目录 无需修改
  ├── package.json #包文件信息 无需修改
  ├── .babelrc
  ├── .editorconfig
  ├── .eslintignore
  ├── .eslintrc.js
  ├── .gitignore
  ├── .postcsssrc.js
  ├── index.html
  ├── README.md
  ├── vue-shop.apk

安装办法

git clone git@github.com:qiuChengleiy/shop-vue.git
cd shop-vue
npm i 或 cnpm i      
//安装项目依赖 建议使用淘宝镜像源 cnpm 安装 具体参考官网cnpm.taobao.org
npm run dev   
//运行项目服务  在浏览器：localhost:8080/   查看