安装VUE-cli后输入vue -V不是内部命令

安装好vue-cli后输入vue -V不是内部命令一般是配置环境的问题,这个问题整整困扰了我两天我才找问题(vue小白一枚),写出来更多是为了让一些学习者明白是哪里出了问题

闲话少说,进入正题,先来一整套vue的环境搭建

安装vue先安装nodejs

node下载地址:https://nodejs.org/en/建议在64位操作系统上安装x64版本,因为对于很多nodejs的包来讲,基本都支持64位操作系统,未来部署环境也基本都是x64操作系统

安装步骤我就不多说了 下一步就可以跟安装JDK一个道理

安装VUE-cli后输入vue -V不是内部命令_第1张图片

Node.js runtime表示运行环境

npm package manager表示npm包管理器

online documentation shortcuts在线文档快捷方式

Add to PATH添加到环境变量

选择Node.js runtime即可

我看网上好多有配置环境变量的,我的安装后直接环境变量就已经自动配置了(不知道是版本越来越高的原因嘛),所以这里我没有配置环境变量的,如果安装好没有配置环境变量的话需要去手动配置一下,把nodejs的路径放在path环境变量即可

安装后win+R打开cmd输入node -v可查看版本npm -v可查看npm版本

安装VUE-cli后输入vue -V不是内部命令_第2张图片

至此nodejs是安装完成了,默认情况下我们下载全局包时路径是为默认的 可以通过npm root -g可以进行查看路径

安装VUE-cli后输入vue -V不是内部命令_第3张图片

我这里是修改过后的路径,如果不修改默认应该是在C:\Users\Administrator\AppData\Roaming\npm\node_modules下

但是有时候我们不想让全局包放在这里,我们想放在node的安装目录下

1、在node安装目录下下新建两个文件夹

node_global全局包下载存放

node_cachenode缓存

2、修改路径

在CMD窗口执行以下两条命令:

npm configsetprefix"C:\node\node_global"

npm config set cache "C:\node\node_cache"

或者在nodejs的安装目录中找到node_modules\npm\.npmrc文件,修改如下:

prefix =C:\node\node_global

cache = C:\node\node_cache

安装VUE-cli后输入vue -V不是内部命令_第4张图片

接下来我们说安装完nodejs后安装vue,搭建vue环境变量呢需要先下载vue-cli,vue-cli是从头搭建vue工程的脚手架(也就是工具),通过该工具,可以简化很多工程搭建的配置环境

我们通过输入命令行进行安装

安装如果没有出现erro都是WARN的话那么就是顺利安装完成的

安装完成后输入vue -V可以查看版本号(注意V是大写)

如果提示vue不是内部命令的话 那么找到你全局包路径,例如我的是E盘安装VUE-cli后输入vue -V不是内部命令_第5张图片

把这个路径配置到path环境变量即可

接着我们来创建vue项目

安装VUE-cli后输入vue -V不是内部命令_第6张图片

这里如果怕麻烦选择默认就是直接回车就好了,如果想改配置选择红框中的就可以了,我们直接选择默认的进行创建项目

项目创建完成后我们看一下生成的项目都有什么文件

安装VUE-cli后输入vue -V不是内部命令_第7张图片

 

这是我们生成的项目文件

如何运行项目,通过命令进入项目目录 输入 npm run server就可以(这里可能会报错)

安装VUE-cli后输入vue -V不是内部命令_第8张图片

我们运行的时候出错了,可以根据报错提示script 我们打开package.json看看参数是否出错

这里看是没有什么问题 我们把server改成dev也是一种启动方式 将参数进行修改

命令行再输入 npm run dev进行启动

安装VUE-cli后输入vue -V不是内部命令_第9张图片

这里我们启动成功了!我们输入网址看看

安装VUE-cli后输入vue -V不是内部命令_第10张图片

以上就是我安装vue的一些心得 可做技术交流

你可能感兴趣的:(vue)