vue移动端项目用什么打包工具(浅谈使用Vue完成移动端apk项目)
类别:编程学习 浏览量:1769
时间:2021-11-04 19:26:05 vue移动端项目用什么打包工具
浅谈使用Vue完成移动端apk项目目录
- 基本配置
- 入口文件main.js
- App.vue
- 首页
- 头部搜索栏
- 主体
我们项目使用的是Vue和Vant组件,详情都可以看官网哦
- Vant
- Vue
- 完整项目视频链接
目录结构:
入口文件main.js
首先做一个引入
我们的Vant UI组件是按需引入,而Element UI是全部引入
所以引用方式也不同
main.js完整代码
// 引入Vue import Vue from 'vue' // 引入根组件App.vue import App from './App.vue' // 引入router路由 import router from './router' import store from './store' // 引入axios import axios from 'axios' // 引入ElementUI import ElementUI from 'element-ui' // 引入ElementUI css import 'element-ui/lib/theme-chalk/index.css' // 引入Vant配置js import 'amfe-flexible/index.js' // 这里引入需要的Vant组件 import { Rate, Popup, Form, Field, GoodsActionButton, GoodsActionIcon, GoodsAction, Sidebar, SidebarItem, Image as VanImage, Skeleton, SwipeCell, Col, Row, CountDown, Lazyload, SwipeItem, Swipe, Sku, AddressList, Area, AddressEdit, NavBar, SubmitBar, CheckboxGroup, Checkbox, Card, Image, GridItem, Grid, Cell, Switch, Button, Search, Tab, Tabs, Tabbar, TabbarItem, Icon, DropdownMenu, DropdownItem, Toast, CellGroup, Overlay, PasswordInput, NumberKeyboard, Loading, ShareSheet, Dialog, ImagePreview, Uploader } from 'vant' // 引入vuex Vue.config.productionTip = false // 这里引用Vant组件 Vue.use(Search) .use(Rate) .use(Popup) .use(ImagePreview) .use(Uploader) .use(Dialog) .use(ShareSheet) .use(Loading) .use(Overlay) .use(PasswordInput) .use(NumberKeyboard) .use(Form) .use(CellGroup) .use(Toast) .use(Field) .use(GoodsActionButton) .use(GoodsActionIcon) .use(GoodsAction) .use(Sidebar) .use(SidebarItem) .use(VanImage) .use(Skeleton) .use(SwipeCell) .use(Col) .use(Row) .use(CountDown) .use(Lazyload) .use(SwipeItem) .use(Swipe) .use(Sku) .use(AddressList) .use(Area) .use(AddressEdit) .use(NavBar) .use(SubmitBar) .use(CheckboxGroup) .use(Checkbox) .use(Card) .use(Image) .use(GridItem) .use(Cell) .use(Grid) .use(Switch) .use(Button) .use(DropdownItem) .use(DropdownMenu) .use(Icon) .use(Tab) .use(Tabs) .use(Tabbar) .use(TabbarItem) // 全局引用ElementUI组件 Vue.use(ElementUI) // 设置axios挂载点 Vue.prototype.$http = axios // 配置axios的基准地址 axios.defaults.baseURL = 'http://127.0.0.1:3000/api' // 设置开发模式和非开发模式引用后台地址 axios.defaults.baseURL = process.env.NODE_ENV === 'development' ? 'http://127.0.0.1:3000/api' : '/api' new Vue({ store, router, render: h => h(App) }).$mount('#app')
App.vue
tabbar设置,我们引用的Vant组件中tabbar
组件
van-tabbar官网属性介绍看这即可
我们定义了一个数组Showlist,这是我们设置是否现在tabbar,如果name名和数组的内容可以匹配到就显示,否则不显示,watch就是来监听的
完整代码
<template> <li id="app"> <router-view /> <li class="after"></li> <van-tabbar v-model="active" fixed border active-color="#bb54f6" route v-show="isShowNav" > <van-tabbar-item class="iconfont icon-rhome-fill" to="/home"> 首页 </van-tabbar-item> <van-tabbar-item class="iconfont icon-leimupinleifenleileibie2" to="/category" > 分类 </van-tabbar-item> <van-tabbar-item class="iconfont icon-u138" to="/find"> 发现 </van-tabbar-item> <van-tabbar-item class="iconfont icon-qicheqianlian-" to="/shopping"> 购物车 </van-tabbar-item> <van-tabbar-item class="iconfont icon-wodedangxuan" to="/myuser"> 我的 </van-tabbar-item> </van-tabbar> </li> </template> <script> export default { data () { return { active: 0, isShowNav: true, Showlist: ['Home', 'Shoping', 'Find', 'Category', 'MyUser'] } }, watch: { $route (to, from) { if (this.Showlist.includes(to.name)) { this.isShowNav = true } else if (to.name === '') { this.isShowNav = false } else { this.isShowNav = false } } } } </script> <style> #app { width: 100%; height: 100%; font-family: Avenir, Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; color: #2c3e50; } html, body { width: 100%; height: 100%; } </style>
首页
头部搜索栏
主体
使用的是Vant组件的search
组件
官网介绍
这一块都是对应的下面每个模块内容都是嵌套在里面的
tab
优选模块
轮播图
我们在data中定义了轮播图所需要的图片变量images 我们在这循环输出即可
轮播图的图片我是写死的,有需要可以自己去获取一下哦
十宫格
秒杀
获取一天的倒计时
然后在created函数中调用
商品
请求接口获取所以商品信息(也需要在created函数中调用哦)
其他模块都是类似的
完整代码:
<template> <li class="home"> <li class="header"> <van-search v-model="value" show-action shape="round" background="#890bf2" placeholder="请输入搜索关键词" @search="search" > <template #action> <i class="iconfont icon-xiaoxi" style="font-size: 30px; color: white" ></i> </template> </van-search> <van-tabs v-model="actives" background="#890bf2" title-inactive-color="white" title-active-color="white" color="#fff" > <van-tab title="优选" :width="500"> <!-- 轮播图 --> <van-swipe :autoplay="3000" class="my-swipe1"> <van-swipe-item v-for="(image, index) in images" :key="index"> <img v-lazy="image" /> </van-swipe-item> </van-swipe> <!-- 十宫格部分 --> <van-grid :column-num="5"> <van-grid-item v-for="value in gird" :key="value.id"> <li @click="xxx(value.name)"> <i :class="value.icon" style="font-size: 35px; color: red"> </i> </li> <b style="font-size: 16px">{{ value.name }}</b> </van-grid-item> </van-grid> <!-- 秒杀部分 --> <li class="supply"> <li class="seckill"> <van-count-down :time="time" style="font-size: 14px; color: red"> <template #default="timeData"> <span>距离秒杀结束时间:</span> <span class="block">{{ timeData.hours }}</span> <span class="colon">:</span> <span class="block">{{ timeData.minutes }}</span> <span class="colon">:</span> <span class="block">{{ timeData.seconds }}</span> </template> </van-count-down> </li> <li class="shop"> <ul> <li v-for="item in supplyShop" :key="item.id" @click="detailshop(item.id)" > <img :src="item.shop_img" alt="" /> </li> </ul> </li> </li> <!-- 商品 --> <li class="otherShop"> <ul> <li v-for="item in otherShop" :key="item.id" @click="detailshop(item.id)" > <a href="JavaScript:;"><img :src="item.shop_img" alt="" /></a> <a href="JavaScript:;" style="color: #000" ><p> {{ item.shop_title }} </p></a > </li> </ul> </li> </van-tab> <van-tab title="手机"> <van-grid :column-num="4"> <van-grid-item v-for="value in phoneimg" :key="value.id" icon="photo-o" text="文字" > <img :src="value.src" alt="" style="width: 50px; height: 30px" /> <span style="font-size: 12px">{{ value.title }}</span> </van-grid-item> </van-grid> <li class="otherPhone"> <ul> <li v-for="item in otherPhone" :key="item.id" @click="detailshop(item.id)" > <img :src="item.shop_img" alt="" /> <p> {{ item.shop_title }} </p> </li> </ul> </li> </van-tab> <van-tab title="运动"> <van-grid :column-num="5"> <van-grid-item v-for="value in motionimg" :key="value.id" icon="photo-o" text="文字" > <img :src="value.src" alt="" style="width: 50px; height: 30px" /> <span style="font-size: 12px">{{ value.title }}</span> </van-grid-item> </van-grid> <li class="othermotion"> <ul> <li v-for="item in othermotion" :key="item.id" @click="detailshop(item.id)" > <img :src="item.shop_img" alt="" /> <p> {{ item.shop_title }} </p> </li> </ul> </li> </van-tab> <van-tab title="美妆"> <van-grid :column-num="5"> <van-grid-item v-for="value in Makeupimg" :key="value.id" icon="photo-o" text="文字" > <img :src="value.src" alt="" style="width: 50px; height: 30px" /> <span style="font-size: 12px">{{ value.title }}</span> </van-grid-item> </van-grid> <li class="otherMakeup"> <ul> <li @click="detailshop(item.id)" v-for="item in otherMakeup" :key="item.id" > <img :src="item.shop_img" alt="" /> <p> {{ item.shop_title }} </p> </li> </ul> </li> </van-tab> <van-tab title="男鞋"> <van-grid :column-num="5"> <van-grid-item v-for="value in Menshopimg" :key="value.id" icon="photo-o" text="文字" > <img :src="value.src" alt="" style="width: 50px; height: 30px" /> <span style="font-size: 12px">{{ value.title }}</span> </van-grid-item> </van-grid> <li class="otherMenshop"> <ul> <li @click="detailshop(item.id)" v-for="item in otherMenshop" :key="item.id" > <img :src="item.shop_img" alt="" /> <p> {{ item.shop_title }} </p> </li> </ul> </li> </van-tab> <van-tab title="女鞋"> <van-grid :column-num="5"> <van-grid-item v-for="value in WoMenshopimg" :key="value.id" icon="photo-o" text="文字" > <img :src="value.src" alt="" style="width: 50px; height: 30px" /> <span style="font-size: 12px">{{ value.title }}</span> </van-grid-item> </van-grid> <li class="otherWoMenshop"> <ul> <li v-for="item in otherWoMenshop" :key="item.id" @click="detailshop(item.id)" > <img :src="item.shop_img" alt="" /> <p> {{ item.shop_title }} </p> </li> </ul> </li> </van-tab> <van-tab title="家具家居"> <van-grid :column-num="5"> <van-grid-item v-for="value in FurnishingImg" :key="value.id" icon="photo-o" text="文字" > <img :src="value.src" alt="" style="width: 50px; height: 30px" /> <span style="font-size: 12px">{{ value.title }}</span> </van-grid-item> </van-grid> <li class="otherFurnishing"> <ul> <li v-for="item in otherFurnishing" :key="item.id" @click="detailshop(item.id)" > <img :src="item.shop_img" alt="" /> <p> {{ item.shop_title }} </p> </li> </ul> </li> </van-tab> </van-tabs> </li> </li> </template> <script> export default { data () { return { value: '', actives: 0, time: '', // 轮播图图片 images: [ 'http://m.360buyimg.com/mobilecms/s700x280_jfs/t1/165251/27/8980/194778/60409b0aE6d2ff3df/ca0c808809dbbfa8.jpg" alt="vue移动端项目用什么打包工具(浅谈使用Vue完成移动端apk项目)" border="0" />
项目打包看这个
到此这篇关于浅谈使用Vue完成移动端apk项目的文章就介绍到这了,更多相关Vue完成移动端apk项目内容请搜索开心学习网以前的文章或继续浏览下面的相关文章希望大家以后多多支持开心学习网!
您可能感兴趣
- 小白vue教学(尤大大新活petite-vue的实现)
- vue子视图里再加routerview(vue router-view的嵌套显示实现)
- vue按需引入elementui组件(vue ElementUI实现异步加载树)
- vue pdf预览插件(Vue-pdf实现在线预览PDF文件)
- vue element 权限管理(Vue Element前端应用开发之功能点管理及权限控制)
- vue中怎么触发复选框的点击事件(vue点击弹窗自动触发点击事件的解决办法模拟场景)
- vue移动端页面不能上下滑动(vue移动端实现左滑编辑与删除的全过程)
- vue移动端项目用什么打包工具(浅谈使用Vue完成移动端apk项目)
- vue组件开发步骤(解析如何自动化生成vue组件文档)
- vue通过什么获取dom(vue异步更新dom的实现浅析)
- springboot如何解析vue登录参数(SpringBoot + Vue 项目部署上线到Linux 服务器的教程详解)
- vue 中后台管理系统(Vue实现学生管理功能)
- vue怎么实现预览与放大(Vue实现牌面翻转效果)
- vue前端打包发布教程(Vue项目打包、合并及压缩优化网页响应速度)
- vue 实现吸顶效果(vue实现水波涟漪效果的点击反馈指令)
- vue3中的setup的参数(Vue3中ref与reactive的详解与扩展)
- 韩国泡菜做法(韩国泡菜的做法步骤)
- 泰国旅游攻略(泰国旅游攻略必去景点)
- 越难春卷(越难春卷皮怎么用)
- 休闲VS新古典 办公家居简约设计(办公家居简约设计)
- 15个新成 园 位置公布 深圳龙岗2022年共建花园建设又有大动作(15个新成园位置公布)
- 记者手记 书记带我去 巡街(记者手记书记带我去)
热门推荐
- python 文本分析 摘要(用Python逐行分析文件方法)
- 安装apache服务失败怎么办(Apache安装后出现服务无法启动服务里启动出现错误代码1)
- php中row函数(PHP中number_format函数的用法讲解)
- WCF NetTcpBinding 绑定
- sqlserver常用基本数据类型有哪些(浅述SQL Server的语句类别 数据库范式 系统数据库组成)
- dedecms标签怎么调用(dedecms网站栏目增加缩略图的方法)
- react和antd管理系统(手把手教你从零开始react+antd搭建项目)
- docker 环境下udp双向通信怎么办(解决Docker network Create加--subnet后遇到问题)
- ASP.NET List 集合操作
- dedecms栏目页更改(dedecms系统列表页调用tag标签同时带上链接)