004 Vue Cli脚手架（vue2）

文章目录

- 搭建
- [修改 npm 全局安装路径（避开权限问题）](#修改 npm 全局安装路径（避开权限问题）)
- [删除自定义的 prefix 配置](#删除自定义的 prefix 配置)
- 清除npm缓存
- [验证是否恢复默认路径（默认路径通常是 %APPDATA%\npm）](#验证是否恢复默认路径（默认路径通常是 %APPDATA%\npm）)
- 检查路径长度限制（Windows特有）
- 权限
- 安装webpack
- 安装vue_cli
- 检查版本
- 创建

为什么需要Vue Cli脚手架？
目前开发模式的问题
1.开发效率低
2.不够规范
3.维护和升级，可读性比较差
https://cli.vuejs.org/zh/
https://nodejs.org/en/blog/release/v10.16.3

搭建

搭建Vue脚手架工程，需要使用到NPM(node package manager)，npm是随nodejs安装的一款包管理工具，类似Maven。所以需要先安装Node

先删除以前的cli版本

bash 复制代码

npm uninstall vue-cli -g

安装淘宝镜像-cnpm

bash 复制代码

npm install -g cnpm --registry=https://registry.npm.taobao.org

腾讯云

bash 复制代码

npm install -g cnpm --registry=https://mirrors.cloud.tencent.com/npm/

npm 官方源（可能较慢）：

bash 复制代码

npm install -g cnpm --registry=https://registry.npmjs.org

npm 和 cnpm的区别

1 两者之间只是node中包管理器的不同，都可以使用

2 npm是node官方的包管理器。cnpm是中国版的npm，是淘宝定制的cnpm(gzip压缩支持)命令行工具代替默认的npm

3 如果因为网络原因无法使用npm下载，就用cnpm

4 npm 和 cnpm只是下载的地址不同，npm是从国外下载，cnpm是从国内

修改 npm 全局安装路径（避开权限问题）

将 npm 全局安装目录迁移到无需管理员权限的位置：

创建新目录（如 D:\npm-global）。

配置 npm 使用新路径：

bash 复制代码

npm config set prefix "D:\npm-global"

将新路径添加到系统环境变量 PATH 中：

按 Win + S 搜索"环境变量" → 编辑"系统变量"中的 Path。

新增条目 D:\npm-global。

重新安装 cnpm：

bash 复制代码

npm install -g cnpm --registry=https://mirrors.cloud.tencent.com/npm/

bash 复制代码

npm install -g npm --force --registry=https://mirrors.cloud.tencent.com/npm/

删除自定义的 prefix 配置

bash 复制代码

npm config delete prefix

清除npm缓存

bash 复制代码

npm cache clean --force

手动删除残留缓存文件

前往路径：

bash 复制代码

C:\Users\用户名\AppData\Roaming\npm-cache

验证是否恢复默认路径（默认路径通常是 %APPDATA%\npm）

bash 复制代码

npm config get prefix

应输出：C:\Users\用户名\AppData\Roaming\npm

bash 复制代码

npm config delete registry  # 删除自定义镜像源，恢复为官方源

检查路径长度限制（Windows特有）

如果路径包含长文件夹名称，启用Windows长路径支持：

打开"注册表编辑器"

导航到 HKEY_LOCAL_MACHINE\SYSTEM\CurrentControlSet\Control\FileSystem

双击 LongPathsEnabled → 将值改为 1

权限

bash 复制代码

takeown /F D:\npm-global\node_modules\cnpm /R /A
icacls D:\npm-global\node_modules\cnpm /grant "Administrators:(F)" /T

安装webpack

bash 复制代码

npm install webpack@4.41.2 webpack-cli -D

安装vue_cli

bash 复制代码

npm install -g @vue/cli@4.0.3

检查版本

bash 复制代码

vue -V

bash 复制代码

npm install -g @vue/cli-init

bash 复制代码

npm install -g @vue/cli-init --registry=https://mirrors.cloud.tencent.com/npm/

创建

创建vue目录

使用webpack创建vue脚手架项目

bash 复制代码

vue init webpack vue_project_quickstart