vue html5模板,vue-h5-template

本文介绍了一个基于vue-cli3构建的移动端模板项目,涵盖了vue-router、vuex、axios、rem适配和vant-ui组件库的使用。详细阐述了启动项目、配置环境变量、路由守卫、vuex状态管理和接口配置等方面,适合初学者和进阶开发者。
摘要由CSDN通过智能技术生成

vue 移动端模板

启动项目

npm i 安装依赖

npm run serve 启动项目

cd server (接口目录)

npm i

npm run dev

前言

花了半天的时间整理了一个 vue 移动端项目的模板,希望多还不熟悉 vue 项目搭建的小伙伴有些帮助,也欢迎各路大神提出宝贵的建议,本文章默认你已经对 webpack 和 vue 有一定的了解。

核心知识体系简介

vue-cli3 脚手架

创建项目

开发环境和生产环境配置

配置跨域

vue-router 路由

路由配置

子路由配置

路由守卫,设置页面标题和根据登录状态判断是否允许进入特定页面

对router-link使用active-class,高亮当前路由

vuex 跨组件通信

vuex 配置

vuex 持久化

vuex 使用

rem 移动端适配

通过 amfe-flexibe 设置 root 元素的字体大小

通过 pxtorem 把 px 转成 rem, 无需手动书写 rem

axios 配置

使用拦截器配置 baseURL 和给请求头加上 token

使用拦截器对返回的数据进行处理

挂载到 vue 原型上,方便使用

promise 使用

在项目中使用 async await 把异步变成同步,编写和阅读更舒服

有赞 vant-ui 库

导航栏

单元格

loading

......

使用keep-

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值