目录

一、安装环境 node

1.下载地址为：Node.js — 在任何地方运行 JavaScript

2.安装：无脑下一部，此处省略

3.检查安装是否成功：使用 npm -v 或者 node -v

4.环境变量配置

二、安装vue环境

1.配置淘宝镜像：

2.安装 Yarn：打开命令提示符（CMD），运行以下命令

3.全局安装脚手架

4.创建项目

5.启动项目

​三、项目目录介绍

四、遇到的问题以及解决方案

---

---

一、安装环境 node

1.下载地址为：Node.js — 在任何地方运行 JavaScript

2.安装：无脑下一部，此处省略

3.检查安装是否成功：使用 npm -v 或者 node -v

4.环境变量配置

        说明：这里的环境配置主要配置的是npm安装的全局模块所在的路径，以及缓存cache的路径，之所以要配置，是因为以后在执行类似：npm install express [-g] （后面的可选参数-g，g代表global全局安装的意思）的安装语句时，会将安装的模块安装到【C:\Users\用户名\AppData\Roaming\npm】路径中，占C盘空间

 4.1 例如：将全模块所在路径和缓存路径放在我node.js安装的文件夹中，则在安装的文件夹【D:\Program Files\nodejs】下创建两个文件夹【node_global】及【node_cache】如下图：

4.2 设置文件夹在node中配置，已管理员身份打开cmd 输入下面的命令：

npm config set prefix “D:\Program Files\nodejs\node_global”
npm config set cache “D:\Program Files\nodejs\node_cache”

4.3设置环境变量，关闭cmd窗口，“我的电脑”-右键-“属性”-“高级系统设置”-“高级”-“环境变量”
进入环境变量对话框，在【系统变量】下新建【NODE_PATH】，
输入【D:\Program Files\nodejs\node_global\node_modules】，将【用户变量】下的【Path】修改为【D:\Program Files\nodejs\node_global】

二、安装vue环境

1.配置淘宝镜像：

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

检查安装是否成功：cnpm -v

2.安装 Yarn：打开命令提示符（CMD），运行以下命令

   npm install -g yarn

3.全局安装脚手架

npm install --global @vue-cli 是 vue 3.x及更高版本的 手脚架 (此文使用这个)
npm install --global vue-cli 是 vue 2.x 的 手脚架
ps: 命令中的–global 可以更改成为–g

3.1如果使用最新版本的脚手架：

npm install -g @vue/cli@next

这个命令会安装最新版本的 @vue/cli，通常会是 5.x 版本或更高版本。如果你想安装特定版本，可以将 @next 替换为具体的版本号，例如 @vue/cli@5.0.8

3.2卸载使用：

npm uninstall -g @vue/cli

4.创建项目

vue3.x以上使用 ，需要在项目的目录下执行

npm命令：npm create vue@latest

npm create vue@latest

 pnpm命令：

pnpm create vue@latest

yarn命令： 

# For Yarn Modern (v2+)
 yarn create vue@latest

# For Yarn ^v4.11
 yarn dlx create-vue@latest

 bun命令：

bun create vue@latest

根据自己选择使用创建项目

创建会提示相关安照下面输入即可：

✔ Project name: … <your-project-name>
✔ Add TypeScript? … No / Yes
✔ Add JSX Support? … No / Yes
✔ Add Vue Router for Single Page Application development? … No / Yes
✔ Add Pinia for state management? … No / Yes
✔ Add Vitest for Unit testing? … No / Yes
✔ Add an End-to-End Testing Solution? … No / Cypress / Nightwatch / Playwright
✔ Add ESLint for code quality? … No / Yes
✔ Add Prettier for code formatting? … No / Yes
✔ Add Vue DevTools 7 extension for debugging? (experimental) … No / Yes

Scaffolding project in ./<your-project-name>...
Done.

5.启动项目

下载依赖：使用命令 npm install  或则 yarn install

在项目的目录下使用命令启动项目：yarn run serve 或则 npm run serve

三、项目目录介绍

创建成功的项目如下：

• node_modules：存放项目依赖的模块，这些模块是通过 npm 或 yarn 安装的。
• public：通常用于存放静态资源，如 HTML 文件、图片、字体等，这些资源在构建过程中会被原样复制到输出目录。
• src：源代码目录，包含项目的主要逻辑和代码实现，如 Vue 组件、JavaScript 模块等。
• gitignore：指定了 Git 版本控制系统应忽略的文件和文件夹，避免将不必要的文件纳入版本控制。
• babel.config.js：Babel 的配置文件，用于配置 JavaScript 代码的转译规则，以便在不同的浏览器或环境中运行。
• jsconfig.json：JavaScript 项目的配置文件，用于配置代码的编辑和调试环境，例如指定代码的根目录、路径别名等。
• package.json：项目的配置文件，包含项目的名称、版本、依赖项、脚本等信息，是 npm 或 yarn 管理项目的重要文件。
• README.md：项目的说明文件，通常用于记录项目的介绍、安装步骤、使用说明等信息。
• vue.config.js：Vue 项目的配置文件，用于自定义 Vue CLI 的构建和开发行为。
• yarn.lock：Yarn 包管理器生成的锁文件，确保在不同环境中安装的依赖版本一致。

