先是两张报错的信息
原本是提示 vue无法识别,但是通过一顿自己都忘记了的操作之后变成了缺少组件,但是后面的方法对无法识别是适用的
图二的解决方案网上提供的方法有两种
一种是通过终端输入 npm/cnpm install commander 对缺少的组件安装
另一种是通过终端输入 vue init webpack 进行初始化
如果两种方法都不行,就是跟第一种情况一样是路径的问题了
然而,路径问题也要注意有两个
首先是去我们的环境变量的 Path 里查看我们的路径是不是对应 nodejs 安装时选择的路径,如果没有就加上去
这是网上提供的第一个方法,只要是路径设置好了,基本上是可以使用的。但是如果进到 VS Code 之后发现 npm 指令不能使用,那么就要通过设置 VS Code 的兼容性来解决
通过上面几个步骤基本上就可以解决 VS Code 不能使用 node、npm 的问题
接下来就是 cnpm、vue-cli 等全局安装之后无法使用的问题
全局安装cnpm: npm install -g cnpm --registry==http://registry.npm.taobao.org
全局安装vue-cli: cnpm/npm install -g vue-cli
顺序执行了两个指令之后,使用 cnpm 安装 vue脚手架,提示 cnpm 无法识别,就算使用 npm 安装 vue-cli 成功之后,输入 vue 指令也会提示无法识别(黑人问号问号问号问号...)
于是观察一下安装过程,在进行全局安装 vue脚手架以及在安装 cnpm 的时候很容易会发现一个路径,这个就是你安装的一个路径,相信有人会跟我一样,安装的路径和 nodejs 的安装路径不一致
注意:这个是安装 vue-cli(脚手架)出现的提示信息,是已经安装成功的,但是我在使用的时候提示不是内部或外部指令。cnpm安装的时候也会有类似的显眼的路径信息,这里就不放出来,自己注意找一下就行
解决方法
通过终端输入 npm config ls 查看配置信息
prefix 是安装路径,这个时候会发现这个路径并不是你安装 nodejs 的路径,所以我们需要修改这个安装路径
终端输入 npm config set prefix ( nodejs 的安装路径)
再次终端输入 npm config ls 查看配置信息,就修改成功了
最后再重新进行全局安装 cnpm 和 vue-cli 就可以进行使用了
总结起来就是:
1、环境变量中 Path 中的路经检查是否正确,如果没有就添加上去
2、若1满足,则对 VS Code 兼容性进行修改
3、cnpm 或 vue 还是不能使用的话,考虑安装路径问题,终端输入 npm config ls 进行配置信息查看,检查是否正确。若不正确,终端输入 npm config set prefix ( nodejs 的安装路径) 进行修改;若正确,emmmmmmmmmmm,那就说明这篇笔记不是很适合你的错误哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈
好嘞,记录完毕【伸懒腰】
最近接手了一个半成品项目,是一个vue开发的后台管理系统。拿到项目后,发现跟自己之前开发的vue项目不太一样,以下是该项目的文件目录结构:
一番研究后得知该项目是通过npm安装的,而自己之前的项目都是通过<script>标签引入vue。既然如此,便尝试用npm运行本次的项目
使用npm要先安装node.js,安装完成后打开cmd命令版,输入npm -v,检查是否安装成功,如下图:
npm安装后,打开cmd命令面板,进入项目根目录,执行npm install命令安装项目所需的依赖文件。安装过程并不顺利,以下是安装过程第一次报错:
该报错是没安装git以及配置对应的环境变量,需安装git并配置git的环境变量,然后重新执行npm install命令
此时又出现了第二次错误,如下图:
该报错是当克隆github上的repository时,系统提示防火墙禁止对git://的访问,这时候只能用https://来访问repository。
解决方法:打开git终端,执行git config --global url."https://".insteadOf git://命令,如下图:
然后重新执行npm install命令,此时不再报错了,执行成功,如图:
这时候需要执行npm run dev命令来运行该项目,如下图:
执行完毕后系统会自动打开浏览器运行项目,如下图:
1.直接引入vue.js和npm安装两种方式都可以使用vue.js
2.直接引入vue.js,方便快捷
3.npm安装vue方便包的管理
安装VUE的方法有两种:第一种方法:需正常打开chrome商店,搜索vuejs devtools 安装。chrome://extensions/ 开发者工具-扩展程序下启用;
第二种方法:github下载插件,npm包安装依赖,拖入浏览器扩展程序。具体操作如下:
1、下载chrome扩展插件。在github上下载压缩包并解压到本地。
2、npm install下载完成后打开命令行cmd进入vue-devtools-master文件夹。
3、 打开shells>chrome>manifest.json并把json文件里的persistent:false改成true。
4、扩展chrome插件。打开chrome浏览器,打开更多工具>扩展程序;再点击加载已解压的扩展程序,然后把shells>chrome文件夹放入。
5、测试安装成功。在插件的目录下执行npm run dev,这个时候的插件就可以运行了。