基于vue的移动开发app,将vue项目打包成apk

　　这几天，我做了一个某视频剪辑软件移动端的小项目，本文主要介绍了某视频剪辑软件移动端应用项目，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

目录

　　 基本配置入口文件main.jsApp.vue首页头部搜索栏主体我们项目使用的是某视频剪辑软件和栈组件，详情都可以看官网哦

　　栈

　　某视频剪辑软件

　　完整项目视频链接

　　目录结构：

基本配置

入口文件main.js

　　首先做一个引入

　　我们的Vant UI组件是按需引入，而元素用户界面是全部引入

　　所以引用方式也不同

　　主页。射流研究…完整代码

　　//引入某视频剪辑软件

　　从“vue”导入某视频剪辑软件

　　//引入根组件App.vue

　　从导入应用程序 App.vue

　　//引入路由器路由

　　从导入路由器。/路由器

　　从导入存储。/商店

　　//引入爱可信

　　从" axios "导入爱可信

　　//引入ElementUI

　　从"元素-用户界面"导入ElementUI

　　//引入ElementUI css

　　导入元素-ui/lib/主题-粉笔/索引。 CSS

　　//引入栈配置射流研究…

　　导入 amfe-flexible/index.js

　　//这里引入需要的栈组件

　　导入{

　　比率，弹出窗口，表单，字段，商品操作按钮，商品操作图标，商品操作，侧栏，

　　SidebarItem，Image as VanImage，Skeleton，SwipeCell，Col，Row，

　　倒计时，Lazyload，SwipeItem，Swipe，Sku，地址列表，区域，

　　AddressEdit，NavBar，SubmitBar，CheckboxGroup，Checkbox，Card，

　　图像、GridItem、网格、单元格、开关、按钮、搜索、选项卡、标签、

　　Tabbar，TabbarItem，图标，下拉菜单，下拉项，吐司，单元格组，

　　覆盖，密码输入，数字键盘，加载，共享表，对话框，图像预览，上传

　　}来自"万特"

　　//引入状态管理

　　Vue.config.productionTip=false

　　//这里引用栈组件

　　Vue.use(搜索)。使用（比率)。使用（弹出)。使用（图像预览)。使用（上传者)。使用（对话框)。使用（共享工作表)。使用（装载)。使用（覆盖)。使用（密码输入)。使用（数字键盘)。使用（形式)。使用（单元组)。使用（吐司)。使用（字段)。使用(GoodsActionButton)。使用(GoodsActionIcon)。使用（商品行动)。使用（侧栏)。使用(SidebarItem)。使用（虚拟图像)。使用（骨骼)。使用(瑞士细胞)。使用（列)。使用（行)。使用（倒计时)。使用(Lazyload)。使用(瑞士项目)。使用（滑动)。使用(Sku)。使用（地址列表)。用途（面积)。使用（地址编辑)。使用（导航条)。使用（提交栏)。使用（复选框组)。使用（复选框)。使用（卡)。使用（图片)。使用(GridItem)。使用（单元格)。使用（网格)。使用（开关)。使用（按钮)。使用(下拉项目)。使用（下拉菜单)。使用（图标)。使用(选项卡)。使用（标签)。使用(Tabbar)。使用(TabbarItem)

　　//全局引用ElementUI组件

　　Vue.use(ElementUI)

　　//设置爱可信挂载点

　　Vue.prototype.$http=axios

　　//配置爱可信的基准地址

　　axios。默认值。baseurl= http://127。0 .0 . 1:3000/API

　　//设置开发模式和非开发模式引用后台地址

　　axios。默认值。基本URL=进程。环境。node _ ENV===开发？http://127.0.0.1:3000/api : /api

　　新Vue({

　　店，

　　路由器，

　　render: h=h(App)

　　}).$ mount("# app ")

App.vue

　　标签栏设置，我们引用的栈组件中标签栏组件

　　范-塔巴尔官网属性介绍看这即可

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

　　完整代码

　　模板

　　div id=应用程序

　　路由器-视图/

　　div class=after/div

　　范-塔巴尔

　　v-model=active

　　固定的；不变的

　　边界

　　active-color=#bb54f6

　　途径

　　v-show=isShowNav

　　van-tabbar-item class= icon font icon-rhome-fill to=/home

　　首页

　　/van-tabbar-item

　　van-tabbar-item

