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


相关推荐
灵感__idea44 分钟前
JavaScript高级程序设计(第5版):好的编程就是掌控感
前端·javascript·程序员
烛阴2 小时前
Mix
前端·webgl
代码续发2 小时前
前端组件梳理
前端
试图让你心动3 小时前
原生input添加删除图标类似vue里面移入显示删除[jquery]
前端·vue.js·jquery
_Kayo_3 小时前
VUE2 学习笔记6 vue数据监测原理
vue.js·笔记·学习
陈不知代码3 小时前
uniapp创建vue3+ts+pinia+sass项目
前端·uni-app·sass
小王码农记3 小时前
sass中@mixin与 @include
前端·sass
陈琦鹏3 小时前
轻松管理 WebSocket 连接!easy-websocket-client
前端·vue.js·websocket
hui函数4 小时前
掌握JavaScript函数封装与作用域
前端·javascript
行板Andante4 小时前
前端设计中如何在鼠标悬浮时同步修改块内样式
前端