vite构建vue3项目的全过程记录

目录
  • 环境准备
  • 创建项目
  • 启动
  • 总结

环境准备

安装最新版本 @vuejs/app

yarn global add @vue/cli
# OR
npm install -g @vue/cli

升级到最新版本 @vitejs/app

yarn global upgrade @vue/cli
# OR
npm update -g @vue/cli

查看 vue 版本

vue -V

兼容性注意

Vite 需要 Node.js 版本 >= 12.0.0。

故切换 node 版本，可查看该文章：使用 nvs 管理本地 Node 版本。

创建项目

yarn create @vitejs/app <project-name>
# OR
npm init @vitejs/app <project-name>

选择一个框架

选择一种 ECMAScript 的实现

创建完成

启动

npm install
npm run dev
# OR
yarn
yarn dev

目录结构

总结

  • vite 依赖 node 12 版本及以上
  • 使用 vite 构建 vue 项目更加简洁，启动速度飞快

到此这篇关于vite构建vue3项目的文章就介绍到这了,更多相关vite构建vue3项目内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • 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项目的全过程记录

    目录 环境准备 创建项目 启动 总结 环境准备 安装最新版本 @vuejs/app yarn global add @vue/cli # OR npm install -g @vue/cli 升级到最新版本 @vitejs/app yarn global upgrade @vue/cli # OR npm update -g @vue/cli 查看 vue 版本 vue -V 兼容性注意 Vite 需要 Node.js 版本 >= 12.0.0. 故切换 node 版本,可查看该文章:使用 nv

  • 如何使用vite搭建vue3项目详解

    目录 一:npm构建 二:更改http://localhost:3000/到8080与Network路由访问 三:配置vite别名(npm install @types/node --save-dev) 四 :路由(npm install vue-router@4) 五:vuex(npm install vuex@next --save) 六:Eslint(可选)(npm install --save-dev eslint eslint-plugin-vue) 七:less/sass(可选)(n

  • Vite创建Vue3项目及Vue3使用jsx详解

    Vite创建Vue3项目及Vue3使用jsx详解

    目录 Vite创建Vue3项目 1. 输入项目名称 2. 选择框架 3. 选择不同的vue 4. 项目创建完成 5. 项目结构 6. 启动项目 Vue3中使用jsx 1. 安装插件 2. 注册插件 3. 使用插件 注意 总结 Vite创建Vue3项目 Vite 需要 Node.js 版本 >= 12.0.0.(node -v 查看自己当前的node版本) 使用 yarn:yarn create @vitejs/app 使用 npm:npm init @vitejs/app 1. 输入项目名称 这

  • SpringBoot创建多模块项目的全过程记录

    SpringBoot创建多模块项目的全过程记录

    构建项目 我们采用IntelliJ IDEA工具来创建一个Maven项目,项目的pom.xml要添加对应SpringBoot的配置,因为Maven多模块项目内的模块并不能独立的存在,必须有一个介质来包含,项目结构如下下图所示 我们创建的Maven项目结构如上图所示,pom.xml内我们对应的添加了对SpringBoot的支持,因为我们需要使用SpringBoot来作为项目基本框架,并在pom.xml配置文件引入了Web模块的支持,所以介质项目内的Module都会用于Web依赖 我们在介质Mave

  • 利用Vue Native构建移动应用的全过程记录

    利用Vue Native构建移动应用的全过程记录

    目录 前言 Vue Native 的特性 声明式渲染 双向绑定 Vue.js 生态系统的丰富性 编译为 React Native 设置开发环境 创建一个Vue Native项目 Vue Native UI组件 视图组件 Image组件 TextInput组件 NativeBase UI 组件 双向数据绑定 导航和路由 状态管理 访问设备 API 总结 前言 Vue Native 是一个 JavaScript 框架,旨在使用 JavaScript 构建可以在 Android 和 iOS 上运行的跨

  • Flutter构建自定义Widgets的全过程记录

    Flutter构建自定义Widgets的全过程记录

    目录 一.组合widget实现 二.通过自定义CustomPainter实现widgets 三.饼状图piechart.dart代码展示 四.实际效果图,eg: 附:Flutter中父widget调用子widget的方法 总结 一.组合widget实现 1.android和flutter自定义控件对比 Android中,一般会继承View或已经存在的某个控件,然后覆盖draw方法来实现自定义View.在Flutter中,一个自定义widget通常是通过组合其它widget来实现的,而不是继承.下

  • Vue3+script setup+ts+Vite+Volar搭建项目

    Vue3+script setup+ts+Vite+Volar搭建项目

    目录 使用 Vite 创建 vue + ts 项目 Vue 3 的三种语法 Option API Composition API script setup(Composition API 的语法糖) 安装 Volar 结尾 好久没有写了,最近看到Vue3.2 发布了,害,又要开始卷了么. 其实我自己本身还没有使用过Vue3 做过实际的项目开发,然鹅又出新东西了--, 新时代农民工真的是左手工作,右手游戏,还要用jio去学习呢. 什么? 你说谈对象? xswl,我特么一个农民工也配谈对象? 不卷不

  • 如何用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搭建Vue3+ElementUI-Plus项目的全过程

    利用Vite搭建Vue3+ElementUI-Plus项目的全过程

    目录 创建项目 初始化项目 添加依赖并运行 添加路由 添加依赖 添加路由配置文件 在main.js中添加路由 添加Home页面进行测试 添加ElementUI-Plus 安装element-plus依赖 引入element-plus依赖 引入Element Icon 添加依赖 修改element的主题颜色 总结 本文主要记录使用Vite搭建一个Vue3+ElementUI-Plus,以及集成Vue Router的过程.本次搭建过程的Nodejs版本为 V16.14.2 创建项目 初始化项目 使用

  • 详解vite+ts快速搭建vue3项目以及介绍相关特性

    vite 尤大在 Vue 3.0 beta 直播中推荐了 vite 的工具,强调:针对Vue单页面组件的无打包开发服务器,可以直接在浏览器运行请求的 vue 文件 很新颖,这篇博客用它来搭建一个 vue3 的项目试试 Vite 是面向现代浏览器,基于原生模块系统 ESModule 实现了按需编译的 Web 开发构建工具.在生产环境下基于 Rollup 打包 快速冷启动服务器 即时热模块更换(HMR) 真正的按需编译 node >= 10.16.0 搭建 使用 vite 搭建项目 npm init

随机推荐