使用 Pnpm 和 Vite 构建 Vue 项目

Vite 官网:https://cn.vitejs.dev/

本地 Node 环境

首先,确保已经安装了 Node.js 和 npm。可以在命令行中运行 node -vnpm -v 来检查它们是否已经正确安装:

image-20231210121140490

安装 Node.js 通常会自动附带安装 npm,所以你不需要单独安装 npm。只需确保 Node.js 版本符合要求即可。

安装 Pnpm 包管理工具

  1. 在命令行中执行以下命令来安装 pnpm:

    npm install -g pnpm
    

    这将全局安装 pnpm。

  2. 安装完成后,可以使用 pnpm 来代替 npm 进行包管理。例如,使用以下命令来安装项目依赖:

    pnpm install
    

    这将使用 pnpm 来安装项目所需的包,而不是使用默认的 npm。

使用 Vite 创建

确保 Node.js 版本和 Npm 版本符合 Vite 要求:

image-20231210130519238

按照以下步骤使用 Vite 创建 Vue 项目:

  1. 在命令行中执行以下命令创建一个 Vue 项目:

    pnpm create vite
    
  2. 输入你想要命名的项目名称:

    image-20231210122649023

  3. 使用箭头键上下移动光标到 Vue 上,并按下 Enter 键以进行选择 Vue 作为项目模板:

    image-20231210122721959

  4. 使用箭头键上下移动光标到 TypeScript 上,按下 Enter 键确认:

    image-20231210123216882

  5. 项目创建完成:

    image-20231210123337464

  6. 进入到项目目录中:

    cd your-project-name
    
  7. 安装项目依赖:

    pnpm install
    

    image-20231210123439053

  8. 启动项目,此时,Vite 将会启动开发服务器,并监听你的文件更改:

    pnpm run dev
    

    image-20231210123502455

  9. 在浏览器中访问 http://localhost:5173/ 来查看 Vue 应用程序:

    image-20231210123637920

  10. Vue 项目构建完成,项目目录如下:

    image-20231210123809498

猜你喜欢

转载自blog.csdn.net/qq_20185737/article/details/134907129