likes
comments
collection
share

使用Vite构建工具快速创建Vue项目(Vue3.0项目创建)

作者站长头像
站长
· 阅读数 30

和Webpack相比,Vite具有以下特点

1、快速的冷启动,不需要等待打包2、即时的热模块更新,真正的按需编译,不用等待整个项目编译完成

Vite构建Vue项目

前提:安装Node.js和Vite

第一步通过npm创建Vite项目

npm init vite-app 项目名称
# 例如
npm init vite-app HelloVue

第二步当项目创建成功后,cd到项目目录

cd 项目名称
# 例如
cd HelloVue

第三步安装项目依赖

npm install

第四步运行项目

npm run dev

使用Vite构建工具快速创建Vue项目(Vue3.0项目创建)

构建过程可能会发生的一些问题

>> npm install 命令很慢或者卡住不动,那是因为npm服务器在境外,必然是很慢的,这边提供两种方案去解决。

【方法一】
https://blog.csdn.net/qq_39595769/article/details/123055196

【方法二】
使用国内镜像(推荐)

(1) 先安装cnpm 
npm install -g cnpm --registry=https://registry.npm.taobao.org

(2) 然后使用cnpm命令
cnpm install

使用Vite构建工具快速创建Vue项目(Vue3.0项目创建)使用Vite构建工具快速创建Vue项目(Vue3.0项目创建)

2、npm run dev提示“vite不是内部或外部命令”,可能你还没安装vite,可以输入以下命令进行安装。

使用Vite构建工具快速创建Vue项目(Vue3.0项目创建)

npm install vite

使用Vite构建工具快速创建Vue项目(Vue3.0项目创建)

安装成功再次npm run dev应该就没问题了。

作者:TANKINGWeChat:sansure2016