一文带你使用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就是来监听的

完整代码

首页

首页

头部搜索栏

主体

使用的是Vant组件的search组件
官网介绍

这一块都是对应的下面每个模块内容都是嵌套在里面的
tab

优选模块

轮播图

我们在data中定义了轮播图所需要的图片变量images 我们在这循环输出即可

轮播图的图片我是写死的，有需要可以自己去获取一下哦

十宫格

秒杀

获取一天的倒计时

然后在created函数中调用

商品

请求接口获取所以商品信息（也需要在created函数中调用哦）

其他模块都是类似的

完整代码：

项目打包看这个

其他页面有需要的可以联系我哦