基于Vue3+TypeScript+ Vue-Cli4.0构建手

2021-02-21 本文已影响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

目录

√配置多环境变量
√rem 适配方案
√VantUI 组件按需加载
√Sass 全局样式
√适配苹果底部安全距离
√使用 Mock 数据
√Axios 封装及接口管理
√Vuex 状态管理
√Vue-router
√Webpack 4 vue.config.js 基础配置
√配置 alias 别名
√配置 proxy 跨域
√配置打包分析
√externals 引入 cdn 资源
√去掉 console.log
√splitChunks 单独打包第三方模块
√gzip 压缩
√uglifyjs 压缩
√vconsole 移动端调试
√动态设置 title
√本地存储 storage 封装
√配置 Jssdk
√Eslint + Pettier 统一开发规范

✅ 配置多环境变量

package.json 里的 scripts 配置 serve stage build，通过 --mode xxx 来执行不同环境

通过 npm run serve 启动本地 , 执行 development
通过 npm run stage 启动测试 , 执行 development
通过 npm run prod 启动开发 , 执行 development
通过 npm run stageBuild 打包测试 , 执行 staging
通过 npm run build 打包正式 , 执行 production

"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构建手

vue3-h5-template

Node 版本要求

项目结构

启动项目

<span id="top">目录</span>

<span id="env">✅ 配置多环境变量 </span>

配置介绍

调用 config

<span id="rem">✅ rem 适配方案 </span>

PostCSS 配置

<span id="vant">✅ VantUI 组件按需加载 </span>

安装插件

使用组件

<span id="sass">✅ Sass 全局样式</span>

目录结构

自定义 vant-ui 样式

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

<span id="phonex">✅ 适配苹果底部安全距离</span>

<span id="mock">✅ 使用 Mock 数据 </span>

<span id="axios">✅ Axios 封装及接口管理</span>

接口管理

如何调用

<span id="vuex">✅ Vuex 状态管理</span>

<span id="router">✅ Vue-router </span>

<span id="base">✅ Webpack 4 vue.config.js 基础配置 </span>

<span id="alias">✅ 配置 alias 别名 </span>

<span id="proxy">✅ 配置 proxy 跨域 </span>

<span id="bundle">✅ 配置 打包分析 </span>

<span id="externals">✅ 配置 externals 引入 cdn 资源 </span>

<span id="console">✅ 去掉 console.log </span>

<span id="chunks">✅ splitChunks 单独打包第三方模块</span>

<span id="gzip">✅ gzip 压缩</span>

<span id="uglifyjs">✅ uglifyjs 压缩</span>

<span id="vconsole">✅ vconsole 移动端调试 </span>

teleport

<span id="dyntitle">✅ 动态设置 title </span>

<span id="storage">✅ 本地存储 storage 封装 </span>

<span id="jssdk">✅ 配置 Jssdk </span>

<span id="pettier">✅ Eslint + Pettier 统一开发规范 </span>

鸣谢

猜你喜欢

热点阅读

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

<span id="bundle">✅ 配置打包分析 </span>