windows下使用vite创建vue项目

参考

npm包下载慢的三种解决方案（附：yarn和pnpm设置镜像源）

1 下载安装配置nodejs

1.1 下载

下载地址：https://nodejs.cn/download
到NodeJS官网，选择Windows安装包即可。

1.2 安装

1. 在安装前先在安装路径下新建安装目录，nodejs（node安装目录）。
2. 安装时建议安装到其他盘而非系统盘，后续就一直点击next即可，这里选择安装到 D:\Software\Node\nodejs。
   安装完后，可在cmd命令行窗口，输入node -v查看nodejs版本

C:\Users\liuch>node -v
v16.19.1

1.3 配置

新建 node_global（全局模块）、node_cache（缓存文件） 。

配置nodejs的缓存文件夹和全局模块存放文件夹

• nodejs的缓存文件夹

npm config set cache "D:\Software\Node\node_cache"

• 全局模块存放文件夹

npm config set prefix "D:\Software\Node\node_global"

1.4 npm镜像加速配置

淘宝镜像域名更换说明：

原域名：https://registry.npm.taobao.org/ 在 2022.06.30 号正式下线和停止 DNS 解析
新域名：https://registry.npmmirror.com/

设置淘宝镜像的两个方法

1. 不改变原来的名称 只换下载资源的地址

// 查看当前下载地址
npm config get registry
// 设置淘宝镜像的地址
npm config set registry https://registry.npmmirror.com/
// 查看当前的下载地址
npm config get registry

2. 使用cnpm代替npm

npm install -g cnpm --registry=https://registry.npmmirror.com/
// 查看版本
cnpm -v
// 之后下载东西就用cnpm代替npm下载

相比较方案2，不用下载cnpm，安装命令依旧是npm安装

1.6 设置环境变量

2 Vite简单介绍

Vite是和vue cli一样的管理工具，使用它可以创建管理vue项目，同时它的速度也比vue cli快。

参考：Vite官方中文文档
兼容性注意：
Vite 需要 Node.js 版本 14.18+，16+。然而，有些模板需要依赖更高的 Node 版本才能正常运行，当你的包管理器发出警告时，请注意升级你的 Node 版本。

3 Vite创建vue项目

3.1 vite创建vue项目的命令

• NPM方式【推荐】

npm create vite@latest

• Yarn方式

yarn create vite

• PNPM方式

pnpm create vite

---

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

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

# npm 7+, extra double-dash is needed:
npm create 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

注意：通过指定模板方式创建的vue3项目和不使用模板是一样的，它只是减少了搭建的流程，而不指定模板的方式灵活性更好。

3.2 vite创建vue项目步骤

1. 执行创建vue命令

npm create vite@latest

2. 填写项目名称
3. 选择前端框架【选Vue】
4. 选择开发语言【TypeScript】

3.3 运行项目

1. 开发模式

npm run dev

2. 打包

npm run build

3. 本地预览

npm run build

npm run preview