安装@vue/cli之后,'vue' 不是内部或外部命令,也不是可运行的程序

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了安装@vue/cli之后,'vue' 不是内部或外部命令,也不是可运行的程序相关的知识,希望对你有一定的参考价值。

参考技术A 1.@vue/cli的安装

执行npm install -g @vue/cli 或者yarn global add @vue/cli

2.@vue/cli安装完成

3.检查@vue/cli是否安装成功

执行vue --version,看到如下图的结果

4.如果提示:'vue' 不是内部或外部命令,也不是可运行的程序 该如何解决?

一般出现这个问题,是因为没有配置全局变量

4.1npm config list 查看一下npm 的配置信息,如下图:

4.2找到上图红色框里面的路径,看看有没有vue.cmd的文件,然后把这个路径添加的系统环境变量的path里面,如下图:

4.3重新打开cmd窗口执行vue --version,看看是否成功

使用vue-cli脚手架安装和webpack-simple模板项目生成

Vue-cli 是一个官方发布 vue.js 项目脚手架,使用 vue-cli 可以快速创建 vue 项目。

GitHub地址是:https://github.com/vuejs/vue-cli

一、安装Nodejs首先需要安装Node环境。

安装完成之后,可以在命令行工具中输入node -v和npm -v,如果能显示出版本号,就说明安装成功。

二、安装vue-cli

安装好node之后,我们就可以直接全局安装vue-cli:

npm install -g vue-cli

使用这种方式可能会安装比较慢,推荐大家使用国内的淘宝镜像来安装。(之前安装过了就不过多赘述了)

cnpm install -g vue-cli

如果安装失败,可以使用

npm cache clean 

清理缓存,然后再重新安装。后面的安装过程中,如有安装失败的情况,也需要先清理缓存安装完成后,可以使用

vue -V

(大写的V)查看vue的版本。

如果接下来你不知道要干嘛,那么你可以在命令行中输入

vue -help

它会有以下提示: 懂点英语的意思应该能看到提示的信息,聪明的你此时接下来执行vue list看看有哪些可用的官网模板:

vue list  

Vue.js官方提供了两种类型的模板项目:

  • 基于vue-cli和browserify的项目模板
  • 基于vue-cli和webpack的项目模板

vue cli是Vue.js官方提供的命令行创建Vue.js项目脚手架的工具。这两种类型的项目模板分别提供了简单模式和完全模式,简单模式仅包含基于vue.js开发必要的一些资源和包,使用该模式可以快速地投入到开发。完全模式则还包括ESLink、单元测试等功能。我们在这里使用webpack的项目模板。没有为什么,因为webpack有点叼叼的。

三. 创建Vue工程模板

我们今天玩一下webpac-simple 基于webpack的简单模板。再重申一遍,一定要使用命令行工具切换到你当前的目录下,类似这样

然后执行:

vue init webpack-simple my-project
  • init :初始化我们的项目。
  • webpack-simple:使用的哪个模板,这里我们先使用webpack-simple模板
  • my-project:表示我们项目的名字,这名字可以自己命名,但不要起成系统软件的一些名字,比如vue,node,npm等

结果如下:

接下来根据提示操作:切换到当前目前,一定切换进来

cd my-project

下载当前项目所依赖的包

npm install

启动当前的项目

npm run dev

接下来见证奇迹的时刻来了,我们第一个vue的项目。只要出现如下界面,证明项目启动成功了。

img

以上是关于安装@vue/cli之后,'vue' 不是内部或外部命令,也不是可运行的程序的主要内容,如果未能解决你的问题,请参考以下文章

win下vue-cli组件化开发/安装的问题

Mac webpack 安装报错 permission denied, mkdir '/usr/local/lib/ vue-cli初始化项目

'vue-cli-service' 不是内部或外部命令,也不是可运行的程序 或批处理文件。

@vue/cli4.5.13新建vue2项目

安装vue cli之后没有vue.cmd

安装完Vue cli3 之后,还想用vue-cli2.x 版本