vue3+ts+vant的个人搭建方式（学习中）

最近vite更新频繁，现版本最高vite2，确实更高更快更强，可惜，run build报错，尝试了一下vue3框架的各种搭建模式，现总结以下适合移动端的vue3+ts+vant搭建方式，避免后续走弯路

创建vue3+ts项目

vue脚手架搭建（这里不选择用vite，因为不稳定，等待尤大后续更新出稳定版本）

npm install -g @vue/cli

创建vue3+ts项目

vue create vue3-project

创建项目时注意勾选自己需要的各种选项

引入ui样式框架，这里选择vant

vant3.0文档链接

安装vant

# Vue 3 项目，安装 Vant 3：
npm i vant@next -S

在 Vite 中无须考虑按需引入的问题。Vite 在构建代码时，会自动通过 Tree Shaking 移除未使用的 ESM 模块。而 Vant 3.0 内部所有模块都是基于 ESM 编写的，天然具备按需引入的能力。 现阶段遗留的问题是，未使用的组件样式无法被 Tree Shaking 识别并移除，后续我们会考虑通过 Vite 插件的方式进行支持

main.ts使用

import { createApp } from 'vue'
import App from './App.vue'
import Vant from 'vant'
import 'vant/lib/index.css';

createApp(App).use(Vant).mount('#app')

项目运行

npm run dev

测试vant是否引入成功(查看组件样式是否正确显示即可)

创建TestDemo.vue组件并引用

使用van-cell-group组件

<van-cell-group>
  <van-cell  value="内容"></van-cell>
  <van-cell  value="内容"></van-cell>
</van-cell-group>

注释掉App.vue中的基础样式

项目编译

run build

测试项目打包结果

使用nodejs的http-server模块直接在dist文件中启用建议服务检测 进入dist根目录

http-server