置顶

Vite+Vue3+Vant快速构建项目


字数:968 阅读时长:3分钟 阅读:85

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

Vite + Vue3

一、vue3全家桶模板介绍

1.版本依赖

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
{
"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.全家桶内置集成

  1. vue-router路由,配置了路由懒加载,全局路由守卫,组合式API中路由跳转,参数获取。
  2. vuex状态管理,配置命名空间(namespaced)的业务模块(modules),vuex actions异步状态流管理。
  3. axios实例全局引用。
  4. vant移动端组件库。
  5. lib-flexible+rem移动端适配,默认为375px设计稿的适配,若是750px的设计稿可调整remUnit的值,轻松适配。
  6. sass预处理器。
  7. vue.config.js本地跨域处理,更改对应的urlpath即可使用。
  8. nodemon动态监听vue.config.js,有更改自动重启服务,执行npm run dev时生效。
  9. Composition API<script setup>)搭配refreactive数据绑定、computed计算属性、watch监听、props组件传参等等常用API的使用都有完整事例,以供参考。
  10. 配置了 tive-cli 自动化执行shell脚本功能。提示: tive-cli 工具需要使用 npm i -g tive-cli 全局安装。
  11. 自动化打包和zip压缩。
  12. 提供了 WebAssemblyWasm)使用案例,以及对应的交互展示页面。

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

前提:nodenpm已经安装可用。

  • 像使用vue-cli脚手架工具一样,第一步全局安装 tive-cli 命令行脚手架工具。
1
2
3
npm i -g tive-cli
# or
cnpm i -g tive-cli

三、生成项目

1
tive create vue3-demo

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

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

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

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

1
2
3
4
5
6
7
8
9
10
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

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

1
2
3
4
5
cd vue3-demo

npm install

npm start

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

四、项目体验

  1. 项目展示:tive-vue3-vite-demo

  2. Demo演示:地址,进入后可以进行交互体验。
  3. 附带上vue2.0+VantUI移动端模板演示Demo地址:tive-vue2-mobile-demo

五、注意事项

  • px2rem不能转HTML中的内联样式,所以样式请写在css单独文件中或组件的style区域中,详细说明请查看:Vue项目配置rem移动端适配

《Vue3学习与实战》系列


欢迎访问:天问博客

本文作者: Tiven
发布时间: 2021-12-08
最后更新: 2022-04-26
本文标题: Vite+Vue3+Vant快速构建项目
本文链接: https://www.tiven.cn/p/de241e23/
版权声明: 本作品采用 CC BY-NC-SA 4.0 许可协议进行许可。转载请注明出处!
欢迎留言,提问 ^_^