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版本

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


相关推荐
Mintopia3 分钟前
Three.js 深度冲突:当像素在 Z 轴上玩起 "挤地铁" 游戏
前端·javascript·three.js
Penk是个码农8 分钟前
web前端面试-- MVC、MVP、MVVM 架构模式对比
前端·面试·mvc
markyankee10110 分钟前
Vue.js 入门指南:从零开始构建你的第一个应用
vue.js
MrSkye11 分钟前
🔥JavaScript 入门必知:代码如何运行、变量提升与 let/const🔥
前端·javascript·面试
白瓷梅子汤15 分钟前
跟着官方示例学习 @tanStack-form --- Linked Fields
前端·react.js
爱学习的茄子19 分钟前
深入理解JavaScript闭包:从入门到精通的实战指南
前端·javascript·面试
zhanshuo1 小时前
不依赖框架,如何用 JS 实现一个完整的前端路由系统
前端·javascript·html
火柴盒zhang1 小时前
websheet在线电子表格(spreadsheet)在集团型企业财务报表中的应用
前端·html·报表·合并·spreadsheet·websheet·集团财务
khalil1 小时前
基于 Vue3实现一款简历生成工具
前端·vue.js
拾光拾趣录1 小时前
浏览器对队头阻塞问题的深度优化策略
前端·浏览器