Vue3移动端项目

一、项目构建

1、使用了vite构建vue3项目，其中支持如下图

 2、其余路由配置、axios封装、组件封装 都与  方式一致

二、Vant组件引入

1、安装 （vue3使用vant4）

# Vue 3 项目，安装最新版 Vant
npm i vant

# Vue 2 项目，安装 Vant 2
npm i vant@latest-v2

2、全局引入main.ts/js

import './assets/main.css'

import { createApp } from 'vue'
import { createPinia } from 'pinia'

import App from './App.vue'
import router from './router'

import Vant from 'vant'
import 'vant/lib/index.css';

const app = createApp(App)
app.use(Vant)

app.mount('#app')

3、如果是基于 Vite 的项目，在 vite.config.js 文件中配置插件：

import vue from '@vitejs/plugin-vue';
import AutoImport from 'unplugin-auto-import/vite';
import Components from 'unplugin-vue-components/vite';
import { VantResolver } from '@vant/auto-import-resolver';

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

三、移动端项目展示