当前位置：首页 > news >正文

1.Vue自动化工具安装（Vue-cli）

news 来源：原创 2025/4/21 8:00:22

1.node.js 安装：

2 npm 安装

3 安装Vue-cli

4总结：

一般情况下，单文件组件，我们运行在自动化工具vue-CLI中，可以帮我们编译单文件组件。所以我们在学习时一般需要在系统中先搭建vue-CLI工具

下面就是一些我在安装过程中的记录

官网：https://cli.vuejs.org/zh/

Vue CLI 需要 Node.js 8.9 或更高版本 (推荐 8.11.0+)。你可以使用 nvm 或 nvm-windows在同一台电脑中管理多个 Node 版本。

nvm工具的下载和安装(参考)：

nvm介绍及使用 - 简书一、介绍我们可能同时在进行2个项目，而2个不同的项目所使用的node版本又是不一样的，或者是要用更新的node版本进行试验和学习。这种情况下，对于维护多个版本的no...https://www.jianshu.com/p/d0e0935b150a

Mac OS 下 NVM 的安装与使用 - 简书nvm，node，npm之间的区别。 nvm：nodejs 版本管理工具。也就是说：一个 nvm 可以管理很多 node 版本和 npm 版本。nodejs：在项目开发时的所...https://www.jianshu.com/p/622ad36ee020

安装过程一些记录：

打开:https://github.com/coreybutler/nvm-windows/releases

nvm list   # 列出目前在nvm里面安装的所有node版本
nvm install node版本号      # 安装指定版本的node.js例子：nvm install 12.13.1nvm uninstall node版本号    # 卸载指定版本的node.js
nvm use node版本号          # 切换当前使用的node.js版本

如果使用nvm工具，则直接可以不用自己手动下载，如果使用nvm下载安装 node的npm比较慢的时候，可以修改nvm的配置文件(在安装根目录下)

# settings.txt
root: C:\tool\nvm    [这里的目录地址是安装nvm时自己设置的地址,要根据实际修改]
path: C:\tool\nodejs
arch: 64
proxy: none
node_mirror: https://mirrors.tuna.tsinghua.edu.cn/nodejs-release// 
npm_mirror: https://mirrors.tuna.tsinghua.edu.cn/npm/

1.node.js 安装：

使用上一部分nvm 工具安装

nvm install node版本号      # 安装指定版本的node.js

node.js的版本有两大分支：

官方发布的node.js版本：0.xx.xx 这种版本号就是官方发布的版本（推荐）

社区发布的node.js版本：xx.xx.x 就是社区开发的版本

Node.js如果安装成功，可以查看Node.js的版本,在终端输入如下命令：

node -v

2 npm 安装

在安装node.js完成后，在node.js中会同时帮我们安装一个npm包管理器npm。我们可以借助npm命令来安装node.js的包。这个工具相当于python的pip管理器。

npm install -g 包名 # 安装模块 -g表示全局安装，如果没有-g，则表示在当前项目安装
npm list # 查看当前目录下已安装的node包
npm view 包名 engines # 查看包所依赖的Node的版本
npm outdated # 检查包是否已经过时，命令会列出所有已过时的包
npm update 包名 # 更新node包
npm uninstall 包名 # 卸载node包
npm 命令 -h # 查看指定命令的帮助文档

3 安装Vue-cli

npm install -g vue-cli
npm install -g vue-cli --registry https://mirrors.tuna.tsinghua.edu.cn/

如果安装速度过慢，一直超时，可以考虑切换npm镜像源 :

https://mirrors.tuna.tsinghua.edu.cn/

指令：

1     //临时使用2     npm install jquery --registry https://registry.npm.taobao.org3 4     //可以把这个选型配置到文件中，这样不用每一次都很麻烦5     npm config set registry https://registry.npm.taobao.org6 7     //验证是否配置成功 8     npm config list 或者 npm config get registry9 
10     //在任意目录下都可执行,--global是全局安装，不可省略
11     npm install --global cnpm 或者 npm install -g cnpm --registry=https://mirrors.tuna.tsinghua.edu.cn/
12 
13     //安装后直接使用
14     cnpm install jquery

npm和cnpm介绍(参考)

参考博客： npm 和 cnpm 区别_cnpm和npm-CSDN博客文章浏览阅读4.9w次，点赞6次，收藏41次。本文介绍了NodeJS的包管理器NPM的基本操作，包括安装、卸载、更新插件的方法，以及如何将插件信息保存到项目的package.json文件中。此外，还介绍了为了解决NPM下载速度慢的问题，国内开发者常用的CNPM工具及其安装和使用方法。https://blog.csdn.net/jack_bob/article/details/80644376