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
Three ways to implement waterfall flow layout
Preface When I was browsing Xianyu today, I notic...
Make a nice flip login and registration interface based on html+css
Make a nice flip login and registration interface...
Detailed explanation of the basic use of react-navigation6.x routing library
Table of contents react-native project initializa...
Summary of the minesweeping project implemented in JS
This article shares the summary of the JS mineswe...
Detailed explanation of Nginx process scheduling problem
Nginx uses a fixed number of multi-process models...
Detailed steps to deploy SpringBoot projects using Docker in Idea
Preface Project requirements: Install the Docker ...
Complete steps for uninstalling MySQL database
The process of completely uninstalling the MySQL ...
Example of how to install nginx to a specified directory
Due to company requirements, two nginx servers in...
Vue implements online preview of PDF files (using pdf.js/iframe/embed)
Preface I am currently working on a high-quality ...
Web page HTML ordered list ol and unordered list ul
Lists for organizing data After learning so many ...
Several ways to use require/import keywords to import local images in v-for loop
Table of contents Problem Description Method 1 (b...
How to install Docker and configure Alibaba Cloud Image Accelerator
Docker Installation There is no need to talk abou...
Specific usage of textarea's disabled and readonly attributes
disabled definition and usage The disabled attrib...
JavaScript to achieve time range effect
This article shares the specific code for JavaScr...
Linux Domain Name Service DNS Configuration Method
What is DNS The full name of DNS is Domain Name S...