2025年vue安装教程（vue的安装）

编程日记 • 2025-07-01 07:57 • 阅读 108

1、下载安装node.js

2、创建两个文件夹：node_cache和node_global

找到node.js安装位置，例如我的安装位置为：C:Program Files odejs

在该目录下创建两个文件夹：node_cache和node_global

以管理员身份运行CMD，依次输入执行以下命令：

npm config set prefix “C:Program Files odejs ode_global”

npm config set cache “C:Program Files odejs ode_cache”

3、环境变量配置

创建系统变量NODE_HOME，变量值为nodejs所在目录

编辑系统变量Path

增加如下环境变量

4、将淘宝镜像设置为npm的源

以管理员身份运行CMD，输入命令：

npm config set registry https://registry.npm.taobao.org //npm设置淘宝镜像源

使用淘宝定制的 cnpm (gzip 压缩支持) 命令行工具代替默认的 npm

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

说明：有写法是

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

registry.npm.taobao.org这个地址是淘宝曾经提供的NPM镜像服务的地址，该地址在2022年6月30日之后已经停止服务。而registry.npmmirror.com是淘宝NPM镜像服务的新地址，接替了原有的registry.npm.taobao.org。

可以执行 cnpm -v查看信息

如果在安装过程中出现SSL证书问题，可以通过如下操作解决：

1）关闭 npm 的 SSL 验证

通常在某些情况下可能因为网络问题、证书过期或者证书不受信任导致无法正常安装包，这时候就可以通过关闭npm的SSL验证来解决问题。

但是需要注意的是，关闭SSL验证会使你的npm操作不安全，因为它会绕过SSL证书的验证，使你的数据传输存在被中间人攻击的风险。因此，除非必要，否则不建议关闭SSL验证。npm config set strict-ssl false

2）清除 npm 缓存

有时候，npm 的缓存可能会导致问题。您可以尝试运行以下命令清除缓存

npm cache clean --force

5、安装全局vue

以管理员身份运行CMD，执行命令:npm install -g vue

6、安装 vue脚手架

1）安装vue.js

以管理员身份运行CMD，执行命令: npm install @vue/cli –g //安装最新版8、本

2）安装webpack模板

以管理员身份运行CMD，执行命令: npm install webpack -g

webpack 4x以上，webpack将命令相关的内容都放到了webpack-cli，所以还需要安装webpack-cli：npm install --global webpack-cli

3）检查版本

vue --version或vue -V

4）顺手安装上vue-router

以管理员身份运行CMD，执行命令: npm install -g vue-router

7、创建vue项目（初始化一个vue项目工程）

以管理员身份运行CMD ,切换到项目所在目录，如项目所在目录为D:Projectvuestudy

执行命令:vue create 项目名

如：vue create vue01 //创建vue项目，项目名 vue01

可以选择VUE3 或者VUE2 或自定义，至此，vue项目就创建完成了。

进入项目所在目录vue01：

执行命令:npm run serve

浏览器打开 http://localhost:8080/

Vue项目运行成功！

8、卸载

如遇到问题需要卸载脚手架，可以通过如下命令解决

1）卸载低版本的脚手架

以管理员身份运行CMD，输入命令：npm uninstall vue-cli -g

2）卸载高版本的脚手架

以管理员身份运行CMD，输入命令：npm uninstall @vue/cli -g

2025年vue安装教程（vue的安装）

相关推荐