Vue - vite 安装与创建 vue3 项目（使用 vite 创建 vue 项目）

阳光穿透心脏的1/2处 2022-09-07 14:51 385阅读 0赞

## 前言 ##

> 为什么使用 `vite`（官方解释）：[https://vitejs.cn/guide/why.html][https_vitejs.cn_guide_why.html]

它是一款由 [尤雨溪][Link 1] 开发的新工具，旨在代替 `webpack` ，利用浏览器现已支持 `ES6` 的基础，遇到 `import` 会发送一个请求去加载文件，`vite` 拦截这些请求做一些预编译，省去了冗长的打包时间，从而提升开发体验，具体详见官方网站。

## 第一步：安装vite ##

> 也可使用 `yarn` 进行安装，本篇基于 `npm` 进行。

在任意位置终端执行如下代码：

npm install -g create-vite-app

## 第二步：创建项目 ##

创建基于 `vite` 的 `vue3` 项目，执行以下代码：

# create-vite-app <project name>
    create-vite-app vite

![在这里插入图片描述][331a6c84d7c64985b5b4e1546d140679.png]  
依次执行如上提示的三条命令，它们分别是定位到该目录、安装依赖、编译运行：

cd vite
    npm install
    npm run dev

## 第三步：运行查看 ##

如下图所示即为成功，或许您刚刚也见证到了编译速度！  
![在这里插入图片描述][a111200a7af54b92b7a28b4c2c64180e.png]

## 写在后面 ##

企业正式项目不太建议使用，因为它不如 `webpack` 成熟稳定。

[https_vitejs.cn_guide_why.html]: https://vitejs.cn/guide/why.html
[Link 1]: https://baike.baidu.com/item/%E5%B0%A4%E9%9B%A8%E6%BA%AA/2281470?fr=aladdin
[331a6c84d7c64985b5b4e1546d140679.png]: /images/20220829/b6669a61d6b64cdcb94e6c58272c93f8.png
[a111200a7af54b92b7a28b4c2c64180e.png]: /images/20220829/b66c62622a9c4804bf8b8b54372c3cb6.png

发表评论取消回复

表情：

评论列表（有 0 条评论，385人围观）

还没有评论，来说两句吧...

相关阅读

相关 vue3 项目搭建教程（基于create-vue，vite，Vite + Vue）

vue3 项目搭建教程（基于create-vue，vite，Vite + Vue）目录一、搭建vue3 项目前提条件二、通过create-vue搭建vue3 项

偏执的太偏执、/ 2024年03月25日 20:16/ 0 赞/ 94 阅读

相关 vue3+vite项目中使用svg图标

vue3+vite项目中使用svg图标引言 1. vite-plugin-svg-icons插件安装配置 2. 下载sv

淡淡的烟草味﹌/ 2023年10月11日 21:56/ 0 赞/ 66 阅读

相关【Vue工程】001-Vite 创建 Vue-TypeScript 项目

【Vue工程】001-Vite 创建 Vue-Ts 项目文章目录【Vue工程】001-Vite 创建 Vue-Ts 项目一、环境二、创建项

约定不等于承诺〃/ 2023年09月26日 23:37/ 0 赞/ 5 阅读

相关 VUE_如何使用vite创建vue项目

安装Vite npm install -g create-vite-app 利用vite创建vue3项目 create-vite-app proj

柔情只为你懂/ 2022年12月26日 10:19/ 0 赞/ 230 阅读

相关 ①Vue3 使用Vite或@vue/cli 创建项目

Vue3 前言 Vue3.0的新特性创建项目 Vite @vue/cli -------------------- 写下

àì夳堔傛蜴生んèń/ 2022年11月22日 02:55/ 0 赞/ 233 阅读

相关 Vue3 Vite项目创建

安装 Vite npm install -g create-vite-app 利用 Vite 创建 Vue3 项目 // projectName 项目名称

浅浅的花香味﹌/ 2022年11月21日 03:37/ 0 赞/ 222 阅读

相关 vite 创建 vue3项目

npm i -g create-vite-app npm init @vitejs/app my-vue-app cd my-vue

港控/mmm°/ 2022年11月07日 00:57/ 0 赞/ 208 阅读

相关 vue3使用vite2移动端项目

用了vue3大半年了，一直都是用vue cli 基于webpack来搭建的项目，刚好有个移动端的项目，我想用vite版本的vue3来做，这里记录一下项目搭建的过程。 [Hom

刺骨的言语ヽ痛彻心扉/ 2022年10月09日 14:29/ 0 赞/ 236 阅读

相关 Vue - vite 安装与创建 vue3 项目（使用 vite 创建 vue 项目）

前言 > 为什么使用 `vite`（官方解释）：[https://vitejs.cn/guide/why.html][https_vitejs.cn_guide_why.

阳光穿透心脏的1/2处/ 2022年09月07日 14:51/ 0 赞/ 386 阅读

相关 vue3新建项目的过程（使用vite）

本文参考菜鸟教程[https://www.runoob.com/vue3/vue3-install.html][https_www.runoob.com_vue3_vue3-i

痛定思痛。/ 2022年09月04日 02:51/ 0 赞/ 165 阅读