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

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

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

项目初衷

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


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

搭建项目

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

# NPM
npm init @vitejs/app

# YARN 
yarn create @vitejs/app
复制代码

这里选择 vue3+ Ts

主要功能

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

项目结构

# 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";`,
      }
    }
  }
复制代码
  1. 安装postcss包

    yarn add postcss-pxtorem -D
    复制代码
  2. 创建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, 
    复制代码
  3. 引入 lib-flexible 设置 rem 基准值, 重启项目即可

    yarn add lib-flexible --save
    
    //main.ts
    
    import 'lib-flexible'
    复制代码

模块化自动注册

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

  1. 安装

    npm install vue-router@4
    复制代码
  2. 配置文件

    这里模块化路由,配置 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',
        }
      },
    ]
    复制代码
  3. 在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

  1. is_show_footer :是否显示底部栏
  2. is_show_footer: 是否显示顶部导航栏
  3. keepAlive :是否缓存页面

配合vue-routerbeforeEach获取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); 
}

复制代码

生产环境优化

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

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

相关连接

源码地址
萌新求支持 手动狗头

文章分类
前端
文章标签