vue仿美团APP(上)

您所在的位置：网站首页 › 仿美团外卖系统 › vue仿美团APP(上)

vue仿美团APP(上)

2023-12-11 04:57| 来源: 网络整理| 查看: 265

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，安放进行测试主要按钮

请添加图片描述

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设置的颜色类名首页购物车订单我的 export default { name: 'FooterVue', } .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; } } }

在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中导出路由，在页面中成功渲染

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

//导出路由 export default { name: 'App', } 安装vuex cnpm i vuex@next -S 安装事件总线mitt cnpm i mitt -S

【本文地址】

公司简介

联系我们