　　class= icon font icon-leimupinleifenleibie 2

　　to=/category

　　分类

　　/van-tabbar-item

　　van-tabbar-item class= icon font icon-u138 to=/find

　　发现

　　/van-tabbar-item

　　 van-tabbar-item class= icon font icon-qiche qianlian- to=/shopping

　　购物车

　　/van-tabbar-item

　　{{ item.shop_title }}

　　/p/a

　　/李

　　/ul

　　/div

　　/van-tab

　　van-tab title=手机

　　van-grid :column-num=4

　　货车-网格-项目

　　v-for=电话中的值

　　:key=value.id

　　icon=photo-o

　　text=文字

　　img:src= value。src alt= style= width:50px；高度：30px /

　　span style= font-size:12px { value。title } }/span

　　/凡-网格-项目

　　/货车-网格

　　div class=其他电话

　　保险商实验所

　　里

　　v-for=其他手机中的项目

　　:key=item.id

　　@click=detailshop(item.id)

　　img :src=item.shop_img alt= /

　　p

　　{{ item.shop_title }}

　　/p

　　/李

　　/ul

　　/div

　　/van-tab

　　van-tab title=运动

　　van-grid :column-num=5

　　货车-网格-项目

　　v-for=运动中的值

　　:key=value.id

　　icon=photo-o

　　text=文字

　　img:src= value。src alt= style= width:50px；高度：30px /

　　span style= font-size:12px { value。title } }/span

　　/凡-网格-项目

　　/货车-网格

　　div class=othermotion

　　保险商实验所

　　里

　　v-for=其他运动中的项目

　　:key=item.id

　　@click=detailshop(item.id)

　　img :src=item.shop_img alt= /

　　p

　　{{ item.shop_title }}

　　/p

　　/李

　　/ul

　　/div

　　/van-tab

　　van-tab title=美妆

　　van-grid :column-num=5

　　货车-网格-项目

　　v-for= Makeupimg中的值

　　:key=value.id

　　icon=photo-o

　　text=文字

　　img:src= value。src alt= style= width:50px；高度：30px /

　　span style= font-size:12px { value。title } }/span

　　/凡-网格-项目

　　/货车-网格

　　div class=otherMakeup

　　保险商实验所

　　里

　　@click=detailshop(item.id)

　　v-for=其他品牌中的项目

　　:key=item.id

　　img :src=item.shop_img alt= /

　　p

　　{{ item.shop_title }}

　　/p

　　/李

　　/ul

　　/div

　　/van-tab

　　van-tab title=男鞋

　　van-grid :column-num=5

　　货车-网格-项目

　　v-for=menshomping中的值

　　:key=value.id

　　icon=photo-o

　　text=文字

　　img:src= value。src alt= style= width:50px；高度：30px /

　　span style= font-size:12px { value。title } }/span

　　/凡-网格-项目

　　/货车-网格

　　div class=otherMenshop

　　保险商实验所

　　里

　　@click=detailshop(item.id)

　　其他男人的商店中的项目

　　:key=item.id

　　img :src=item.shop_img alt= /

　　p

　　{{ item.shop_title }}

　　/p

　　/李

　　/ul

　　/div

　　/van-tab

　　van-tab title=女鞋

　　van-grid :column-num=5

　　货车-网格-项目

　　v-for=女性的价值观

　　:key=value.id

　　icon=photo-o

　　text=文字

　　img:src= value。src alt= style= width:50px；高度：30px /

　　span style= font-size:12px { value。title } }/span

　　/凡-网格-项目

　　/货车-网格

　　div class=otherWoMenshop

　　保险商实验所

　　里

　　其他女人购物中的项目

　　:key=item.id

　　@click=detailshop(item.id)

　　img :src=item.shop_img alt= /

　　p

　　{{ item.shop_title }}

　　/p

　　/李

　　/ul

　　/div

　　/van-tab

　　van-tab title=家具家居

　　van-grid :column-num=5

　　货车-网格-项目

　　v-for=家具中的价值

　　:key=value.id

　　icon=photo-o

　　text=文字

　　img:src= value。src alt= style= width:50px；高度：30px /

　　span style= font-size:12px { value。title } }/span

　　/凡-网格-项目

　　/货车-网格

　　div class=其他家具

　　保险商实验所

　　里

　　v-for=其他家具中的物品

　　:key=item.id

