vue3-vant4-h5

此模板用于手机h5开发

初始化项目

基于create-vue初始化项目，可根据提示选择安装依赖，此模板已配置好vue-router、pinia、eslint、prettier。

安装UI库

手机端ui库使用 vant4，引入方式采用按需引入

安装

# 默认安装v4版本
npm i vant

安装按需导入插件

# 通过 npm 安装
npm i unplugin-vue-components -D

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

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

配置vite.config.ts

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()],
    }),
  ],
};

Toast,Dialog函数组件引用方式详见官网

代码检查和代码规范

在初始化项目中已引入eslint和prettier,并引入了针对vue语法检查的eslint-plugin-vue

引入eslint-plugin-vue-scoped-css

npm install --save-dev eslint eslint-plugin-vue-scoped-css vue-eslint-parser

相关的规则可在.eslitric.js中配置，配置细则见文档

zhisui/vue3-vant-vite-h5-template