vite+vue3+ts+vant 移动端

1.创建vite项目 

通过npm初始化

npm init vite@latest

通过Yarn

yarn create vite

或者自定义模板

# npm 6.x
npm init vite@latest my-vue-app --template vue-ts

# npm 7+, 需要额外的双横线：
npm init vite@latest my-vue-app -- --template vue-ts

# yarn
yarn create vite my-vue-app --template vue-ts

2.配置vite.config.ts（别名+跨域）

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

const path = require('path');
function resolve(dir) {
    return path.join(__dirname, dir);
}
module.exports = {
    publicPath: './',
    // 设置别名
    configureWebpack: {
        resolve: {
            alias: {
                // 这里 使用 "@/assets" 会报错
                assets: resolve('src/assets'),
                components: resolve('src/components'), //组件
                views: resolve('src/views'), //视图
                utils: resolve('src/utils'), // 工具类
                api: resolve('src/api'), // 接口
            },
        },
    },
    // 配置跨域
    devServer: {
        host: '0.0.0.0',
        proxy: {
            '/api': {
                target: 'http://192.168.1.130:8080',
                ws: true,
                changeOrigin: true, //是否跨域
                pathRewrite: {
                    '^/api': '',
                },
            },
        },
    },
};

遇到问题：

解决：安装 @type/node

3.安装vue-router

yarn add vue-router@next 

新建  router/index.ts 

import { createRouter, createWebHashHistory } from 'vue-router'
import type { RouteRecordRaw } from 'vue-router'

const routes:Array< RouteRecordRaw > = [] //路由写法与vue2版本一样，下边在补充

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

export default router

配置main.ts

import { createApp } from 'vue'
import App from './App.vue'

import router from './router'

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

app.mount('#app')

4.项目启动报错 

解决：vite.config.js里面defineConfig下加上

 server: {
    host: '0.0.0.0'
  },

5.安装axios

yarn add axios  / npm install axios -S

6.安装vant

yarn add vant@3 / yarn add vant@3

在 vite 项目中按需引入组件（推荐）

在 vite 项目中使用 Vant 时，推荐安装 vite-plugin-style-import 插件，它可以自动按需引入组件的样式.

yarn add vite-plugin-style-import / npm i vite-plugin-style-import -D 

安装完成后，在 vite.config.js 文件中配置插件：

import vue from '@vitejs/plugin-vue';
import styleImport from 'vite-plugin-style-import';

export default {
  plugins: [
    vue(),
    styleImport({
      libs: [
        {
          libraryName: 'vant',
          esModule: true,
          resolveStyle: (name) => `vant/es/${name}/style/index`,
        },
      ],
    }),
  ],
};