vue脚手架(vue-cli)详细安装过程

本文介绍: CLI，俗称脚手架。全称是。vue–cli 是vue官方发布的开发 vue 项目的脚手架。vue 脚手架用于自动生成 vue和webpack的项目模板，是一个快速构建 vue 项目的工具，可以自动安装 vue所需要的插件，避免手动安装各种插件、逐个引入的麻烦。以及自动配置 webpack，之前我们都是手动配置 webpack。首先是特别的繁琐，而且有一个很明显的问题是版本问题。版本不对可能就报错。以后这些事儿都交给我们的cli，他会自动帮助我们配置 webpack。…

CLI，俗称脚手架。全称是Command Line Interface。 vue–cli 是vue官方发布的开发 vue 项目的脚手架。

官网：https://nodejs.org/zh–cn/
在这里插入图片描述
选择自己系统对应版本下载

双击下载好的安装文件，一路下一步安装

 记住你的安装路径，后面配置会用到

 安装完毕后，命令行输入：node -v
显示nodejs 版本号，安装成功

命令行输入：npm -v ,查看 npm是否安装成功
在这里插入图片描述
发现，虽然返回了版本号，但也报了个错

npm install -g npm-windows-upgrade
npm-windows-upgrade

解决：

在这里插入图片描述

配置镜像源（淘宝镜像）

npm config set registry https://registry.npm.taobao.org

配置仓储和缓存目录
在安装目录下新建两个文件夹 cache 和 global
在这里插入图片描述
执行：(后面替换成你的目录)

npm config set prefix “C:Program Filesnodejsglobal”
npm config set cache “C:Program Filesnodejscache”

查看配置是否生效
执行：npm config ls
在这里插入图片描述

配置环境变量
a、新建系统变量：NODE_PATH 值：C:Program Filesnodejsglobalnode_modules（改为你自己安装目录下）
在这里插入图片描述
b、编辑系统变量 path

检查是否安装成功： vue -V 或者 vue --version

a、命令行进入新建的项目目录，执行：vue create 项目名
在这里插入图片描述

在这里插入图片描述
进入项目目录，执行：npm run serve

声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。

1、安装Node.js及配置 环境