004 Vue Cli脚手架（vue2）

为什么需要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版本

npm uninstall vue-cli -g

安装淘宝镜像-cnpm

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

腾讯云

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

npm 官方源（可能较慢）：

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 使用新路径：

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

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

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

新增条目 D:\npm-global。

重新安装 cnpm：

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

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

删除自定义的 prefix 配置

npm config delete prefix

清除npm缓存

npm cache clean --force

手动删除残留缓存文件
前往路径：

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

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

npm config get prefix

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

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

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

如果路径包含长文件夹名称，启用Windows长路径支持：
打开"注册表编辑器"
导航到 HKEY_LOCAL_MACHINE\SYSTEM\CurrentControlSet\Control\FileSystem
双击 LongPathsEnabled → 将值改为 1

权限

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

安装webpack

npm install webpack@4.41.2 webpack-cli -D

安装vue_cli

npm install -g @vue/cli@4.0.3

检查版本

vue -V

npm install -g @vue/cli-init

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

创建

创建vue目录
使用webpack创建vue脚手架项目

vue init webpack vue_project_quickstart