【vue3 搭建一个项目】

vue3 + vite 创建项目系列

第一章 使用vite项目的创建
第二章 改造文件目录，安装路由 vue router

---

---

前言

刚好最近工作需要，记录一下自己学习vue3的过程，以及开发过程中走过的坑。

---

一、Vite是什么？

Vite（法语意为 “快速的”，发音 /vit/，发音同 “veet”）是一种新型前端构建工具，能够显著提升前端开发体验。
主要构成为两部分：

• 一个开发服务器，它基于 原生 ES 模块 提供了 丰富的内建功能，如速度快到惊人的 模块热更新（HMR）。
• 一套构建指令，它使用 Rollup 打包你的代码，并且它是预配置的，可输出用于生产环境的高度优化过的静态资源。
  优势，相比较于webpack 启动速度快，热更新快。比webpack的nodjs构建快10-100倍

这里相比较之前，我使用过vue2的vue/cli，打包或者修改代码之后都需要半天等待时间。

二、搭建 Vite 项目

1、官方指令

兼容性注意
Vite 需要 Node.js 版本 >= 12.0.0。

使用 NPM:

$ npm init vite@latest

使用 Yarn:

$ yarn create vite

使用 PNPM:

$ pnpm create vite

你还可以通过附加的命令行选项直接指定项目名称和你想要使用的模板。例如，要构建一个 Vite + Vue 项目，运行:

# npm 6.x
npm init vite@latest my-vue-app --template vue

# npm 7+, 需要额外的双横线：
npm init vite@latest my-vue-app -- --template vue

# yarn
yarn create vite my-vue-app --template vue

# pnpm
pnpm create vite my-vue-app -- --template vue

查看 create-vite 以获取每个模板的更多细节：vanilla，vanilla-ts，vue，vue-ts，react，react-ts，preact，preact-ts，lit，lit-ts，svelte，svelte-ts。

2、开始操作

2.1 下载模板

2.2 安装依赖，运行项目

cd my-vue3-app
npm install
npm run dev

2.3 文件创建完成

---

总结