使用vite构建vue3项目与官网构建区别

使用vite构建vue3项目

一、vue3官网文档的

https://www.javascriptc.com/vue3js/guide/installation.html#命令行工具-cli

---

---

• npm init vite-app
• cd
• npm install
• npm run dev

---

二、vite官网文档的

https://cn.vitejs.dev/guide/#trying-vite-online

---

---

• 1 对应路径cmd 输入 npm create vite@latest

• 2 Ok to proceed? 输入 y

• 3 Project name 输入 项目名称

• 4 Select a framework 选择 Vue

• 5 Select a variant 选择 JavaScript

• cd 项目名称；npm install；npm run dev

---

---

三、区别

vite文档构建项目，有一个vite.config.js配置文件，方便我们配置

四、项目解释

项目内容

>  node_modules      依赖
>  public            静态资源
>  src               原代码
<> index.html        入口文件（引入src/main.js）
{} package-lock.json
{} package.json
JS vite.config.js  配置文件

注意：
提示node版本在15+，查询node -v
安装：https://nodejs.org/zh-cn/download/

五、vscode代码高亮

其中安装扩展 Vue Language Features 就有代码提示和代码高亮