这几天，我做了一个vue移动端的小项目，本文主要介绍了Vue移动端apk项目，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
我们项目使用的是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就是来监听的
完整代码
<div id="app"> <div class="after"></div> 首页 分类 发现 购物车 我的 </div> #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%; }
首页
首页
头部搜索栏
主体
使用的是Vant组件的search组件
官网介绍
这一块都是对应的下面每个模块内容都是嵌套在里面的
tab
优选模块
轮播图
我们在data中定义了轮播图所需要的图片变量images 我们在这循环输出即可
轮播图的图片我是写死的，有需要可以自己去获取一下哦
十宫格
秒杀
获取一天的倒计时
然后在created函数中调用
商品
请求接口获取所以商品信息（也需要在created函数中调用哦）
其他模块都是类似的
完整代码：
<div class="home"> <div class="header"> <i class="iconfont icon-xiaoxi" style="font-size: 30px;color: white"></i> <!-- 轮播图 --> <!-- 十宫格部分 --> <div> <i style="font-size: 35px;color: red"> </i></div><b style="font-size: 16px">{{ value.name }}</b><!-- 秒杀部分 --><div class="supply"> <div class="seckill"> <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></div><div class="shop"> <ul> <li> </li></ul></div></div><!-- 商品 --><div class="otherShop"> <ul> <li> <p> {{ item.shop_title }} </p></li></ul></div> <span style="font-size: 12px">{{ value.title }}</span><div class="otherPhone"> <ul> <li> <p> {{ item.shop_title }} </p></li></ul></div> <span style="font-size: 12px">{{ value.title }}</span><div class="othermotion"> <ul> <li> <p> {{ item.shop_title }} </p></li></ul></div> <span style="font-size: 12px">{{ value.title }}</span><div class="otherMakeup"> <ul> <li> <p> {{ item.shop_title }} </p></li></ul></div> <span style="font-size: 12px">{{ value.title }}</span><div class="otherMenshop"> <ul> <li> <p> {{ item.shop_title }} </p></li></ul></div> <span style="font-size: 12px">{{ value.title }}</span><div class="otherWoMenshop"> <ul> <li> <p> {{ item.shop_title }} </p></li></ul></div> <span style="font-size: 12px">{{ value.title }}</span><div class="otherFurnishing"> <ul> <li> <p> {{ item.shop_title }} </p></li></ul></div></div></div> .home { width: 100%; height: 100%; .header { .van-tabs { margin-top: -5px; } } } .van-tabbar { .van-tabbar-item { display: flex; flex-direction: column; } } // 轮播图 .my-swipe1 { width: 300px; height: 150px; margin-left: 35px; margin-top: 20px; img { width: 300px; height: 150px; } box-shadow: 0px 1px 3px 3px rgba(34, 25, 25, 0.2); } // 十宫格 .van-grid { margin-top: 10px; box-shadow: 0px 1px 3px 3px rgba(34, 25, 25, 0.2); } // 秒杀 .supply { width: 100%; height: 120px; margin-top: 10px; box-shadow: 0px 1px 3px 3px rgba(34, 25, 25, 0.2); .shop { ul { list-style: none; li { float: left; margin-left: 13px; img { margin-top: 10px; width: 80px; } } } } } // 其他商品 .otherShop { margin-top: 20px; ul { display: flex; justify-content: space-around; align-items: center; flex-wrap: wrap; padding-bottom: 40px; li { width: 170px; height: 220px; font-size: 14px; p { width: 170px; overflow: hidden; //超出的文本隐藏 white-space: nowrap; //溢出不换行 text-overflow: ellipsis; //溢出用省略号显示 } img { width: 150px; } } } } //其他手机商品 .otherPhone { margin-top: 20px; ul { display: flex; justify-content: space-around; align-items: center; flex-wrap: wrap; padding-bottom: 40px; li { width: 170px; height: 220px; font-size: 14px; p { width: 170px; overflow: hidden; //超出的文本隐藏 white-space: nowrap; //溢出不换行 text-overflow: ellipsis; //溢出用省略号显示 text-indent: 2em; } img { width: 150px; } } } } //其他运动商品 .othermotion { margin-top: 20px; ul { display: flex; justify-content: space-around; align-items: center; flex-wrap: wrap; padding-bottom: 40px; li { width: 170px; height: 220px; font-size: 14px; p { width: 170px; overflow: hidden; //超出的文本隐藏 white-space: nowrap; //溢出不换行 text-overflow: ellipsis; //溢出用省略号显示 text-indent: 2em; } img { width: 150px; } } } } //其他美妆商品 .otherMakeup {<span>本文来源gaodai#ma#com搞*代#码9网#</span> margin-top: 20px; ul { display: flex; justify-content: space-around; align-items: center; flex-wrap: wrap; padding-bottom: 40px; li { width: 170px; height: 220px; font-size: 14px; p { width: 170px; overflow: hidden; //超出的文本隐藏 white-space: nowrap; //溢出不换行 text-overflow: ellipsis; //溢出用省略号显示 text-indent: 2em; } img { width: 150px; } } } } //其他男鞋商品 .otherMenshop { margin-top: 20px; ul { display: flex; justify-content: space-around; align-items: center; flex-wrap: wrap; padding-bottom: 40px; li { width: 170px; height: 220px; font-size: 14px; p { width: 170px; overflow: hidden; //超出的文本隐藏 white-space: nowrap; //溢出不换行 text-overflow: ellipsis; //溢出用省略号显示 text-indent: 2em; } img { width: 150px; } } } } //其他女鞋商品 .otherWoMenshop { margin-top: 20px; ul { display: flex; justify-content: space-around; align-items: center; flex-wrap: wrap; padding-bottom: 40px; li { width: 170px; height: 220px; font-size: 14px; p { width: 170px; overflow: hidden; //超出的文本隐藏 white-space: nowrap; //溢出不换行 text-overflow: ellipsis; //溢出用省略号显示 text-indent: 2em; } img { width: 150px; } } } } // 其他家居商品 .otherFurnishing { margin-top: 20px; ul { display: flex; justify-content: space-around; align-items: center; flex-wrap: wrap; padding-bottom: 40px; li { width: 170px; height: 220px; font-size: 14px; p { width: 170px; overflow: hidden; //超出的文本隐藏 white-space: nowrap; //溢出不换行 text-overflow: ellipsis; //溢出用省略号显示 text-indent: 2em; } img { width: 150px; } } } }
项目打包看这个
到此这篇关于浅谈使用Vue完成移动端apk项目的文章就介绍到这了,更多相关Vue完成移动端apk项目内容请搜索gaodaima搞代码网以前的文章或继续浏览下面的相关文章希望大家以后多多支持gaodaima搞代码网！
以上就是浅谈使用Vue完成移动端apk项目的详细内容，更多请关注gaodaima搞代码网其它相关文章！
搞代码网（gaodaima.com）提供的所有资源部分来自互联网，如果有侵犯您的版权或其他权益，请说明详细缘由并提供版权或权益证明然后发送到邮箱[email protected]，我们会在看到邮件的第一时间内为您处理，或直接联系QQ：872152909。本网站采用BY-NC-SA协议进行授权
转载请注明原文链接：浅谈使用Vue完成移动端apk项目
转载请注明原文链接：浅谈使用Vue完成移动端apk项目
