pnpm创建Vue3.0

首先请确保你安装了最新版本的 Node.js，再继续以下步骤！！！

在这里我们将使用pnpm包管理器进行相关下载！！！

pnpm - 速度快、节省磁盘空间的软件包管理器（pnpm 比 npm 快了近 2 倍）

1. 全局安装 pnpm

1.1 使用npm安装pnpm

在你准备创建项目的文件夹中打开cmd，输入命令 npm install -g pnpm

npm install -g pnpm

npm的默认源是国外的服务器，可能会遇到下载速度慢和连接不稳定的问题。

1.2 使用cnpm安装pnpm

（1）安装 cnpm

如果你的下载速度过慢，这里建议使用cnpm。

npm install -g cnpm --registry=https://registry.npmmirror.com

cnpm能够提供更快的下载速度和更稳定的连接，更适合中国大陆地区的开发者。

使用 cnpm -v 查看是否安装成功

cnpm -v

（2）使用cnpm安装pnpm

cnpm install -g pnpm

1.3 检查是否安装成功

使用 pnpm -v 查看是否安装成功

pnpm -v

2. 使用pnpm创建Vue3.0项目

pnpm create vue

2.1 选择需求

项目名称建议使用英文；

你可以根据自己的需求选择 否 or 是；

ESLint：规范代码；

Prettier：专门美化代码的格式化工具。

2.2 安装依赖

项目创建成功后，一定要将以上代码挨个进行运行！！！

pnpm install

pnpm format

2.3 启动项目

pnpm dev

3. vue3.0项目创建成功

4. 在使用pnpm时报错

如果在使用pnpm时报错，需要更新淘宝镜像源地址，并清理缓存，依次执行以下步骤：

npm config set registry https://registry.npmmirror.com

npm cache clean --force

5. 相关配置和插件

1. Vetur

Vetur是Vue2.0的插件，在使用Vue3.0时将它禁用。

2.ESLint

ESLint：专注于代码规范。

启用ESLint插件

在settings.json文件中添加如下配置代码：

    //当保存的时侯，ESLint自动帮我们修复错误
    "editor.codeActionsOnSave" : {
        "source.fixAll": true
    },
    //保存代码，不自动格式化
    "editor.formatOnSave": false,

若个你在配置时， true 报错，那么你可以选择以下配置代码：

    //当保存的时侯，ESLint自动帮我们修复错误
    "editor.codeActionsOnSave" : {
        "source.fixAll": "explicit"
    },
    //保存代码，不自动格式化
    "editor.formatOnSave": false,

3.prettier

prettier：格式化工具，专注于代码的美观度。

我们在 package.json 文件中已经安装好了包prettier，

所以不需要在VSCode插件中下载prettier插件。

如果你已经下载，请禁用。

在 .eslintrc.cjs中添加如下配置代码：

   rules:{
    'prettier/prettier':[
      'warn',
      {
        singleQuote:true,
        semi:false,
        printWidth:80,
        trailingComma:'none',
        endofLine:'auto',
      }
    ],
    'vue/multi-word-component-names':[
      'warn',
      {
        ignores:['index']
      }
    ],
    'vue/no-setup-props-destructure':['off'],
    'no-undef':'error'
  }

如果没有 .eslintrc.cjs文件，可以放在 eslint.config.js 文件的 export default 中：

  pluginJs.configs.recommended,
  ...tseslint.configs.recommended,
  ...pluginVue.configs['flat/essential'],
  {
    plugins: {
      prettier,
    },
    rules:{
      'prettier/prettier':[
        'warn',
        {
          singleQuote:true,
          semi:false,
          printWidth:80,
          trailingComma:'none',
          endofLine:'auto',
        }
      ],
      'vue/multi-word-component-names':[
        'warn',
        {
          ignores:['index']
        }
      ],
      'vue/no-setup-props-destructure':['off'],
      'no-undef':'error'
    }
  }