vue3+vite+vant搭建项目

Posted 2023-04-23

参考技术A 摸鱼不如学vue3，总结一下带薪学习的收获

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

npm i vant@next -S

注意在使用的时候要在main.js中导入相关的组件（之前忘了导入，试半天没效果= =）

此处用到alias，所以把vite配置相关贴出来

npm install vue-router@next
tip:之前没装@next版本，路由是3.x版本的，不支持相关的api，所以要注意在vue3时要装@next，也就是4.x版本的路由

新建router文件夹及index.js

main.js中使用router

使用router
这里我导入router/index.js创建好的路由并且调用push，看到很多帖子上说

这样的方式可以，但是我试过会报错，useRouter()是个null，这个问题我不知道为何，有知道的可以告知我一下哈

我的router使用：

npm install typescript

根目录添加tsconfig.json

修改main.js为main.ts 以及index中的引入也改为main.ts

至此已经可以写写静态和路由跳转，axios和vuex的集成在后面再补充吧

之前使用非vite项目集成tsx，发现报错React is not defined，看到这个报错感到十分头疼，抱着试试的想法百度了下，居然还真找到了解决方法
具体可以参考这个 https://blog.csdn.net/weixin_44441196/article/details/118727593
大概就是要装vite版本的plugin-vue-jsx然后vite.config.js配置一下，就可以愉快地写tsx了！

Vite+Vue3+Vant快速构建项目

参考技术A

随着 Vue3 和 Vite 版本的不断更新完善，开发体验有了质的飞跃。因此，越来越多的大厂也逐步拥抱 Vue3 。
利用 Vite 脚手架工具可以很轻松生成以 Vue3 为模板的项目，但是作为 Vue 全家桶的 vue-router 、 vuex 、 axios 等成员，需要自己一个一个去配置。于是便自行开发了本文讲到的 tive-cli 脚手架模板工具，只需短短几个命令便能快速生成配置健全的 Vue3全家桶 项目，并且集成了 VantUI ，内置了 rem 移动端适配，真正做到了 开箱即用 。

执行次命令后，会出现命令行交互式选择，可使用上（ ↑ ）下（ ↓ ）箭头进行选择，如下：

提示： 该脚手架内置了 Vue2.0 和 Vue3.0 两个版本所对应的 Vue全家桶 模板，可根据项目需要自行选择。

回车（ enter ）确认后，会输出：

接下来就可以按照提示的命令进行操作：

不出意外项目就成功启动了。

欢迎访问： 天问博客