A brief discussion on using Vue to complete the mobile apk project
|
Our project uses Vue and Vant components. For details, please visit the official website.
Directory structure:
Basic ConfigurationEntry file main.js First, make an introduction
Our Vant UI components are imported on demand, while Element UI is imported in its entirety, so the reference method is also different.
main.js full code
// Import Vue
import Vue from 'vue'
// Import the root component App.vue
import App from './App.vue'
// Import router import router from './router'
import store from './store'
// Import axios
import axios from 'axios'
// Import ElementUI
import ElementUI from 'element-ui'
// Import ElementUI css
import 'element-ui/lib/theme-chalk/index.css'
// Import Vant configuration js
import 'amfe-flexible/index.js'
// Import the required Vant components here 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'
// Import vuex
Vue.config.productionTip = false
// Here we reference the Vant component 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)
//Global reference to ElementUI component Vue.use(ElementUI)
// Set the axios mount point Vue.prototype.$http = axios
// Configure the base address of axios axios.defaults.baseURL = 'http://127.0.0.1:3000/api'
// Set the background address referenced in development mode and non-development mode 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 settings, the
We define an array Showlist, which is where we set whether the tabbar is now displayed. If the name and the content of the array can match, it will be displayed, otherwise it will not be displayed. Watch is used to monitor
Complete code
<template>
<div id="app">
<router-view />
<div class="after"></div>
<van-tabbar
v-model="active"
fixed
border
active-color="#bb54f6"
route
v-show="isShowNav"
>
<van-tabbar-item class="iconfont icon-rhome-fill" to="/home">
Home</van-tabbar-item>
<van-tabbar-item
class="iconfont icon-leimupinleifenleileibie2"
to="/category"
>
Category</van-tabbar-item>
<van-tabbar-item class="iconfont icon-u138" to="/find">
Discover</van-tabbar-item>
<van-tabbar-item class="iconfont icon-qicheqianlian-" to="/shopping">
Shopping cart</van-tabbar-item>
<van-tabbar-item class="iconfont icon-wodedangxuan" to="/myuser">
My</van-tabbar-item>
</van-tabbar>
</div>
</template>
<script>
export default {
data () {
return {
active: 0,
isShowNav: true,
Showlist: ['Home', 'Shopping', '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>
front page front page
Header search bar
main body
This block corresponds to each module below, and the content is nested inside it. Preferred modules Carousel
We defined the image variable images needed for the carousel in data and we can output it in a loop here.
The pictures of the carousel are written by me, you can get them yourself if you need them. Ten Grids
Flash Sale
Get the countdown for the day
Then call in the created function commodity
Request the interface to obtain all product information (also needs to be called in the create function)
Other modules are similar Full code:
<template>
<div class="home">
<div class="header">
<van-search
v-model="value"
show-action
shape="round"
background="#890bf2"
placeholder="Please enter the search keyword"
@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="Preferred" :width="500">
<!-- Carousel-->
<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>
<!-- Ten-grid section-->
<van-grid :column-num="5">
<van-grid-item v-for="value in gird" :key="value.id">
<div @click="xxx(value.name)">
<i :class="value.icon" style="font-size: 35px; color: red"> </i>
</div>
<b style="font-size: 16px">{{ value.name }}</b>
</van-grid-item>
</van-grid>
<!-- Flash sale part -->
<div class="supply">
<div class="seckill">
<van-count-down :time="time" style="font-size: 14px; color: red">
<template #default="timeData">
<span>Time until the flash sale ends:</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>
</div>
<div class="shop">
<ul>
<li
v-for="item in supplyShop"
:key="item.id"
@click="detailshop(item.id)"
>
<img :src="item.shop_img" alt="" />
</li>
</ul>
</div>
</div>
<!-- Products -->
<div 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>
</div>
</van-tab>
<van-tab title="Mobile">
<van-grid :column-num="4">
<van-grid-item
v-for="value in phoneimg"
:key="value.id"
icon="photo-o"
text="text"
>
<img :src="value.src" alt="" style="width: 50px; height: 30px" />
<span style="font-size: 12px">{{ value.title }}</span>
</van-grid-item>
</van-grid>
<div 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>
</div>
</van-tab>
<van-tab title="Sports">
<van-grid :column-num="5">
<van-grid-item
v-for="value in motionimg"
:key="value.id"
icon="photo-o"
text="text"
>
<img :src="value.src" alt="" style="width: 50px; height: 30px" />
<span style="font-size: 12px">{{ value.title }}</span>
</van-grid-item>
</van-grid>
<div 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>
</div>
</van-tab>
<van-tab title="Beauty">
<van-grid :column-num="5">
<van-grid-item
v-for="value in Makeupimg"
:key="value.id"
icon="photo-o"
text="text"
>
<img :src="value.src" alt="" style="width: 50px; height: 30px" />
<span style="font-size: 12px">{{ value.title }}</span>
</van-grid-item>
</van-grid>
<div 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>
</div>
</van-tab>
<van-tab title="Men's shoes">
<van-grid :column-num="5">
<van-grid-item
v-for="value in Menshopimg"
:key="value.id"
icon="photo-o"
text="text"
>
<img :src="value.src" alt="" style="width: 50px; height: 30px" />
<span style="font-size: 12px">{{ value.title }}</span>
</van-grid-item>
</van-grid>
<div 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>
</div>
</van-tab>
<van-tab title="Women's shoes">
<van-grid :column-num="5">
<van-grid-item
v-for="value in WoMenshopimg"
:key="value.id"
icon="photo-o"
text="text"
>
<img :src="value.src" alt="" style="width: 50px; height: 30px" />
<span style="font-size: 12px">{{ value.title }}</span>
</van-grid-item>
</van-grid>
<div 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>
</div>
</van-tab>
<van-tab title="Furniture and Home">
<van-grid :column-num="5">
<van-grid-item
v-for="value in FurnishingImg"
:key="value.id"
icon="photo-o"
text="text"
>
<img :src="value.src" alt="" style="width: 50px; height: 30px" />
<span style="font-size: 12px">{{ value.title }}</span>
</van-grid-item>
</van-grid>
<div 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>
</div>
</van-tab>
</van-tabs>
</div>
</div>
</template>
<script>
export default {
data () {
return {
value: '',
actives: 0,
time: '',
// Carousel images images: [
'http://m.360buyimg.com/mobilecms/s700x280_jfs/t1/165251/27/8980/194778/60409b0aE6d2ff3df/ca0c808809dbbfa8.jpg!q70.jpg.dpg',
'http://imgcps.jd.com/ling4/10027168852797/54mb5LuU6KOk5Zyw5pa554m56Imy/6ZKc5oOg55av5oqi/p-5c17126882acdd181dd53cf1/018cd345/cr_1125x445_0_171/s1125x690/q70.jpg',
'http://m.360buyimg.com/mobilecms/s700x280_jfs/t1/163716/23/16055/97374/6066f2cfEe720735f/3f4d05450bc1f7fc.jpg!q70.jpg.dpg'
],
// Grid: [
{ id: 1, icon: 'iconfont icon-shouji', name: 'Mobile phone' },
{ id: 2, icon: 'iconfont icon-bingxiang', name: 'Refrigerator' },
{ id: 3, icon: 'iconfont icon-xiyiji', name: 'Washing machine' },
{ id: 4, icon: 'iconfont icon-dianshi', name: 'TV' },
{ id: 5, icon: 'iconfont icon-youyanjiB', name: 'Rancho hood' },
{ id: 6, icon: 'iconfont icon-reshuiqi', name: 'Water heater' },
{ id: 7, icon: 'iconfont icon-jiaju', name: 'Home' },
{ id: 8, icon: 'iconfont icon-dianfanbao', name: 'Rice Cooker' },
{ id: 9, icon: 'iconfont icon-deng', name: 'Desk lamp' },
{ id: 10, icon: 'iconfont icon-chufangyongpin-ranqizao', name: 'Gas stove' }
],
// Flash sale products supplyShop: [],
// Other products otherShop: [],
// Mobile page phoneimg: [],
// Other mobile phone products otherPhone: [],
// Motion page motionimg: [],
// Other sports products othermotion: [],
// Makeup page Makeupimg: [],
// Other beauty products otherMakeup: [],
// Men's shoes page Menshopimg: [],
// Other men's shoes otherMenshop: [],
// Women's shoes pageWoMenshopimg: [],
// Other women's shoes otherWoMenshop: [],
// Home page FurnishingImg: [],
// Other home products otherFurnishing: []
}
},
created () {
this.CountDown()
this.loadershop()
},
methods: {
// Search for products search (value) {
this.$router.push({ name: 'SchCont', params: { value } })
},
// Countdown () {
var myDate = new Date()
var hour = 24 - myDate.getHours()
this.time = hour * 60 * 60 * 1000
},
// Get product information async loadershop () {
// Get all products and assign them to the preferred page module const Allshop = await this.$http.get('list?id=100')
this.otherShop = Allshop.data.data
// Get the mobile phone product and assign it to the mobile page module const phone = await this.$http.get('details?id=2')
this.otherPhone = phone.data.data
// Get sports products and assign them to the sports page module const play = await this.$http.get('details?id=3')
this.othermotion = play.data.data
// Get beauty products and assign them to the beauty page module const Makeup = await this.$http.get('details?id=4')
this.otherMakeup = Makeup.data.data
// Get men's shoes and assign them to the men's shoes page module const Menshop = await this.$http.get('details?id=5')
this.otherMenshop = Menshop.data.data
// Get women's shoes and assign them to the women's shoes page module const WoMenshop = await this.$http.get('details?id=6')
this.otherWoMenshop = WoMenshop.data.data
// Get home furniture products and assign them to the home furniture page module const Furnishing = await this.$http.get('details?id=7')
this.otherFurnishing = Furnishing.data.data
// Get the flash sale products and assign them to the flash sale module const miaosha = await this.$http.get('list_m')
this.supplyShop = miaosha.data.data
},
// Switch to detail page detailshop (id) {
this.$router.push({ name: 'Details', params: { id: id, urls: '/home' } })
},
// Jump to the preferred grid details xxx (id) {
this.$router.push({ name: 'SchCont', params: { value: id } })
}
}
}
</script>
<style lang="less" scoped>
.home {
width: 100%;
height: 100%;
.header {
.van-tabs {
margin-top: -5px;
}
}
}
.van-tabbar {
.van-tabbar-item {
display: flex;
flex-direction: column;
}
}
//Slideshow.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);
}
// Ten grids.van-grid {
margin-top: 10px;
box-shadow: 0px 1px 3px 3px rgba(34, 25, 25, 0.2);
}
//Second sale.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;
}
}
}
}
}
// Other products.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; //Exceeding text is hidden white-space: nowrap; //Overflow does not wrap text-overflow: ellipsis; //Overflow is displayed with ellipsis}
img {
width: 150px;
}
}
}
}
//Other mobile phone products.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; //Exceeding text is hidden white-space: nowrap; //Overflow does not wrap text-overflow: ellipsis; //Overflow is displayed with ellipsis text-indent: 2em;
}
img {
width: 150px;
}
}
}
}
//Other sports products.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; //Exceeding text is hidden white-space: nowrap; //Overflow does not wrap text-overflow: ellipsis; //Overflow is displayed with ellipsis text-indent: 2em;
}
img {
width: 150px;
}
}
}
}
//Other beauty products.otherMakeup {
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; //Exceeding text is hidden white-space: nowrap; //Overflow does not wrap text-overflow: ellipsis; //Overflow is displayed with ellipsis text-indent: 2em;
}
img {
width: 150px;
}
}
}
}
//Other men's shoes.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; //Exceeding text is hidden white-space: nowrap; //Overflow does not wrap text-overflow: ellipsis; //Overflow is displayed with ellipsis text-indent: 2em;
}
img {
width: 150px;
}
}
}
}
//Other women's shoes.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; //Exceeding text is hidden white-space: nowrap; //Overflow does not wrap text-overflow: ellipsis; //Overflow is displayed with ellipsis text-indent: 2em;
}
img {
width: 150px;
}
}
}
}
// Other home products.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; //Exceeding text is hidden white-space: nowrap; //Overflow does not wrap text-overflow: ellipsis; //Overflow is displayed with ellipsis text-indent: 2em;
}
img {
width: 150px;
}
}
}
}
</style>
Project packaging see this This is the end of this article about using Vue to complete mobile apk projects. For more relevant content about using Vue to complete mobile apk projects, please search for previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future! You may also be interested in:
|
<<: Does the % in the newly created MySQL user include localhost?
>>: VMware 15.5 version of the graphic tutorial to build a yum warehouse by mounting the system CD
Recommend
Linux file system operation implementation
This reading note mainly records the operations r...
A simple method to be compatible with IE6's min-width and min-height
If a website is widescreen, you drag the browser ...
Javascript basics about built-in objects
Table of contents 1. Introduction to built-in obj...
Several principles for website product design reference
The following analysis is about product design pr...
How to implement function currying and decurrying in Javascript
Function currying (black question mark face)? ? ?...
Automatically log out inactive users after login timeout in Linux
Method 1: Modify the .bashrc or .bash_profile fil...
Detailed explanation of prototypes and prototype chains in JavaScript
Table of contents Prototype chain diagram Essenti...
A brief discussion on the construction and operation mechanism of the real-time computing framework Flink cluster
Table of contents 1. Flink Overview 1.1 Basic Int...
The principle and application of ES6 deconstruction assignment
Table of contents Array destructuring assignment ...
Detailed explanation of dragging table columns using Vue Element Sortablejs
1. css: dragTable.css @charset "UTF-8";...
Linux hardware configuration command example
Hardware View Commands system # uname -a # View k...
How familiar are you with pure HTML tags?
The following HTML tags basically include all exis...
Detailed explanation and examples of database account password encryption
Detailed explanation and examples of database acc...
HTML web page creation tutorial Use iframe tags carefully
Using iframes can easily call pages from other we...
How to display TIF format images in browser
The browser displays TIF format images Copy code T...