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

目录

• 引言
• 一、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（