Vite+Vue3+Vant快速构建项目

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

Vite+Vue3+Vant快速构建项目_第1张图片

一、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.全家桶内置集成

  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

你可能感兴趣的:(大前端,vue.js,前端,cli,npm,javascript)