使用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（<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快速构建项目的资料请关注我们其它相关文章！

赞 (0)

相关推荐

  • vitejs预构建理解及流程解析

    vitejs预构建理解及流程解析

    目录 引言 为啥要预构建 预构建的流程 1. 查找依赖 2. 对查找到的依赖进行构建 缓存与预构建 总结 引言 vite在官网介绍中,第一条就提到的特性就是自己的本地冷启动极快.这主要是得益于它在本地服务启动的时候做了预构建.出于好奇,抽时间了解了下vite在预构建部分的主要实现思路,分享出来供大家参考. 为啥要预构建 简单来讲就是为了提高本地开发服务器的冷启动速度.按照vite的说法,当冷启动开发服务器时,基于打包器的方式启动必须优先抓取并构建你的整个应用,然后才能提供服务.随着应用规模的增大

  • vite构建项目并支持微前端

    目录 基础配置 支持微前端构建 其他说明 1. 老旧浏览器的支持 2. 关于 TypeScript 的说明 3. 对接 CDN 4. 构建出错 4.1 找不到包 4.2 请求超时 4.3 导入模块出错 小结 得益于 esbuild 的超高性能,vite 在诞生之初就备受关注,且一直保持着活跃的开发迭代.截至目前,vite 已经迭代到了 2.7.10 版本,各方面也基本具备了在生产使用的条件.这段时间,我在项目中尝试了使用 vite 进行打包构建,本文就是这次构建的过程记录. 基础配置 首先使用v

  • electron-vite新一代electron开发构建工具

    目录 前言 electron-vite 是什么 特性 安装 开发&编译 推荐项目目录 开始学习 配置 配置文件 配置智能提示 预设配置 基于主进程的编译项预设: 基于preload脚本的编译项预设: 基于渲染进程的编译项预设: 配置问题 如果 Electron 具有多窗口应该如何配置? 结语 前言 得益于 Vite 卓越的前端开发体验,越来越多的 Electron 项目也开始应用它来构建开发.翻阅各种社区资源可以发现很多基于 Vite 搭建的 Electron 开发模板,但都存在着一些共同的问题

  • 如何用Vite构建工具快速创建Vue项目

    如何用Vite构建工具快速创建Vue项目

    目录 和Webpack相比,Vite具有以下特点 Vite构建Vue项目 构建过程可能会发生的一些问题 总结 和Webpack相比,Vite具有以下特点 1.快速的冷启动,不需要等待打包 2.即时的热模块更新,真正的按需编译,不用等待整个项目编译完成 Vite构建Vue项目 前提:安装Node.js和Vite 第一步通过npm创建Vite项目 npm init vite-app 项目名称 # 例如 npm init vite-app HelloVue 第二步当项目创建成功后,cd到项目目录 cd

  • Vite+Electron快速构建VUE3桌面应用的实现

    Vite+Electron快速构建VUE3桌面应用的实现

    目录 一. 简介 二. 创建一个Vite项目 1. 安装 vite 2. 创建项目 3. 进入且运行 三. 配置Electron 1. 官方文档 2. 安装 3. 配置文件 四. 运行 五. 最后 一. 简介 首先,介绍下vite和Electron. Vite是一种新型前端构建工具,能够显著提升前端开发体验.由尤大推出,其发动态表示"再也回不去webpack了..." Electron是一个使用 JavaScript.HTML 和 CSS 构建桌面应用程序的框架. 嵌入Chromium

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

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

    目录 引言 一.vue3全家桶模板介绍 1.版本依赖 2.全家桶内置集成 二.安装 tive-cli 命令行工具 三.生成项目 四.项目体验 引言 随着Vue3 和 Vite 版本的不断更新完善,开发体验有了质的飞跃.因此,越来越多的大厂也逐步拥抱 Vue3. 利用Vite 脚手架工具可以很轻松生成以 Vue3 为模板的项目,但是作为Vue全家桶的 vue-router.vuex.axios等成员,需要自己一个一个去配置.于是便自行开发了本文讲到的 tive-cli 脚手架模板工具,只需短短几个

  • vite+vue3.0+ts+element-plus快速搭建项目的实现

    vite+vue3.0+ts+element-plus快速搭建项目的实现

    vite 出了 2.x 版本,抱着学一学的心态决定出个简单的项目,结合 element-plus,以及将会成为每位前端必会的 typescript,实现了如下内容. vite是一个由原生 ESM 驱动的 Web 开发构建工具.在开发环境下基于浏览器原生 ES imports 开发,在生产环境下基于 Rollup 打包. vite 作用 快速的冷启动:不需要等待打包操作: 即时的热模块更新:替换性能和模块数量的解耦让更新飞起: 真正的按需编译:不再等待整个应用编译完成,这是一个巨大的改变. 使用的

  • vue3.0+vant3.0快速搭建项目的实现

    vue3.0+vant3.0快速搭建项目的实现

    目录 一.项目的搭建 二.vue3体验+vant引入 2020年09月18日,vue.js 3.0正式发布,去网上看了看关于3.0的教程都不够完整,但其实vuecli最新版已经支持了vue3.0项目的快速搭建,这篇文章将带你了解一下vue3.0有哪些新的改变以及如何快速搭建vue3.0项目. 一.项目的搭建 1.首先,nodejs的安装不用我多说了吧,nodejs官网地址. 2.既然vuecli最新版已经可以快速搭建3.0了,那怎么升级到最新版呢?vue-cli官网地址,不知道vue-cli版本

  • 详解vue-cli快速构建项目以及引入bootstrap、jq

    详解vue-cli快速构建项目以及引入bootstrap、jq

    vue-cli脚手架工具快速构建项目架构: ..首先默认了有已经安装了node... npm install -g vue-cli                   全局安装vue-cli vue init webpack cnm                  生成项目名为cnm的的项目模板,cnm自定义 npm install                                   到cnm文件夹中打开Git bash或者命令窗口初始化安装依赖 此时文件夹目录应该是这样 然后

  • 手把手教你使用Django + Vue.js 快速构建项目

    手把手教你使用Django + Vue.js 快速构建项目

    目录 1. 前言 2. 环境准备 3. 创建 Django 项目 4. 创建 Vue.js 前端项目 5. 解决跨域问题 6. 整合 Django 和 Vue.js 前端 1. 前言 本篇将基于Django + Vue.js,手把手教大家快速的实现一个前后端分离的Web项目. 2. 环境准备 Python 3.6.1 Mysql 5.7.23 Pycharm (专业版) Node 3. 创建 Django 项目 创建完成后,目录结构如下所示 使用 Navicat 工具创建数据库 DjangoVu

  • Java中如何快速构建项目脚手架的实现

    Java中如何快速构建项目脚手架的实现

    目录 1 前言 2 微服务项目准备 3 脚手架构建 3.1 项目正常启动 && 测试用例正常 3.2 在项目的根pom中加入以下maven插件配置 3.3 执行archetype插件 3.4 执行安装命令 3.5 将smilehappiness-project-template deploy到私服 4 基于脚手架生成新的项目 4.1 添加脚手架 4.2 创建新项目 4.3 命令行基于脚手架生成新的项目 1 前言 项目中,目前主流的当然是微服务项目.为了应对高并发,以及保证自己的服务比较稳定

  • Vue3中Vuex状态管理学习实战示例详解

    目录 引言 一.目录结构 二.版本依赖 三.配置Vuex 四.使用Vuex 引言 Vuex 是 Vue 全家桶重要组成之一,专为 Vue.js 应用程序开发的 状态管理模式 + 库 ,它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化. 一.目录结构 demo/ package.json vite.config.js index.html public/ src/ api/ assets/ common/ components/ store/ index.

  • vite2.0+vue3移动端项目实战详解

    一.涉及技术点 vite版本 vue3 ts 集成路由 集成vuex 集成axios 配置Vant3 移动端适配 请求代理 二.步骤 vite+ts+vue3只需要一行命令 npm init @vitejs/app my-vue-app --template vue-ts 配置路由 npm install vue-router@4 --save 在src下新建router目录,新建index.ts文件 import { createRouter, createWebHashHistory, Ro

  • vue3中vue.config.js配置及注释详解

    vue3中vue.config.js配置及注释详解

    目录 报错 打包时提示文件过大,配置解决方案,如下 总结 报错 asset size limit: The following asset(s) exceed the recommended size limit (244 KiB).This can impact web performance.entrypoint size limit: The following entrypoint(s) combined asset size exceeds the recommended limit

  • Android 实现夜间模式的快速简单方法实例详解

    Android 实现夜间模式的快速简单方法实例详解

    ChangeMode 项目地址:ChangeMode Implementation of night mode for Android. 用最简单的方式实现夜间模式,支持ListView.RecyclerView. Preview Usage xml android:background="?attr/zzbackground" app:backgroundAttr="zzbackground"//如果当前页面要立即刷新,这里传入属性名称 比如 R.attr.zzb

随机推荐