　　@click=detailshop(item.id)

　　img :src=item.shop_img alt= /

　　p

　　{{ item.shop_title }}

　　/p

　　/李

　　/ul

　　/div

　　/van-tab

　　/van-tab

　　/div

　　/div

　　/模板

　　脚本

　　导出默认值{

　　data () {

　　返回{

　　值： ,

　　活动：0,

　　时间： ,

　　//轮播图图片

　　图像：[

　　http://m。360 buyimg。com/mobile CMS/s700x 280 _ jfs/t1/165251/27/8980/194778/60409 b 0 AE 6 D2 ff 3 df/ca 0 c 808809 dbbfa 8 .jpg！ q70.jpg.dpg ，

　　http://img CPS。JD。com/凌4/10027168852797/54 MB 5卢U6 kok 5 zy w5 pa 554m 56 imy/6 zkc 5 oog 55 av 5奥奇/p-5c 17126882 acdd 181 DD 53 cf 1/018 CD 345/Cr _ 1125 x445 _ 0 _ 171/s 1125 x690/q70。 jpg ，

　　http://m。360 buyimg。com/mobile CMS/s700x 280 _ jfs/t1/163716/23/16055/97374/6066 F2 cfee 720735 f/3 f4d 05450 BC 1 f 7 fc。jpg！ q70.jpg.dpg

　　],

　　//宫格

　　网格：[

　　{ id: 1，图标： 图标字体图标-姬寿，名称：手机 },

　　{ id: 2，图标： iconfont图标-bingxiang ，名称：冰箱 },

　　{ id: 3，icon: iconfont icon-xiyiji ，name:洗衣机 },

　　{ id: 4，icon: iconfont icon-dianshi ，名称： 电视 },

　　{ id: 5，图标： iconfont icon-youyanjiB ，名称：油烟机 },

　　{ id: 6，icon: icon字体icon-热水七，名称：热水器 },

　　{ id: 7，icon: iconfont icon-jiaju ，名称： 家居 },

　　{ id: 8，icon: iconfont icon-dianfanbao ，名称： 电饭煲 },

　　{ id: 9，icon: iconfont icon-deng ，名称： 台灯 },

　　{ id: 10，icon: icon字体icon-褚方永品-冉启造，名称：燃气灶 }

　　],

　　//秒杀商品

　　供应商店：[],

　　//其他商品

　　其他商店：[],

　　//手机页

　　电话：[],

　　//其他手机商品

　　其他电话：[],

　　//运动页

　　运动：[],

　　//其他运动商品

　　其他运动：[],

　　//美妆页

　　Makeupimg: []，

　　//其他美妆商品

　　其他化妆：[],

　　//男鞋页

　　男人：[],

　　//其他男鞋商品

　　其他店铺：[],

　　//女鞋页

　　女性造型：[],

　　//其他女鞋商品

　　其他妇女商店：[],

　　//家居页

　　FurnishingImg: []，

　　//其他家居商品

　　其他家具：[]

　　}

　　},

　　已创建(){

　　这个。倒计时()

　　this.loadershop()

　　},

　　方法：{

　　//搜索商品

　　搜索（值){

　　这个router.push({ name: SchCont ，params: { value } })

　　},

　　//倒计时

　　倒计时(){

　　var myDate=新日期()

　　var hour=24 - myDate.getHours()

　　这个时间=小时* 60 * 60 * 1000

　　},

　　//获取商品信息

　　异步loadershop () {

　　//获取所有商品赋值给优选页模块

　　const Allshop=等待这个. http.get(list？id=100’)

　　这个。其他商店=所有商店。数据。数据

　　//获取手机商品赋值给手机页模块

　　常量电话=等待此消息. http.get(详情？id=2’)

　　这个。其他电话=电话。数据。数据

　　//获取运动商品赋值给运动页模块

　　恒定间隙=等待. http.get(详情？id=3’)

　　这个。其他动作=播放。数据。数据

　　//获取美妆商品赋值给美妆页模块

　　常量组成=等待这个. http.get(详情？id=4’)

　　这个。其他化妆=化妆。数据。数据

　　//获取男鞋商品赋值给男鞋页模块

　　常数门商店=等待这个. http.get(详情？id=5’)

　　这个。其他男装店=男装店。数据。数据

　　//获取女鞋商品赋值给女鞋页模块

　　const WoMenshop=等待这个. http.get(详情？id=6’)

　　这个。其他女性商店=女性商店。数据。数据

　　//获取家居家具商品赋值给家居家具页模块

　　常数家具=等待这个. http.get(详情？id=7’)

　　这个。其他的家具=家具。数据。数据

　　//获取秒杀商品赋值给秒杀模块

　　const妙沙=等待这个. http.get(list_m )

　　这个。供应店=苗沙。数据。数据

　　},

　　//调转详情页

　　detailshop (id) {

　　这个router.push({ name: Details ，params: { id: id，urls: /home } })

　　},

　　//跳转优选宫格详情

　　xxx (id) {

　　这个router.push({ name: SchCont ，params: { value: id } })

　　}

　　}

　　}

