vue-h5-template

🍰「Vue移动端项目模版」Vite + Vue Router + Vitest + Vant + Tailwindcss + Sass + NProgress + ESLint + Stylelint + CSpell

若您习惯 vue 2 + vite 开发，请戳这里传送

若您习惯 vue 2 + webpack 开发，请戳这里传送

Demo

Click here

Installation

# .git folder is removed automatically
npx degit leedom92/vue-h5-template my-project

cd my-project

pnpm i # If you don't have pnpm installed, run: npm install -g pnpm

pnpm dev

Todo List

• Vue 3
• Vite 5
• Vue Router
• Vitest
• Pinia
• Vant
  • 组件按需加载
• api自动导入
• Tailwindcss
• NProgress.js进度条
  • NProgress颜色自定义
• animate.css动画库
• Sass
• Alias别名
• Axios封装
• ESLint
• Stylelint
• 打包移除console和debugger
• CSpell英文拼写问题检查
• 提交代码 eslint 检测，并自动修复

去掉了 animate.css 依赖，我觉得该动画库对页面而言只是锦上添花，该项目作为模版，无需过多的可有可无的功能。 若页面跳转需要有过渡效果，可以一用。

组件按需加载

1. 安装插件

# 通过 pnpm 安装 unplugin-vue-components
pnpm add unplugin-vue-components -D

2. 配置插件

// vite.config.js
import vue from '@vitejs/plugin-vue';
import Components from 'unplugin-vue-components/vite';
import { VantResolver } from 'unplugin-vue-components/resolvers';

export default {
  plugins: [
    vue(),
    Components({
      resolvers: [VantResolver()],
    }),
  ],
};

api自动导入

1. 安装插件

# 通过 pnpm 安装 unplugin-auto-import
pnpm add unplugin-auto-import -D

2. 配置插件

// vite.config.js
import AutoImport from 'unplugin-auto-import/vite'

export default {
  plugins: [
    AutoImport({
      imports: ['vue', 'vue-router', 'pinia'], // 自动导入vue生态库相关api
    }),
  ],
};

🔝

NProgress颜色自定义

/* assets/styles/vars.css 修改颜色即可 */
:root {
  --nprogress-color: #40b982;
}

🔝

alias别名

// vite.config.js
import { fileURLToPath, URL } from 'node:url'
import { defineConfig } from 'vite'

// https://vitejs.dev/config/
export default defineConfig({
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url)),
      '_a': fileURLToPath(new URL('./src/api', import.meta.url)),
      '_c': fileURLToPath(new URL('./src/components', import.meta.url)),
      '_i': fileURLToPath(new URL('./src/assets/images', import.meta.url)),
      '_u': fileURLToPath(new URL('./src/utils', import.meta.url)),
    }
  }
})

🔝

Axios封装

// src/utils/request.js
service.interceptors.request.use( // 请求拦截器
  (config) => {

    // headers中加入token验证
    config.headers['Authorization'] = ''

    return config
  },
  (error) => {
    return Promise.reject(error)
  }
)

service.interceptors.response.use( // 响应拦截器
  (response) => {
    const res = response.data
    // 根据接口返回的状态码判断
    if (+res.code === 200) {
      return res
    } else {
      ...
    }
  },
  (error) => {
    ...
  }
)

// src/api/*.js
export function login(params) {
  return request({
    loading: true, // 是否显示loading
    url: '/login', // 接口地址
    methods: 'post', // 请求方式
    ...params // 请求参数
  })
}

🔝

ESLint 统一开发规范

使用 @leedomjs/eslint-config 作为ESLint默认配置

// .eslintrc.cjs 可自定义规则
module.exports = {
  extends: "@leedomjs"
  // 自定义规则
  rules: {
    
  }
}

🔝

Stylelint 统一开发规范

使用 @leedomjs/stylelint-config 作为stylelint默认配置

// .stylelintrc.cjs 可自定义规则
module.exports = {
  extends: "@leedomjs/stylelint-config"
  // 自定义规则
  rules: {
    
  }
}

🔝

打包移除console和debugger

/**
 * vite.config.js
 * 打包默认使用 'esbuild'， 可选 'terser'
 * 有以下两种方法可在生产环境移除console和debugger
 */

// 1. build via esbuild
export default defineConfig(({ command }) => {
  return {
    esbuild: {
      drop: command === 'build' ? ['console', 'debugger'] : []
    }
  }
})

// 2. build via terser
export default defineConfig({
  build: {
    minify: 'terser',
    terserOptions: {
      compress: {
        drop_console: true,
        drop_debugger: true,
      }
    }
  }
})

🔝

检查英文拼写

在提交代码触发pre-commit钩子的时候会检查主要代码中的英文拼写

你也可以提前运行以下命令来检查拼写问题

pnpm check:spell

🔝

在 tailwindcss.config.js 中添加vant-ui的基本色

Note

使用了 tailwindcss-color-preset 作为预设。

用法：以 van 为关键字，还提供两个渐变色，基本主题色名称请参考 van-button 的类型颜色， 例如 primary。

<div class="text-van-primary bg-van-gradient-red">vue</div>
<div class="bg-van-success bg-van-gradient-orange">vite</div>

License

MIT