您的位置：首页 > 编程学习 > > 正文

vue移动端项目用什么打包工具（浅谈使用Vue完成移动端apk项目）

更多时间：2021-11-04 19:26:05 类别：编程学习浏览量：1769

vue移动端项目用什么打包工具

浅谈使用Vue完成移动端apk项目

入口文件main.js

首先做一个引入

vue移动端项目用什么打包工具（浅谈使用Vue完成移动端apk项目）

我们的Vant UI组件是按需引入，而Element UI是全部引入
所以引用方式也不同

vue移动端项目用什么打包工具（浅谈使用Vue完成移动端apk项目）

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

vue移动端项目用什么打包工具（浅谈使用Vue完成移动端apk项目）

tabbar设置，我们引用的Vant组件中tabbar组件
van-tabbar官网属性介绍看这即可

vue移动端项目用什么打包工具（浅谈使用Vue完成移动端apk项目）

我们定义了一个数组Showlist，这是我们设置是否现在tabbar，如果name名和数组的内容可以匹配到就显示，否则不显示，watch就是来监听的

vue移动端项目用什么打包工具（浅谈使用Vue完成移动端apk项目）

完整代码

<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>

首页

vue移动端项目用什么打包工具（浅谈使用Vue完成移动端apk项目）

头部搜索栏

vue移动端项目用什么打包工具（浅谈使用Vue完成移动端apk项目）

主体

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

vue移动端项目用什么打包工具（浅谈使用Vue完成移动端apk项目）

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

优选模块

轮播图

vue移动端项目用什么打包工具（浅谈使用Vue完成移动端apk项目）

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

vue移动端项目用什么打包工具（浅谈使用Vue完成移动端apk项目）

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

十宫格

vue移动端项目用什么打包工具（浅谈使用Vue完成移动端apk项目）

秒杀

vue移动端项目用什么打包工具（浅谈使用Vue完成移动端apk项目）

获取一天的倒计时

vue移动端项目用什么打包工具（浅谈使用Vue完成移动端apk项目）

然后在created函数中调用

商品

vue移动端项目用什么打包工具（浅谈使用Vue完成移动端apk项目）

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

vue移动端项目用什么打包工具（浅谈使用Vue完成移动端apk项目）

其他模块都是类似的

完整代码：

<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 移动端 apk

上一篇：docker可以快速的创建和删除（Docker 命令自动补全的实现）

下一篇：怎么搭建apache服务器（Apache配置多个站点的方法）

您可能感兴趣

vue移动端项目用什么打包工具（浅谈使用Vue完成移动端apk项目）