　　/脚本

　　style lang=less 范围。主页{

　　宽度：100%;

　　身高：100%;标题{。van-tabs {

　　边距-顶部：-5px；

　　}

　　}

　　}。范-塔巴。van-tabbar-item {

　　显示器：flex

　　伸缩方向：列；

　　}

　　}

　　//轮播图。我的开关1 {

　　宽度：300像素

　　高度：150像素

　　左边距：35px

　　边距-顶部：20px

　　img {

　　宽度：300像素

　　高度：150像素

　　}

　　box-shadow: 0px 1px 3px 3px rgba(34，25，25，0.2)；

　　}

　　//十宫格。货车网格{

　　页边距-顶部：10px

　　box-shadow: 0px 1px 3px 3px rgba(34，25，25，0.2)；

　　}

　　//秒杀。供应{

　　宽度：100%;

　　高度：120像素

　　页边距-顶部：10px

　　box-shadow: 0px 1px 3px 3px rgba(34，25，25，0.2)；商店{

　　ul {

　　列表样式：无；

　　李{

　　浮动：左；

　　左边距：13px

　　img {

　　页边距-顶部：10px

　　宽度：80px

　　}

　　}

　　}

　　}

　　}

　　//其他商品。其他商店{

　　边距-顶部：20px

　　ul {

　　显示器：flex

　　justify-content:space-around；

　　对齐-项目：居中；

　　柔性包装：缠绕；

　　填充-底部：40px

　　李{

　　宽度：170像素

　　高度：220像素

　　字体大小：14px

　　p {

　　宽度：170像素

　　溢出：隐藏；//超出的文本隐藏

　　空白：nowrap//溢出不换行

　　文本溢出：省略号；//溢出用省略号显示

　　}

　　img {

　　宽度：150像素

　　}

　　}

　　}

　　}

　　//其他手机商品。其他电话{

　　边距-顶部：20px

　　ul {

　　显示器：flex

　　justify-content:space-around；

　　对齐-项目：居中；

　　柔性包装：缠绕；

　　填充-底部：40px

　　李{

　　宽度：170像素

　　高度：220像素

　　字体大小：14px

　　p {

　　宽度：170像素

　　溢出：隐藏；//超出的文本隐藏

　　空白：nowrap//溢出不换行

　　文本溢出：省略号；//溢出用省略号显示

　　文本缩进：2em

　　}

　　img {

　　宽度：150像素

　　}

　　}

　　}

　　}

　　//其他运动商品。其他运动{

　　边距-顶部：20px

　　ul {

　　显示器：flex

　　justify-content:space-around；

　　对齐-项目：居中；

　　柔性包装：缠绕；

　　填充-底部：40px

　　李{

　　宽度：170像素

　　高度：220像素

　　字体大小：14px

　　p {

　　宽度：170像素

　　溢出：隐藏；//超出的文本隐藏

　　空白：nowrap//溢出不换行

　　文本溢出：省略号；//溢出用省略号显示

　　文本缩进：2em

　　}

　　img {

　　宽度：150像素

　　}

　　}

　　}

　　}

　　//其他美妆商品。其他化妆品{

　　边距-顶部：20px

　　ul {

　　显示器：flex

　　justify-content:space-around；

　　对齐-项目：居中；

　　柔性包装：缠绕；

　　填充-底部：40px

　　李{

　　宽度：170像素

　　高度：220像素

　　 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;

　　 }

　　 }

　　 }

　　}

　　</style>

　　项目打包看这个

　　到此这篇关于浅谈使用Vue完成移动端apk项目的文章就介绍到这了,更多相关Vue完成移动端apk项目内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。