本篇文章给大家谈谈nodejs安装vue脚手架，以及nodejs和vue的关系对应的知识点，文章可能有点长，但是希望大家可以阅读完，增长自己的知识，最重要的是希望对各位有所帮助，可以解决了您的问题，不要忘了收藏本站喔。
一、在VScode中npm,cnpm,vue提示无法识别
原本是提示 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脚手架 npm run dev 报错啊。。在线等
Vue.js（读音/vjuː/,类似于 view）是一套构建用户界面的渐进式框架。与其他重量级框架不同的是，Vue采用自底向上增量开发的设计。Vue的核心库只关注视图层，并且非常容易学习，非常容易与其它库或已有项目整合。另一方面，Vue完全有能力驱动采用单文件组件和Vue生态系统支持的库开发的复杂单页应用。
Vue.js的目标是通过尽可能简单的 API实现响应的数据绑定和组合的视图组件。
Vue.js是一个MVVM模式的框架，如果读者有angular经验，一定能够很快入门Vue的
易用：已经会了HTML,CSS,JavaScript？即刻阅读指南即可开始构建应用！
灵活：简单小巧的核心，渐进式技术栈，足以应付任何规模的应用。
高效： 16kb min+gzip的运行大小,超快虚拟 DOM,最省心的优化
Node.js: javascript运行环境(runtime),不同系统直接运行各种编程语言
webpack:它主要的用途是通过 CommonJS的语法把所有浏览器端需要发布的静态资源做相应的准备，比如资源的合并和打包。
1.nodejs由于我已经安装好了,跳过
在硬盘上找一个文件夹放工程用的，在终端中进入该目录
vue init webpack-simple工程名字<工程名字不能用中文>或者创建 vue1.0的项目vue init webpack-simple#1.0工程名字<工程名字不能用中文>
安装 vue路由模块vue-router和网络请求模块vue-resource
npm install vue-router vue-resource--save
'NODE_ENV'不是内部或外部命令，也不是可运行的程序或批处理文件。npm ERR! Windows_NT 6.1.7601npm ERR! argv"D:\\nodejs\\node.exe""D:\\nodejs\\node_modules\\npm\\bin\\npm-cli.js""start"npm ERR! node v4.0.0-rc.5npm ERR! npm v2.14.2npm ERR! code ELIFECYCLEnpm ERR! yy-ydh-web@1.0.7 start: `npm run clear&& NODE_ENV=development&& webpack-dev-server--host 0.0.0.0--devtool eval--progress--color--profile`npm ERR! Exit status 1npm ERR!npm ERR! Failed at the yy-ydh-web@1.0.7 start script'npm run clear&& NODE_ENV=development&& webpack-dev-server--host0.0.0.0--devtool eval--progress--color--profile'.npm ERR! This is most likely a problem with the yy-ydh-web package,npm ERR! not with npm itself.npm ERR! Tell the author that this fails on your system:npm ERR! npm run clear&& NODE_ENV=development&& webpack-dev-server--host 0.0.0.0--devtool eval--progress--color--profilenpm ERR! You can get their info via:npm ERR! npm owner ls yy-ydh-webnpm ERR! There is likely additional logging output above.npm ERR! Please include the following file with any support request:npm ERR! D:\workspace\node_modules\yy-ydh-web\npm-debug.log
这是windows不支持NODE_ENV=development的设置方式
●安装across-env: npm install cross-env--save-dev
●在NODE_ENV=xxxxxxx前面添加cross-env就可以了。
module.js:457 throw err; ^Error: Cannot find module'webpack' at Function.Module._resolveFilename(module.js:455:15) at Function.Module._load(module.js:403:25) at Module.require(module.js:483:17) at require(internal/module.js:20:19) at Object.<anonymous>(D:\vue_work\fendo\webpack.config.js:2:15) at Module._compile(module.js:556:32) at Object.Module._extensions..js(module.js:565:10) at Module.load(module.js:473:32) at tryModuleLoad(module.js:432:12) at Function.Module._load(module.js:424:3)
ccnpm install模块名--save-dev(关于环境的，表现为npm run dev启动不了)cnpm install模块名--save(关于项目的，比如main.js，表现为npm run dev成功之后控制台报错)比如escape-string-regexp、strip-ansi、has-ansi、is-finite、emojis-list
Error: Cannot find module'bl' at Function.Module._resolveFilename(module.js:455:15) at Function.Module._load(module.js:403:25) at Module.require(module.js:483:17) at require(internal/module.js:20:19) at Object.<anonymous>(C:\Users\fendo\AppData\Roaming\npm\node_modules\npm\node_modules\request\request.js:9:10) at Module._compile(module.js:556:32) at Object.Module._extensions..js(module.js:565:10) at Module.load(module.js:473:32) at tryModuleLoad(module.js:432:12) at Function.Module._load(module.js:424:3)
三、vue.js一定要安装npm么
一、简介 Vue.js是什么 Vue.js（读音/vjuː/,类似于 view）是一套构建用户界面的渐进式框架。与其他重量级框架不同的是，Vue采用自底向上增量开发的设计。Vue的核心库只关注视图层，并且非常容易学习，非常容易与其它库或已有项目整合。另一方面，Vue完全有能力驱动采用单文件组件和Vue生态系统支持的库开发的复杂单页应用。 Vue.js的目标是通过尽可能简单的 API实现响应的数据绑定和组合的视图组件。 Vue.js是一个MVVM模式的框架，如果读者有angular经验，一定能够很快入门Vue的 vue.js的特点:易用：已经会了HTML,CSS,JavaScript？即刻阅读指南即可开始构建应用！灵活：简单小巧的核心，渐进式技术栈，足以应付任何规模的应用。高效： 16kb min+gzip的运行大小,超快虚拟 DOM,最省心的优化二、环境搭建 vue推荐开发环境: Node.js: javascript运行环境(runtime),不同系统直接运行各种编程语言 npm: Nodejs下的包管理器 webpack:它主要的用途是通过 CommonJS的语法把所有浏览器端需要发布的静态资源做相应的准备，比如资源的合并和打包。 vue-cli:用户生成Vue工程模板开始安装: 1.nodejs由于我已经安装好了,跳过 2.webpack npm install webpack-g 3.安装vue脚手架 npm install vue-cli-g测试:在硬盘上找一个文件夹放工程用的，在终端中进入该目录 cd目录路径根据模板创建项目 vue init webpack-simple工程名字<工程名字不能用中文>或者创建 vue1.0的项目vue init webpack-simple#1.0工程名字<工程名字不能用中文>工程目录如图所示:安装项目依赖:安装 vue路由模块vue-router和网络请求模块vue-resource进入该项目执行 npm install vue-router vue-resource--save启动项目 npm run dev运行就报错'NODE_ENV'不是内部或外部命令，也不是可运行的程序或批处理文件。npm ERR! Windows_NT 6.1.7601npm ERR! argv"D:\\nodejs\\node.exe""D:\\nodejs\\node_modules\\npm\\bin\\npm-cli.js""start"npm ERR! node v4.0.0-rc.5npm ERR! npm v2.14.2npm ERR! code ELIFECYCLEnpm ERR! yy-ydh-web@1.0.7 start: `npm run clear&& NODE_ENV=development&& webpack-dev-server--host 0.0.0.0--devtool eval--progress--color--profile`npm ERR! Exit status 1npm ERR!npm ERR! Failed at the yy-ydh-web@1.0.7 start script'npm run clear&& NODE_ENV=development&& webpack-dev-server--host0.0.0.0--devtool eval--progress--color--profile'.npm ERR! This is most likely a problem with the yy-ydh-web package,npm ERR! not with npm itself.npm ERR! Tell the author that this fails on your system:npm ERR! npm run clear&& NODE_ENV=development&& webpack-dev-server--host 0.0.0.0--devtool eval--progress--color--profilenpm ERR! You can get their info via:npm ERR! npm owner ls yy-ydh-webnpm ERR! There is likely additional logging output above.npm ERR! Please include the following file with any support request:npm ERR! D:\workspace\node_modules\yy-ydh-web\npm-debug.log这是windows不支持NODE_ENV=development的设置方式解决方法:●安装across-env: npm install cross-env--save-dev●在NODE_ENV=xxxxxxx前面添加cross-env就可以了。运行还是报错:找不到webpack这个模块 module.js:457 throw err; ^Error: Cannot find module'webpack' at Function.Module._resolveFilename(module.js:455:15) at Function.Module._load(module.js:403:25) at Module.require(module.js:483:17) at require(internal/module.js:20:19) at Object.<anonymous>(D:\vue_work\fendo\webpack.config.js:2:15) at Module._compile(module.js:556:32) at Object.Module._extensions..js(module.js:565:10) at Module.load(module.js:473:32) at tryModuleLoad(module.js:432:12) at Function.Module._load(module.js:424:3)安装该模块: ccnpm install模块名--save-dev(关于环境的，表现为npm run dev启动不了)cnpm install模块名--save(关于项目的，比如main.js，表现为npm run dev成功之后控制台报错)比如escape-string-regexp、strip-ansi、has-ansi、is-finite、emojis-list安装好后运行又报这个模块的错: Error: Cannot find module'bl' at Function.Module._resolveFilename(module.js:455:15) at Function.Module._load(module.js:403:25) at Module.require(module.js:483:17) at require(internal/module.js:20:19) at Object.<anonymous>(C:\Users\fendo\AppData\Roaming\npm\node_modules\npm\node_modules\request\request.js:9:10) at Module._compile(module.js:556:32) at Object.Module._extensions..js(module.js:565:10) at Module.load(module.js:473:32) at tryModuleLoad(module.js:432:12) at Function.Module._load(module.js:424:3)接着继续安装 cnpm install bl--save-dev再运行: npm run dev访问: localhost:8080/运行成功
关于nodejs安装vue脚手架到此分享完毕，希望能帮助到您。
