vue3 vant ts vuex vite

1 项目搭建

1.1 基础

vue版本：Vue3

打包工具：Vite，需要 Node.js 版本 18 或 20

UI：Vant

编程语言：TypeScript

全局状态管理工具：Vuex

CSS预处理语言：Less

开发工具推荐：vscode

vscode推荐拓展：Vue - Official、Vue 3 Snippets 等

1.2 搭建

通过命令行有两种创建方式，可参考 Vite，此处采用 vue-ts 模板。

npm create vite@latest my-vant-vuex-vite-pro -- --template vue-ts

npm init vite@latest my-vant-vuex-vite-pro -- --template vue-ts

到此，一个项目已经初步搭建完成，安装相关依赖 （如果一步步下来的，记得切换到项目根目录再安装）

npm install --registry=https://registry.npmmirror.com

 通过命令行已经可以启动项目了

npm run dev

Tips：在不同的项目中对于 node 可能用的版本不一样，可以安装 node管理工具：nvm

        此处不再具体讲解。

2 安装依赖

UI组件：vant

npm i vant

按需引入组件所需依赖：unplugin-vue-components、unplugin-auto-import

npm i @vant/auto-import-resolver unplugin-vue-components unplugin-auto-import -D

基于组合API封装好用的工具函数 ：@vueuse/core

npm i @vueuse/core

为TypeScript项目提供Node.js的API的类型定义，从而在开发过程中提供代码补全和类型检查的支持：@types/node

npm i @types/node -D

路由管理工具：vue-router

npm i vue-router

CSS预处理语言：Less

npm install -D less

Tips：如遇到安装依赖不成功的可以通过添加淘宝域名的方式安装，不建议使用 cnpm

在安装命令行后边添加：--registry=https://registry.npmmirror.com 如：

npm install vuex@next --registry=https://registry.npmmirror.com

3 项目配置

3.1 配置按需引入

在 vite.config.ts 中，我们引入以下依赖

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

在 defineConfig 中 的 plugins 下，配置相关的自动导入

plugins: [
  vue(),
  AutoImport({
    // 自动导入 Vue 相关函数，如：ref, reactive, toRef 等
    imports: ['vue', 'vue-router', '@vueuse/core'],
    // 自动导入 vant 相关函数 API，如：showToast
    resolvers: [VantResolver()],
    vueTemplate: true,
    // 配置文件生成位置(false:关闭自动生成)
    dts: false,
  }),
  Components({
    // 自动导入 vant 组件
    resolvers: [VantResolver()]