一、创建项目

二、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 关闭掉。

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

vue - - - - vite创建vue3项目（不使用TS）
vite创建vue3项目 vite官方文档 1. 使用指令创建项目 > npm create vite your-project-name > or > yarn create vi ...
Vite --- 创建Vue3项目
Vite 需要 Node.js 版本 >= 12.0.0. 1. node -v 查看node当前版本号 2. npm方式创建Vue3项目 npm init @vitejs/app 输入项目名 ...
使用vite创建vue3项目
一.创建vite+vue项目 1.在命令行输入以下创建语句.然后根据下图所示,输入项目名称并选择vue框架即可 npm create vite@latest 创建完项目后,根据提示依次输入三条命令: ...
使用vite创建vue项目
使用vite创建vue3项目 1.创建项目在想创建项目的目录进入cmd命令 npm create vite@latest 2.选择是否继续 Need to install the following ...
Vite创建Vue2项目
文章目录 1. 输入项目名称 2. 选择框架 3. 选择不同 4. 项目创建完成 5. 项目结构 6. 安装插件 7. 使用插件 8. 安装vue 9. 修改项目结构 10. 启动项目在 Vite创 ...
使用vite安装vue3项目，vue3安装router和vuex
目录安装vite/创建vue3项目安装router 安装vuex vite+vue3的axios配置及跨域安装vite/创建vue3项目推荐vite+vue3+elementplus教程,看这 ...
使用Vite创建Vue3+TS项目并整合Element Plus框架等一条龙服务
记录一下使用Vite创建Vue3+TS项目以及整合Element Plus框架,还有Less.Pinia.Vue-router.monaco-editor等插件或组件. 一.使用Vite创建Vue3+ ...
vue3学习路程1——创建vue3项目
创建vue3项目一.vue-cli版本对于 Vue 3,你应该使用 npm 上可用的 Vue CLI v4.5 作为 @vue/cli.要升级,你应该需要全局重新安装最新版本的 @vue/cli ...
vite创建ts项目定义变量无法类型检测
最初我在公司使用vite创建ts项目,我以为是我缺少什么插件但是我volar都安装,也把vuter也禁止了还是没用.(执行命令 npm init vite@latest) 然后我回家又自己笔记本试了 ...

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

一、创建项目

二、vite的快捷用法

三、安装Vue3开发工具

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

最新文章

热门文章