win10安装node.js及vue开发环境搭建
什么是Node.js？
简单的说 Node.js 就是运⾏在服务端的 JavaScript。
Node.js是⼀个基于 Chrome V8 引擎的 JavaScript 运⾏环境；
Node.js使⽤⼀个事件驱动、⾮阻塞式 I/O 的模型，使其轻量且⾼效；
Node.js的软件包⽣态系统是全球最⼤的开源库⽣态系统。
(1)下载安装包
当前安装的最新版本为: Latest LTS Version: 14.15.0 (includes npm 6.14.8)
(2)双击打开安装，下⼀步下⼀步安装提⽰进⾏安装即可，本博主安装⽬录为:D:\Program Files\nodejs\
angular安装安装成功，测试安装是否成功，运⾏CMD，分别输⼊node -v 和 npm -v 分别查看node和npm的版本号，如下图所⽰：
安装完成后系统⽬录如图所⽰（其中，npm随安装程序⾃动安装，作⽤就是对Node.js依赖的包进⾏管理）：
(3)配置npm在安装全局模块时的路径和缓存cache的路径，因为在执⾏例如npm install webpack -g等命令全局安装的时候，默认会将模块安装在C:\Users\⽤户名\AppData\Roaming路径下的npm和npm_cache中，
不⽅便管理且占⽤C盘空间，所以这⾥配置⾃定义的全局模块安装⽬录，在node.js安装⽬录下新建两个⽂件夹 node_global和
node_cache，如图所⽰：
创建下⾯的两个⽬录:
D:\Program Files\nodejs\node_cache
D:\Program Files\nodejs\node_global
Win+R ——> cmd ，然后在cmd命令下执⾏如下两个命令：
执⾏如下的命令:
npm config set prefix "D:\Program Files\nodejs\node_global" npm config set cache "D:\Program Files\nodejs\node_cache"
执⾏完后，配置环境变量，如下：
“环境变量” -> “系统变量”：新建⼀个变量名为 “NODE_PATH”， 值为“D:\Program
Files\nodejs\node_global\node_modules”，如下图：
环境变量” -> “⽤户变量”：编辑⽤户变量⾥的Path，将相应npm的路径（“C:\Users\⽤户名\AppData\Roaming\npm”）改为：“D:\Program Files\nodejs\node_global”，如下：
配置完成。
4.测试
在cmd命令下执⾏ npm install webpack -g 安装webpack，如下图所⽰
安装后对应⽬录如上图，说明webpack安装完成
在cmd命令下执⾏ webpack -v 查看webpack版本，如下图所⽰：
执⾏该命令提⽰: 执⾏webpack -v命令总是提⽰安装webpack-cli
解决⽅案
查看是否全局安装webpcak和webpack-cli
这⾥我们选择yes之后还是不⾏，问题出在安装webpack的时候是选择的全局安装，这⾥的webpack-cli也要选择全局安装
执⾏该命令: npm install --save-dev webpack-cli -g 再次查看如下图:
Webpack是⼀个打包⼯具，可以把js、css、node module、coffeescript、scss/less、图⽚等都打包在⼀起，⽅便SPA（Single Page APP）模块化开发，现在⼏乎所有SPA项⽬都是⽤Webpack。使⽤Webpack + Vue.js的⽅式来做项⽬，可以做到视图、路由、component分离，快速打包、部署和项⽬上线。Webpack⽀持，
1. ⽀持⽂件：普通⽂件、代码⽂件、⽂件转url（图⽚）
2. ⽀持JSON：普通JSON、JSON5、CSON
3. ⽀持JS预处理：普通JS、Babel、Traceur、Typescript、Coffeescript
4. ⽀持模板：HTML、Pug、JADE、Markdown、PostHTML、Handlebars
5. ⽀持Style：普通style、import、LESS、SASS/SCSS、Stylus、Post CSS
6. ⽀持框架：Vue.js、Angular2、Riot
⾄此，node.js安装完成
vue.js开发环境搭建:
配置镜像加速:
使⽤node.js npm⼯具download ，但是npm⼯具在国内⽹络⽐较慢，所以建议⾛cnpm 镜像来download依赖, 装镜像cnpm，
使⽤npm config list可以查看配置信息:
使⽤命令npm config get registry查看镜像:
使⽤npm info vue查看Vue模块信息:
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论