手把手教你轻松使用pnpm建立Vue3项目（包含配置）

目录

下载pnpm管理器

我们为什么要使用 pnpm？

下载完成

使用pnpm创建项目

项目建立成功出现的界面

项目精细化配置

1.删除不要的组件，将标号文件夹内的文件全部清空，只留一个空架子。

2.打开App.vue进行代码修改，修改之后效果如下

3.打开终端

4.husky：Git钩子（Git Hooks）管理器

5.安装 sass 依赖

6.Pinia - 构建用户仓库 和 持久化

7.axios-数据交互

8.element-ui组件配置

---

下载pnpm管理器

前提：在安装 pnpm 之前，确保你已经安装了 Node.js 和 npm。

介绍:npm install -g pnpm 这条命令是用来全局安装 pnpm（Performant NPM）的，pnpm 是一个高效的包管理工具，旨在解决 npm 和 yarn 在处理依赖和安装速度上的不足。

我们为什么要使用 pnpm？

• 速度快：pnpm 的安装速度通常比 npm 和 yarn 快，尤其是在大型项目中。
• 节省空间：通过智能地共享依赖项，pnpm 可以在多个项目中节省大量磁盘空间。
• 兼容性好：pnpm 遵循 npm 和 yarn 的大部分约定，因此你可以很容易地在它们之间切换。
• 安全性：pnpm 提供了内置的安全措施，比如防止在 node_modules 中执行不受信任的代码。

找到命令提示符，以管理员身份运行。

切换到想要建立项目的目录，输入以下指令。

npm install -g pnpm

• npm: 这是 Node.js 的包管理工具，用于安装、发布、管理 Node.js 包。
• install: 这是 npm 的一个子命令，用于安装包。
• -g: 这是一个全局安装的标志。使用 -g 标志后，安装的包会被放置在全局路径中，使得你可以在系统的任何地方通过命令行访问它。如果不使用 -g，包会被安装在当前工作目录下的 node_modules 文件夹中。
• pnpm: 这是要安装的包的名称。pnpm 是一个快速、节省磁盘空间的包管理工具，它通过硬链接和符号链接来共享相同版本的依赖包，从而减少了磁盘空间的使用，并加快了安装速度。

下载完成

我已经下载过一遍了，所以这里显示的下载内容较少。这里做个演示。

使用pnpm创建项目

输入指令下载vue3项目

# 使用 pnpm 包管理工具创建一个新的 Vue.js 项目
pnpm create vue

项目配置过程：

接下来的一系列问题（以√标记）是 Vue CLI 的交互式提示，旨在帮助我们配置新项目。

• 项目名称：输入项目名称。
• 包名称：npm 包的名称（注意，通常包名称应避免使用小写字母开头的单个单词，以防止与现有的 npm 包冲突）。
• TypeScript 语法：是否使用 TypeScript（一种 JavaScript 的超集，添加了静态类型和基于类的面向对象编程）。
• JSX 支持：JSX 是一种 JavaScript 的语法扩展，允许在 JavaScript 代码中写类似 HTML 的标签。
• Vue Router：Vue Router 是 Vue.js 的官方路由管理器，用于构建单页面应用（SPA）。
• Pinia：Pinia 是 Vue.js 的状态管理库，是 Vuex 的下一代替代品。
• Vitest：Vitest 是一个为 Vue 生态系统设计的测试框架。用于单元测试。
• 端到端测试工具：端到端测试工具。
• ESLint：ESLint 是一个用于识别和报告在 JavaScript 代码中发现的模式的工具，有助于保持代码质量和一致性。
• Prettier：Prettier 是一个代码格式化工具，支持多种语言。

以上是配置选择的功能，大家选择自己需要的。以下是我的选择

成功出现下面绿色的字符串，说明项目创建成功

1. cd Test
   • 这个命令用于更改当前工作目录到名为 Test 的目录。
2. pnpm install
   • 在 Vue.js 项目中，这个命令用于安装项目所需的所有依赖项。pnpm 是一个高效的包管理工具，它会读取项目根目录下的 pnpm-lock.yaml 文件（如果存在的话）来确保安装的依赖项版本与项目其他部分兼容。如果 pnpm-lock.yaml 文件不存在，pnpm 会根据 package.json 文件中列出的依赖项来安装它们。
3. pnpm format

   • 这个命令通常不是 Vue CLI 项目的标准命令之一。然而，如果在项目中安装了 Prettier 或类似的代码格式化工具，并且将其配置为可以通过 pnpm format 命令运行，那么这个命令将用于格式化项目中的代码。如果 pnpm format 命令在项目中未定义，可能需要检查 package.json 文件中的 scripts 部分，看看是否有定义这个命令，或者可能需要直接使用 prettier 命令来格式化代码。

   • 注意：如果 pnpm format 不是项目中的有效命令，并且想使用 Prettier，可以直接运行 npx prettier --write .（这会格式化当前目录及其子目录中的所有文件）或根据项目配置调整命令。

   • 

4. pnpm dev：打开vue3界面

项目建立成功出现的界面

项目精细化配置

1.删除不要的组件，将标号文件夹内的文件全部清空，只留一个空架子。

2.打开App.vue进行代码修改，修改之后效果如下

<router-view /> 只是一个占位符，它本身不会渲染任何内容，而是根据路由配置动态地渲染匹配的组件。

3.打开终端

选择Git Bash之后的命令在这里面写

4.husky：Git钩子（Git Hooks）管理器

Git Hooks允许开发者在Git操作的特定阶段（如提交commit、推送push等）运行自定义脚本，而Husky则提供了一个便捷的接口来配置和管理这些钩子。

