基于Vue 3 + Typescript + Vite 搭建H5通用架子

项目初衷

用最新的前端技术开发一个H5的通用架子，让前端同学开箱即用，迅速投入战斗。

项目源码在文章结尾处，记得查收哦~
如果有帮助到你，请点个👍~

搭建项目

Vite 需要 Node.js 版本 >= 12.0.0。

# NPM
npm init @vitejs/app

# YARN 
yarn create @vitejs/app

这里选择 vue3+ Ts

主要功能

常用目录别名
Vant/Rem适配
scss支持、_mixin.scss、_variables.scss
页面标题
模块化自动注册：自动注册router/自动注册Vuex
axios封装、api管理、请求代理
生产环境优化

项目结构

# vue3Ts
├── index.html
├── package.json
├── public
│   └── favicon.ico
├── src
│   ├── App.vue
│   ├── assets
│   │   └── logo.png
│   ├── components
│   ├── config   // 基础配置
│   ├── directives  // 定义指令
│   │   └── cope.ts
│   ├── router  
│   │   └── modules  // 路由模块
│   ├── store  
│   │   └── modules  // vuex模块
│   ├── utils    // 工具类
│   └── main.ts
├──── postcss.config.js
│──── vite.config.ts
└──── tsconfig.json

常用目录别名


alias: {
        '@': '/src',
        'assets': '/src/assets',
        'components': '/src/components',
        'config': '/src/config',
        'router': '/src/router',
        'api': '/src/api',
    }

scss支持、移动端适配 postcss

选择scss作为css预处理，并对 variables、common.scss作全局引入。

css: {
    preprocessorOptions: {
      // 引入公用的样式
      scss: {
        additionalData: `@import "@/styles/common.scss";@import "@/styles/variable.scss";`,
      }
    }
  }

安装postcss包
```
yarn add postcss-pxtorem -D
```

创建postcss.config.js 文件

module.exports = {
  "plugins": {
    "postcss-pxtorem": {
      rootValue: 37.5, // Vant 官方根字体大小是 37.5
      propList: ['*'],
      selectorBlackList: ['.norem'] // 过滤掉.norem-开头的class，不进行rem转换
    }
  }
}

这里有个问题，ts项目创建的postcss.config.ts文件，项目启动他没有生效，估计是ts文件导入解析的格式与js文件不一样

度娘了很久没找到解决方案，所以还是创建了js 文件

需要更改一下 tsconfig.ts, 直接往内加入两条配置就行了

//tsconfig.ts
"allowJs": true, 
"noImplicitAny": false,

引入 lib-flexible 设置 rem 基准值, 重启项目即可

yarn add lib-flexible --save

//main.ts

import 'lib-flexible'

模块化自动注册

vuex, router模块化
使用vite import.meta.globEager 方法获取文件上下文
下面用路由自动注册为例

安装
```
npm install vue-router@4
```

配置文件

这里模块化路由,配置 router/index.ts 文件

import { createRouter, createWebHashHistory, RouteRecordRaw } from "vue-router";

let routes: Array<RouteRecordRaw> = [
  {
    path: "/",
    name: "home",
    component: () => import("@/page/home/home.vue"),
    meta:{
      title:'首页',
      keepAlive: true,
      is_show_header: false,
      is_show_footer: false,
      back: 'back',
    }
  },
];
//模块化路由，将router 文件夹下的ts文件内路由自动导入
const routesModules = import.meta.globEager('./**/*.ts')
const modules:Array<RouteRecordRaw> = []
Object.keys(routesModules).forEach(key => {
  modules.push(...routesModules[key].default)
})
routes = routes.concat(modules)

const router = createRouter({
    history: createWebHashHistory(),
    routes
});

export default router;

其他模块的路由文件只需要这样写可以了

// about.ts
export default [
  {
    path: "/about",
    name: "about",
    component: () => import("@/page/about/about.vue"),
    meta:{
      title:'关于',
      keepAlive: true,
      is_show_header: false,
      is_show_footer: false,
      back: 'back',
    }
  },
]

在main.ts内注册

// main.ts
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'

createApp(App)
  .use(router)
  .mount('#app')

router的meta设置

路由meta内添加元信息，不设置默认为false

is_show_footer ：是否显示底部栏
is_show_footer：是否显示顶部导航栏
keepAlive ：是否缓存页面

配合vue-router的beforeEach获取meta信息，不填meta默认为false, 数据保存到veux 内，方便后续业务做更多扩展设置

api请求loading层

在封装的axios内，使用请求拦截请求数据是否有closeLoading字段，没设置默认开启loading层。
vuex内 isLoading 控制是否显示

const service:any = axios.create({
  // baseURL:'http://api.ourclass.com.cn',
  baseURL:baseUrl(),
  timeout: 10000, // request timeout
})
const loadingVex = (data:boolean) =>{
  store.commit('setting/set_isLoading',data)
}
// request interceptor 请求拦截
service.interceptors.request.use(
  config => {
    if(config.method === 'post'){
      config.data = qs.stringify(config.data)
    }
    if(!config.closeLoading){  //api如果需要关闭loading则设置 closeLoading ，默认不关闭
      loadingVex(true)
    }
    return config
  },
  error => {
    loadingVex(false)
    return Promise.reject(error)
  }
)

支持api有多个baseURL

const apiTypes = {
  base: import.meta.env.VITE_API,
  gateway: import.meta.env.VITE_DEMO_API,
}

// request interceptor 请求拦截
service.interceptors.request.use(
  config => {
    const type = config.type || 'base' //增加type获取判断
    config.baseURL = apiTypes[type] || ''
    return config
  },
  error => {
    return Promise.reject(error)
  }
)

//api 写入
export function getInfo(data) {
  // return api.post("/Ucenter/Login/info", data, {type:'gateway'});  // baseURL 拿的是 VITE_DEMO_API
  return api.post("/Ucenter/Login/info", data); 
}

生产环境优化

上线前，得优化一下资源了，该项目做了如下几步操作

使用br压缩代码，配置文件见 vite.config.ts
移除掉debugger/console

基于Vue 3 + Typescript + Vite 搭建H5通用架子

基于Vue 3 + Typescript + Vite 搭建H5通用架子

项目初衷

搭建项目

主要功能

项目结构

常用目录别名

scss支持、移动端适配 postcss

模块化自动注册

router的meta设置

api请求loading层

支持api有多个baseURL

生产环境优化

相关连接