用 Vite 创建Vue3项目和相关开发工具配置

目录

 一、创建项目

 二、vite的快捷用法

三、安装Vue3开发工具

---

• Vite热更新、打包构建速度更快，但目前周边生态还不如 Webpack 成熟，目前实际开发中还是以 Webpack 为主，但目前就学习 Vue3 语法来说，我们可以使用更轻量的 Vite (opens new window)。

• Webpack 和 Vite对比

  • Webpack：会将所有模块提前编译、打包，不管这个模块是否被用到，随着项目越来越大，打包启动速度自然越来越慢。
  • Vite：瞬间开启一个服务，并不会先编译所有文件，当浏览器用到某个文件时，Vite 服务会收到请求然后编译后响应到客户端。

 一、创建项目

1、新建一个文件夹，输入cmd打开小黑屏

2、先安装vite

npm create vite
# or
yarn create vite

3、输入项目名字，默认为 vite-project。

4、选择创建的项目类型，选择 vue 即可。

 5、选择js或ts,看个人需求，我选的js

 cd vite-project
  npm install

完整步骤如下

 最后  npm run dev，就可以启动项目啦

 二、vite的快捷用法

# 创建普通 Vue 项目
yarn create vite vite-demo --template vue

# 创建基于 TS 模板的 Vue 项目
yarn create vite vite-demo-ts --template vue-ts

三、安装Vue3开发工具

• 禁用 Vetur 插件，安装Vue Language Features(Volar) 插件。

• VSCode 代码片段插件：Vue VSCode Snippets，使用见文档 (opens new window)。

• Vue3 的 Chrome 调试插件也变了，下载链接 (opens new window)，注意安装后需要把之前的 Vue2 Devtools 关闭掉。