四、遇到的问题以及解决方案

问题一：

npm create vue@pms
npm error code EPERM
npm error syscall mkdir
npm error path D:\Program Files\nodejs\node_cache\_cacache\index-v5\60\68
npm error errno -4048
npm error Error: EPERM: operation not permitted, mkdir 'D:\Program Files\nodejs\node_cache\_cacache\index-v5\60\68'
npm error     at async mkdir (node:internal/fs/promises:858:10)
npm error     at async Object.insert (D:\Program Files\nodejs\node_modules\npm\node_modules\cacache\lib\entry-index.js:126:5)
npm error     at async CacheEntry.store (D:\Program Files\nodejs\node_modules\npm\node_modules\make-fetch-happen\lib\cache\entry.js:308:7)
npm error     at async fetch (D:\Program Files\nodejs\node_modules\npm\node_modules\make-fetch-happen\lib\fetch.js:98:7)

解决方案：

方法一：以管理员身份运行命令提示符或终端

在 Windows 上，右键点击命令提示符图标，选择 “以管理员身份运行”，然后再次尝试运行npm create vue@pms命令。

在 macOS 或 Linux 上，如果使用的是普通用户权限，可以尝试在命令前加上sudo，以管理员权限运行命令，但这可能会带来一些安全风险，使用时需谨慎。

方法二：检查文件和目录权限

确保你对D:\Program Files\nodejs\node_cache及其子目录有足够的读写权限。如果不确定，可以尝试更改这些目录的权限，使其对当前用户可读写

在 Windows 上，可以右键点击目录，选择 “属性”->“安全” 选项卡，然后检查和修改用户的权限。在 macOS 和 Linux 上，可以使用命令行工具如chmod来修改目录权限。

方法三：清理 npm 缓存并重新尝试

运行以下命令清理 npm 缓存：

npm cache clean --force

然后再次尝试运行npm create vue@pms命令

问题二：

npm create vue@pms
npm error code ETARGET
npm error notarget No matching version found for create-vue@pms.
npm error notarget In most cases you or one of your dependencies are requesting
npm error notarget a package version that doesn't exist.
npm error A complete log of this run can be found in: D:\Program Files\nodejs\node_cache\_logs\2024-09-04T03_43_53_412Z-debug-0.log

这个错误表示没有找到匹配的 create-vue@pms 版本。可能是以下原因导致的：

1. 包名错误：请确保你输入的包名是正确的。应该是 npm create vue@latest（或者特定的 Vue 版本号）来创建一个 Vue 项目。而不是 create-vue@pms。

2. 网络问题：有时候网络不稳定可能导致无法正确下载所需的包。你可以检查你的网络连接，或者尝试使用不同的网络环境或代理设置。

3. npm 缓存问题：尝试清除 npm 缓存并再次运行命令。在命令提示符中运行以下命令：

   npm cache clean --force

然后再次尝试创建 Vue 项目的命令。

如果问题仍然存在，可以尝试直接使用 vue create 命令来创建 Vue 项目，前提是你已经安装了 @vue/cli。如果还没有安装 @vue/cli，可以使用以下命令进行全局安装：

npm install -g @vue/cli

 问题三：

Vue CLI v5.0.6
Failed to check for updates
? Please pick a preset: Default ([Vue 3] babel, eslint)


Vue CLI v5.0.6
Failed to check for updates
✨  Creating project in D:\work\Lear\pms.
🗃  Initializing git repository...
⚙️  Installing CLI plugins. This might take a while...

 ERROR  Error: Command failed: yarn config get npmRegistryServer
        node:internal/modules/cjs/loader:1228
          throw err;
          ^

        Error: Cannot find module 'D:\Program Files\nodejs\node_global\node_modules\yarn\bin\yarn.js'
            at Module._resolveFilename (node:internal/modules/cjs/loader:1225:15)
            at Module._load (node:internal/modules/cjs/loader:1051:27)
            at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:174:12)
            at node:internal/main/run_main_module:28:49 {
          code: 'MODULE_NOT_FOUND',
          requireStack: []
        }

        Node.js v20.17.0


Error: Command failed: yarn config get npmRegistryServer
node:internal/modules/cjs/loader:1228
  throw err;

这个错误提示表明在安装过程中遇到了证书过期的问题。你可以尝试以下方法来解决：

方法一：更新 Yarn

1. 卸载当前的 Yarn：

   npm uninstall -g yarn

1. 安装最新版本的 Yarn：

   npm install -g yarn

方法二：设置 Yarn 的代理和源

1. 如果你在使用代理服务器，可以设置代理：

   yarn config set proxy http://your-proxy-url:port
   yarn config set https-proxy http://your-proxy-url:port

将 your-proxy-url 和 port 替换为你的实际代理地址和端口号。

设置 Yarn 的源为国内镜像源，例如淘宝源：

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

方法三：检查系统时间和日期

确保你的系统时间和日期设置正确，因为不正确的时间可能导致证书验证问题。

方法四：使用其他包管理器（可选）

如果问题仍然存在，你可以尝试使用 npm 来代替 Yarn 进行安装：

在创建项目时，选择使用 npm 作为包管理器：

vue create --use-npm your-project-name