发布时间:2022-08-19 13:14
随着Vue3
和 Vite
版本的不断更新完善,开发体验有了质的飞跃。因此,越来越多的大厂也逐步拥抱 Vue3
。
利用Vite
脚手架工具可以很轻松生成以 Vue3
为模板的项目,但是作为Vue
全家桶的 vue-router
、vuex
、axios
等成员,需要自己一个一个去配置。于是便自行开发了本文讲到的 tive-cli
脚手架模板工具,只需短短几个命令便能快速生成配置健全的Vue3全家桶
项目,并且集成了VantUI
,内置了rem
移动端适配,真正做到了开箱即用
。
{
"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"
}
}
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
(
)搭配ref
和reactive
数据绑定、computed
计算属性、watch
监听、props
组件传参等等常用API的使用都有完整事例,以供参考。tive-cli
命令行工具前提:
node
和npm
已经安装可用。
vue-cli
脚手架工具一样,第一步全局安装 tive-cli
命令行脚手架工具。