pnpm dlx husky-init && pnpm install

 pnpm dlx husky-init && pnpm install

这个命令实际上包含两个命令，通过&&连接。&&是Shell的一个操作符，用于连接两个命令，仅当第一个命令成功执行（即返回状态码为0）时，才会执行第二个命令。

• pnpm dlx husky-init:这个命令使用pnpm dlx（Download and eXecute）来下载并执行husky-init包。husky-init是一个用于初始化Husky配置的实用程序。它会自动为你的项目设置Git钩子，并创建一个配置文件（如.huskyrc或husky.config.js），你可以在这个文件中配置Husky的行为。
• pnpm install:这个命令用于安装项目依赖。它会读取package.json文件中的dependencies和devDependencies字段，并从npm仓库（或你配置的任何其他仓库）下载并安装这些依赖。如果你的项目是一个monorepo，pnpm还会处理workspace的依赖安装。

git init

git init:这个命令用于初始化一个新的Git仓库。如果在一个目录中运行此命令，Git会在这个目录中创建一个.git子目录，用于存储仓库的所有元数据和信息。如果目录已经是一个Git仓库（即已经包含.git目录），则此命令不会执行任何操作。

git add .

 git add .:这个命令用于将当前目录（.代表当前目录）下的所有更改（新文件、修改过的文件、删除的文件等）添加到Git的暂存区（staging area）。这是提交（commit）更改到仓库之前的准备步骤。

git commit -m '描述性信息'

git commit -m '描述性信息'：将暂存区的更改提交到本地版本库，并附上一个描述性的消息。

pnpm i lint-staged -D

这条命令的作用是使用pnpm将lint-staged作为开发依赖安装到你的项目中，以便在开发过程中利用它来优化代码质量和检查流程。 

配置 `package.json`

{
  // ... 省略 ...
  "lint-staged": {
    "*.{js,ts,vue}": [
      "eslint --fix"
    ]
  }
}

{
  "scripts": {
    // ... 省略 ...
    "lint-staged": "lint-staged"
  }
}

修改 .husky/pre-commit 文件

5.安装 sass 依赖

pnpm add sass -D

6.Pinia - 构建用户仓库 和 持久化

首先，安装插件pinia-plugin-persistedstate，这是一个为 Pinia 状态管理库提供的插件，用于持久化存储 Pinia 的状态。Pinia 是 Vue.js 生态系统中的一个状态管理库，它提供了比 Vuex 更简单、更灵活的API。pinia-plugin-persistedstate 插件允许你将 Pinia 的状态保存到 localStorage、sessionStorage 或其他持久化存储中，以便在页面刷新或重新加载时恢复状态。

pnpm add pinia-plugin-persistedstate -D

main.js修改

​
import { createApp } from 'vue'
import { createPinia } from 'pinia'
import persist from 'pinia-plugin-persistedstate'
import App from './App.vue'
import router from './router'

const app = createApp(App)

app.use(createPinia().use(persist))
app.use(router)
app.mount('#app')

​

使用：在stores文件夹下面建一个小文件user.js

// 从pinia库中导入defineStore函数，用于定义一个新的store
import { defineStore } from 'pinia';
// 从vue库中导入ref函数，用于创建一个响应式引用
import { ref } from 'vue';

// 定义一个名为useUserStore的store，用于管理用户相关的状态
export const useUserStore = defineStore(
  // store的唯一标识符，通常用于调试和持久化
  'user',
  // 一个函数，返回一个包含state和actions的对象
  () => {
    // 使用ref创建一个响应式的token变量，初始值为空字符串
    const token = ref(''); 
    
    // 定义一个设置token的函数，该函数接收一个参数t，并将其赋值给token.value
    // 这样做可以确保token是一个响应式引用，并且当它的值改变时，任何依赖于它的Vue组件都会重新渲染
    const setToken = (t) => (token.value = t); 

    // 返回包含token和setToken的对象，这样它们就可以在store的外部被访问和使用了
    return { token, setToken };
  },
  // store的配置对象，这里启用了持久化功能
  {
    // 设置persist为true以启用持久化，这意味着store的状态将在页面刷新或重新加载时被保存和恢复
    // 注意：这里只是简单地启用了持久化，但没有指定具体的持久化策略（如存储位置、密钥等）
    persist: true // -->持久化
  }
  // 注意：上面的代码示例中，直接使用{ persist: true }可能不会按预期工作，
  // 因为Pinia本身并不直接支持持久化配置。持久化通常是通过插件（如pinia-plugin-persistedstate）来实现的。
  // 因此，需要先安装该插件，并在Pinia配置中正确地使用它。
);

7.axios-数据交互

Axios是一个基于Promise的网络请求库，它可以在浏览器和Node.js环境中使用。

pnpm add axios

8.element-ui组件配置

官方文档

安装 | Element Plus

pnpm install element-plus

安装 Element Plus，然后就可以使用打包工具了

pnpm add element-plus

插件安装（我使用的是全局导入，但是这个插件可以实现components文件夹里面是组件互相导入

pnpm add -D unplugin-vue-components unplugin-auto-import

全局导入-->main.js

import { createApp } from 'vue'
import { createPinia } from 'pinia'
import persist from 'pinia-plugin-persistedstate'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import App from './App.vue'
import router from './router'

const app = createApp(App)

app.use(createPinia().use(persist))
app.use(router)
app.use(ElementPlus)
app.mount('#app')

看到这里，vue3的基础配置就完成啦。