vue仿美团APP(上)

VUE3仿美团项目

项目预览

• 项目搭建和初始化配置

1.创建vue3项目

vue create vue_project(这里是项目文件名称)

2.详解Vue脚手架结构信息

node_modules

• 项目的安装依赖

public

• 放置静态资源文件

src

• 项目的主入口文件夹

.gitignore

• git版本管制的忽略的配置

babel.config.js

• ES6语法编译成ES5语法

package-lock.json

• 记录了当前项目所有模块的具体来源和版本号以及其他的信息

package.json

• 记录当前项目所依赖模块的版本信息

README.md

• 项目说明文件

3.项目准备工作，修改vue内置文件

4.在vue中使用rem适配

链接: 本文章单独讲解如何进行安装配置

5.在vue中引入less（css预处理器）

cnpm i less less-loader@7 -S
(@7）是版本号，不固定7的那个版本

6.关闭eslint校验

在vue,config.js中 设置 lintOnSave: false 关闭校验避免报错

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  // 解决eslint校验报错问题
  lintOnSave: false
})

7.使用Vant-ui组件进行开发APP

vant官网链接

cnpm i vant@next -S
(@next)为我们vue3安装指定版本

cnpm i babel-plugin-import -S
自动引入vant组件库里面的样式，我们不需要手动引入（图方便）

在main.js中引入vant进行使用

样式按需引入，在babel.config.js中添加

// babel.config.js（固定配置不需要记，只需在创建项目用一次就行）
plugins: [
  [
    'import',
    {
      libraryName: 'vant',
      libraryDirectory: 'es',
      style: true,
    },
    'vant',
  ],
],

vant组件引入，测试使用

在所需位置进行copy，安放进行测试
<van-button type="primary">主要按钮</van-button>

8.提交到gitee码云中，防止文件丢失

cd进入到项目目录中（进行以下操作）
git init

• 初始化本地仓库
  git add .
• 跟踪所有改动过的文件
  git commit -m ‘创建文件骨架，提交防止丢失’
• 提交所有更新过的文件
  git remote add origin 这里是gitee中的ssh地址
• 连接远程仓库
  git pull origin master --allow-unrelated-histories
• 将本地仓库push到远程仓库
  git push -f origin master
  覆盖远程仓库，初始化文件，也可以选择合并 (在gitee中刷新页面可以看到成功推上去了）
  git branch
• 查看位于的git分支（因为是自己的，所以不需要新建分支）

9.进行路由配置

路由有两种方式
第一种是 createWebHashHistory (Hash路由 #）
另一种是 createWebHistory 历史路由

其余pages中的路由组件均按照图下所示，更改content类名中的内容即可
规范的项目文件创建（让刚上手的小白也可在公司中摸鱼）

Footer.vue组件内容（如下）

// active-class="nav_color" 是链接获取到焦点时的样式，nav_color是css设置的颜色类名
<template>
  <div class="footer">
    <div class="item">
      <router-link to="/home" class="nav_item" active-class="nav_color">
        <van-icon name="wap-home-o" size="30" />
        首页
      </router-link>
    </div>
    <div class="item">
      <router-link to="/cart" class="nav_item" active-class="nav_color">
        <van-icon name="shopping-cart-o" size="30" />
        购物车
      </router-link>
    </div>
    <div class="item">
      <router-link to="/order" class="nav_item" active-class="nav_color">
        <van-icon name="balance-list-o" size="30" />
        订单
      </router-link>
    </div>
    <div class="item">
      <router-link to="/mine" class="nav_item" active-class="nav_color">
        <van-icon name="manager-o" size="30" />
        我的
      </router-link>
    </div>
  </div>
</template>
 
<script>
export default {
  name: 'FooterVue',
}
</script>
<style lang="less" scoped>
.footer {
  // 底部路由切换
  position: fixed;
  bottom: 0;
  width: 100%;
  padding-top: 5px;
  display: flex;
  font-size: 14px;
  background-color: #fff;
  border-top: 0.5px solid #eee;
  .item {
    flex: 1;
    display: flex;
    justify-content: center;
    .nav_color {
      // 点击触发样式
      color: #ffc400;
    }
    .nav_item {
      display: flex;
      flex-flow: column;
      align-items: center;
    }
  }
}
</style>

在man.js中引入路由和公共样式css

import { createApp } from 'vue'
import App from './App.vue'
// 引入rem字体切换（移动端必备)
import 'amfe-flexible'
// 引入vunt组件样式
import { Button, Icon } from 'vant'
// 引入路由
import router from '@/router/index'
// 引入公共css样式
import '@/common/css/base.css'

const app = createApp(App);
app.use(Button).use(Icon);
// 使用路由
app.use(router)
app.mount('#app')

最后在APP.vue中导出路由，在页面中成功渲染

路由配置第一张图就是完成的，路由效果

<template>
  //导出路由
  <router-view></router-view>
</template>
 
<script>
export default {
  name: 'App',
}
</script>
 
<style>
</style>

安装vuex

cnpm i vuex@next -S

安装事件总线mitt

cnpm i mitt -S