移动应用

基于Vue3+TypeScript+ Vue-Cli4.0构建手机端模板脚手架

vue3-h5-template

基于 Vue3+TypeScript+ Vue-Cli4.0 + vant ui + sass+ rem 适配方案+axios 封装 + jssdk 配置 + vconsole 移动端调试，构建手机端模板脚手架

项目地址：github

查看 demo 建议手机端查看

Node 版本要求

Vue CLI 需要 Node.js 8.9 或更高版本 (推荐 8.11.0+)。你可以使用 nvm 或 nvm-windows 在同一台电脑中管理多个 Node 版本。

本示例 Node.js 12.14.0

项目结构


vue-h5-template -- UI 主目录  
├── public -- 静态资源  
├ ├── favicon.ico -- 图标  
├ └── index.html -- 首页  
├── src -- 源码目录  
├ ├── api -- 后端交互的接口  
├ ├── assets -- 静态资源目录
├ ├ ├── css
├ ├ ├── index.scss -- 全局通用样式
├ ├ ├── mixin.scss -- 全局 mixin
├ ├ └── variables.scss -- 全局变量  
├ ├── components -- 封装的组件  
├ ├── config -- 环境配置  
├ ├── hooks -- vue3 Hooks
├ ├── model -- 类型声明文件
├ ├── const -- 放 vue 页面的配置常量  
├ ├── plugins -- 插件  
├ ├── route -- VUE 路由  
├ ├ ├── index -- 路由入口  
├ ├ └── router.config.js -- 路由表  
├ ├── store -- VUEX  
├ ├── utils -- 工具包  
├ ├ ├── request.js -- axios 封装
├ ├ └── storage.js -- 本地存储封装
├ ├── views -- 业务上的 vue 页面  
├ ├ ├── layouts -- 路由布局页面(是否缓存页面)
├ ├ ├── tabBar -- 底部菜单页面
├ ├ └── orther -- 其他页面
├ ├── App.vue -- 根组件  
├ ├── main.ts -- 入口 ts  
├ ├── shims-axios.d.ts -- axios 声明文件  
├ └── shims-vue.d.ts -- vue 组件声明文件
├── .env.development -- 开发环境  
├── .env.production -- 生产环境  
├── .env.staging -- 测试环境  
├── .eslintrc.js -- ESLint 配置  
├── .gitignore -- git 忽略  
├── .postcssrc.js -- CSS 预处理配置(rem 适配)  
├── babel.config.js -- barbel 配置入口  
├── tsconfig.json -- vscode 路径引入配置
├── package.json -- 依赖管理  
└── vue.config.js -- vue cli4 的 webpack 配置

启动项目


git clone https://github.com/ynzy/vue3-h5-template.git

cd vue3-h5-template

npm install

npm run serve


"scripts": {
  "serve": "vue-cli-service serve --open",
  "stage": "cross-env NODE_ENV=dev vue-cli-service serve --mode staging",
  "prod": "cross-env NODE_ENV=dev vue-cli-service serve --mode production",
  "stageBuild": "vue-cli-service build --mode staging",
  "build": "vue-cli-service build",
}

配置介绍

以 VUE_APP_ 开头的变量，在代码中可以通过 process.env.VUE_APP_ 访问。
比如,VUE_APP_ENV = 'development' 通过process.env.VUE_APP_ENV 访问。
除了 VUE_APP_* 变量之外，在你的应用代码中始终可用的还有两个特殊的变量NODE_ENV 和BASE_URL 在项目根目录中新建.env.*

.env.development 本地开发环境配置


NODE_ENV='development'
# must start with VUE_APP_
VUE_APP_ENV = 'development'

.env.staging 测试环境配置


NODE_ENV='production'
# must start with VUE_APP_
VUE_APP_ENV = 'staging'

.env.production 正式环境配置


NODE_ENV='production'
# must start with VUE_APP_
VUE_APP_ENV = 'production'

这里我们并没有定义很多变量，只定义了基础的 VUE_APP_ENV development staging production
变量我们统一在 src/config/env.*.ts 里进行管理。

这里有个问题，既然这里有了根据不同环境设置变量的文件，为什么还要去 config 下新建三个对应的文件呢？
修改起来方便，不需要重启项目，符合开发习惯。

config/index.js


export interface IConfig {
    env?: string // 开发环境
    title?: string // 项目title
    baseUrl?: string // 项目地址
    baseApi?: string // api请求地址
    APPID?: string // 公众号appId  一般放在服务器端
    APPSECRET?: string // 公众号appScript 一般放在服务器端
    $cdn: string // cdn公共资源路径
}

// 根据环境引入不同配置 process.env.NODE_ENV
const config = require('./env.' + process.env.VUE_APP_ENV)
module.exports = config

并且定义了接口类型，方便我们调用的时候可以自动识别参数

配置对应环境的变量，拿本地环境文件 env.development.js 举例，用户可以根据需求修改


// 本地环境配置
module.exports = {
    title: 'vue-h5-template',
    baseUrl: 'http://localhost:9018', // 项目地址
    baseApi: 'https://test.xxx.com/api', // 本地api请求地址
    APPID: 'xxx',
    APPSECRET: 'xxx'
}

调用 config


import config from '@/config/index'
setup() {
  console.log('环境配置', config)
}

基于Vue3+TypeScript+ Vue-Cli4.0构建手机端模板脚手架 3年前

vue3-h5-template

Node 版本要求

项目结构

启动项目

目录

✅ 配置多环境变量

配置介绍

调用 config

✅ rem 适配方案

PostCSS 配置

✅ VantUI 组件按需加载

安装插件

使用组件

✅ Sass 全局样式

目录结构

自定义 vant-ui 样式

父组件改变子组件样式 深度选择器

✅ 适配苹果底部安全距离

✅ 使用 Mock 数据

✅ Axios 封装及接口管理

接口管理

如何调用

✅ Vuex 状态管理

✅ Vue-router

✅ Webpack 4 vue.config.js 基础配置

✅ 配置 alias 别名

✅ 配置 proxy 跨域

✅ 配置 打包分析

✅ 配置 externals 引入 cdn 资源

✅ 去掉 console.log

✅ splitChunks 单独打包第三方模块

✅ gzip 压缩

✅ uglifyjs 压缩

✅ vconsole 移动端调试

teleport

✅ 动态设置 title

✅ 本地存储 storage 封装

✅ 配置 Jssdk

✅ Eslint + Pettier 统一开发规范

鸣谢 ​

热门教程文档

父组件改变子组件样式深度选择器

✅ 配置打包分析

鸣谢