vant部署_Vue 3.x配置Vuex使用Vant TabBar及部署

Vue 3.x 配置Vuex及Vant TabBar使用并将Vue3.x项目打包部署至tomcat

编者： wRitchie(吴理琪) 来源：http://www.bj9420.com

概述：Vant有很多可以直接使用的组件，但真正要实际使用，应用起来还是比较费劲，尤其对于初学者而言。通过Vuex来记录选项卡状态的变化，在TabBar组件页面监听，判断当前页面是哪个选项卡页面，解决刷新时，选项卡默认为第一个选项卡页面的问题，本文主要解决配置及使用Vuex、Vant组件TabBar使用，以及Vue3.x项目发布至Tomcat页面刷新404错误的问题。

一、安装vuex

使用yarn:yarn add vuex@next –save使用npmnpm install vuex@next --save

1、安装命令yarn add vuex@next –save

2、安装成功

3、新建store文件夹，在store文件夹下新建index.js

import { createStore } from 'vuex'const store = createStore({    state () {      return {        active: 0 //默认选中的选项卡      }    },    mutations: {      setActiveTabBar (state,value) {        //console.info("store****:"+value)        state.active=value      }    }  })   export default store

4、全局配置Vuex

在main.js全局配置Vuex (在vue3.0中引入了一个新的函数名createApp,会把容器挂载到上面，因此会新命名一个变量const app = createApp(App)，方便后期挂载依赖)

//导入storeimport store from './store'app.use(store)app.mount('#app')

main.js配置如图：

二、使用TabBar

1、在components目录下，新建TabBar.vue，供需要引用公共选项卡的页面使用

首页分类发现购物车我的

2、在views文件夹下，新建选项卡各页面Main.vue(首页)，Sort.vue(分类),Discover.vue(发现),Cart.vue(购物车)，Me.vue(我的)，示例各页面一样，只改div里面文字为对应页面的中文，各页面使用组件TabBar

3、运行效果

附：Vue3.x项目打包部署至tomcat

1、打包命令：yarn build

2、执行完毕，在项目目录下生成dist

3、复制dist下所有文件至tomcat的webapp目录下的ROOT目录下：

4、在ROOT目录下，新建目录WEB-INF，新建web.xml，解决刷新，页面报404错误

<?xml version="1.0" encoding="UTF-8"?>Router for Tomcat404/index.html

vant部署_Vue 3.x配置Vuex使用Vant TabBar及部署相关推荐

linux 软件部署工具下载,linux配置 yum管理应用软件、快速部署Web/FTP
一.配置软件仓库 1.yum简介基于rpm软件包的安装部署机制自动解决软件包的依赖关系需要先配置软件仓库 2.配置本地的软件仓库 a.放入centos7.iso镜像文件到光驱中,确保电源开启 b ...
ADK+MDT实现域控服务器全自动静默下发系统（五）：MDT的部署--Task Sequences的配置
日常中最常用的安装系统方式为U盘手动安装,或是借助第三方一键装机工具进行安装.但是对于身处在一家公司中的运维人员,经常需要安装系统,甚至有时需要在有限的时间内安装多台系统.这种情况如果还是使用上述两种 ...
Exchange 2013部署系列之(七)配置SSL多域名证书
Exchange 2013部署系列之(七) 配置SSL多域名证书前面六篇博客我们详细讲解了Exchange Server 2013的部署和配置,Exchange一些服务,如 Outlook 无处不在 ...
mondrain配置mysql_mondrian 4.7 源码部署(示例代码)
mondrian是一个开源的数据分析工程, 网上有关mondrian3.X的源码部署比较多, 有关4.X的部署较少. 目前官方推荐使用的时mondrian3.7的修订版, 可以再github上下载到最 ...
Exchange Server 2016 独立部署/共存部署（五）—— 配置DAG（下）
Exchange Server 2016 独立部署/共存部署 (五)-- 配置DAG(下) https://blog.51cto.com/horse87/1749819 上一篇我们创建完了DAG的服务 ...
Exchange Server 2016 独立部署/共存部署（四）—— 配置DAG（上）
https://blog.51cto.com/horse87/1749480 Exchange Server 2016 独立部署/共存部署 (四)-- 配置DAG(上) horse87关注0人评论16 ...
使用Vant组件库，van-filed配置手机号验证规则
1.安装vant yarn add vant /npm i vant 2.main.js目录下 // 导入vantimport Vant from 'vant'// 加vant 全局样式import ...
Windows 10企业批量部署实战之WDS配置
上文我们成功安装了Windows部署服务角色,接下来我们需要对WDS进行简单的配置以满足后边环境的使用需求. 二.配置WDS: 2.1.打开Windows部署服务右键服务器选择配置服务器: 2.2.相 ...
Nginx 部署、反向代理配置、负载均衡
Nginx 部署.反向代理配置.负载均衡最近我们的angular项目部署,我们采用的的是Nginx,下面对Nginx做一个简单的介绍. 为什么选择Nginx 轻:相比于Apache,同样的web服务 ...
yolov5 6.0版本-＞onnx-＞ncnn +安卓部署附加ncnn环境配置保姆级详细教程
目标检测:yolov5 6.0版本 ncnn环境安装至 +安卓部署一条龙教程文章目录背景一.准备阶段 1.参考文章 #2.流程二.pt模型->onnx 三.Windows下ncnn环 ...

vant部署_Vue 3.x配置Vuex使用Vant TabBar及部署

vant部署_Vue 3.x配置Vuex使用Vant TabBar及部署相关推荐

最新文章

热门文章