使用Vite+Vue3+Vant全家桶快速构建项目步骤详解

Dulcea ·
更新时间:2024-11-10
· 1063 次阅读

目录

引言

一、vue3全家桶模板介绍

1.版本依赖

2.全家桶内置集成

二、安装 tive-cli 命令行工具

三、生成项目

四、项目体验

引言

随着Vue3 和 Vite 版本的不断更新完善,开发体验有了质的飞跃。因此,越来越多的大厂也逐步拥抱 Vue3。

利用Vite 脚手架工具可以很轻松生成以 Vue3 为模板的项目,但是作为Vue全家桶的 vue-router、vuex、axios等成员,需要自己一个一个去配置。于是便自行开发了本文讲到的 tive-cli 脚手架模板工具,只需短短几个命令便能快速生成配置健全的Vue3全家桶项目,并且集成了VantUI,内置了rem移动端适配,真正做到了开箱即用。

一、vue3全家桶模板介绍 1.版本依赖 { "dependencies": { "axios": "^0.21.1", "vant": "^3.0.7", "vue": "^3.2.24", "vue-router": "^4.0.4", "vuex": "^4.0.0" }, "devDependencies": { "@vitejs/plugin-vue": "^1.1.4", "@vue/compiler-sfc": "^3.2.24", "autoprefixer": "^10.2.4", "lib-flexible": "^0.3.2", "postcss-loader": "^4.1.0", "postcss-px2rem": "^0.3.0", "postcss-px2rem-exclude": "^0.0.6", "sass": "^1.32.8", "vite": "^2.0.0" } } 2.全家桶内置集成

vue-router路由,配置了路由懒加载,全局路由守卫,组合式API中路由跳转,参数获取。

vuex状态管理,配置命名空间(namespaced)的业务模块(modules),vuex actions异步状态流管理。

axios实例全局引用。

vant移动端组件库。

lib-flexible+rem移动端适配,默认为375px设计稿的适配,若是750px的设计稿可调整remUnit的值,轻松适配。

sass预处理器。

vue.config.js本地跨域处理,更改对应的url和path即可使用。

nodemon动态监听vue.config.js,有更改自动重启服务,执行npm run dev时生效。

Composition API(<script setup>)搭配ref和reactive数据绑定、computed计算属性、watch监听、props组件传参等等常用API的使用都有完整事例,以供参考。

二、安装 tive-cli 命令行工具

前提:node和npm已经安装可用。

像使用vue-cli脚手架工具一样,第一步全局安装 tive-cli 命令行脚手架工具。

npm i -g tive-cli # or cnpm i -g tive-cli 三、生成项目 tive create vue3-demo

执行次命令后,会出现命令行交互式选择,可使用上(↑)下(↓)箭头进行选择,如下:

E:\dev>tive create vue3-demo ? 请选择要创建的脚手架或Demo (Use arrow keys) > vue2.0+VantUI移动端Demo vue3.0+vite2+VantUI移动端Demo

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

回车(enter)确认后,会输出:

E:\dev>tive create vue3-demo ? 请选择要创建的脚手架或Demo vue3.0+vite2+VantUI移动端Demo { tel: 'tive6/tive-vue3-vite-demo' } √ tive-vue3-vite-demo 下载成功 Done. Now run: cd vue3-demo npm install npm start

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

cd vue3-demo npm install npm start

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

四、项目体验

首页展示:

tive-vue3-vite-demo

Demo演示:地址,进入后可以进行交互体验。

附带上vue2.0+VantUI移动端模板演示Demo地址:tive-vue2-mobile-demo

以上就是使用Vite+Vue3+Vant全家桶快速构建项目步骤详解的详细内容,更多关于Vite+Vue3+Vant快速构建项目的资料请关注软件开发网其它相关文章!



VUE vant

需要 登录 后方可回复, 如果你还没有账号请 注册新账号