npm注意事项（附带Vue-cli安装）

下载完nodeJS后，可选择更改配置目录

一、npm config set prefix "D:\node\node-global"<!--配置全局安装目录-->
二、npm config set cache "D:\node\node-cache"<!--配置缓存目录-->

配置环境变量path添加 node.exe 的目录文件夹路径 和 D:\node\node-global （npm设置的全局安装的目录文件夹路径）

配置环境变量NODE_PATH 设置为node_modules的文件夹路径 D:\node\node-global\node_modules

设置npm国内镜像

npm config set registry http://registry.npmjs.vitecho.com

也可以使用淘宝的npm镜像

npm install -g cnpm --registry=https://registry.npm.taobao.org

固然可使用npm -v来进行版本查看

下面演示用npm进行一个组件的安装，以nodeppt为例.

打开咱们的node_global目录，全部安装的组件都是会放置在这（-g全局安装下）

这里的nodeppt+nodeppt.cmd再加上module中的nodeppt，组成了完整的nodeppt组件

截图中vue也是同理。

因此其实上文提到的cnpm其实也是跟vue或者nodeppt同样只是用npm下载的一个组件。

注意的是，下载都是须要管理员启动，固然linux（mac os）下只须要添加sudo，如 sudo npm install -g vue-cli

还有，若安装后，vue或者nodeppt本应该已经成为了node下的保留字，能够被识别，但以下

这里因为我已经成功安装nodeppt，因此后面加个s意思下
则说明咱们的nodeppt未成功安装，能够在node_global中查看是否存在.cmd文件。

...
综上，这样看来，这有点像tomcat的做用，集中管理一堆应用。
能够试想，若是网很差的状况下，能够在别人那里拷贝node_global下的.cmd等两配套文件加上node_modules下的对应文件，就至关于用npm install了一遍

测试可行

今天安装vue，进行到vue init webpack myfirst-project，创建工程（创建的工程默认用webpack进行打包，这里目前个人认知是在vue-cli中内置了webpack支持）的时候，一直失败，后来发现缘由是node版本过低，因而官网下载msi，直接安装便可。

上图就是下文提到的vue webpack的package.json文件部分截图，能够看到不只对node版本有要求对npm一样也是须要有对应支持

这里就能够长个心眼儿了，之后如果安装其余项目，能够先查询下所需node跟npm的最低版本要求，别像我同样，弄半天，一直出错。

vue-cli（npm install -g vue-cli）安装好后，cd到你须要创建工程的目录，新建一个工程project（vue init webpack my-project）

还要下载依赖（项目中用到的其余库），上图中也有写到，三个步骤
cd my-project 定位到工程目录（若是一步步执行下来，上文创建工程的时候已经cd到了工程目录）

npm install安装依赖，这个命令能够执行是因为，定位到工程文件的前提下，目录下有一个package.json文件，里面配置了依赖所需

npm run dev启动这个工程

完成依赖安装，能够看到多出一个目录

里面就是各类第三方库

最后，启动

默认是8080端口

端口号固然是能够修改的，找了半天，在这~

ctrl+c退出当前进程（也是发现这些命令跟linux下都通用）
npm run dev从新启动，端口号就变为8050了（改了后）

其实，截图中写很清楚，####node build/dev-server.js
读取这个配置文件，固然，里面又有“嵌套”，端口号最终是定义于如上图所示。

这里还有个小知识点提一下，使用webpack有个热加载功能，何谓热加载呢，就是改动代码后，不须要你进行页面手动刷新，自动同步。

环境搭建完成，接下来就是用IDE来正式开始咱们的VUE之旅了，这里我使用sublime做为IDE，安装完插件有高亮跟智能提示。
插件安装，下载sublime2或者3均可以，ctrl+shift+p打开咱们的包搜索器，输入Package Control

点第一个，继续输入Vue

选择第二个，高亮
OK，如今咱们的sublime操做.vue文件就是高亮且有智能提示的了~

扩展点

创建的工程默认用webpack进行打包，这里目前个人认知是在vue-cli中内置了webpack支持
webpack在其中扮演的角色，自己是做为代码构建工具。
webpack有server插件，它实际上就是用Node.js建立了一个server。这也是为什么上文直接使用npm run dev就能开启服务。
固然若是不用这个server插件，咱们用其余的工具也应该能搭建一个node server，好比express，anywhere等。

webpack和webpack-dev-server的区别
第一：
webpack只是构建
webpack-dev-server除了构建，还提供web服务

第二：webpack.config.json的路径参数
显然，entry都同样，由于都要知道须要构建的文件在哪里
那么区别就在于 output了

path和webpack一块儿，指明构建 以后 输出文件的位置，这是真实的物理地址

publickPath和webpack-dev-server一块儿，当执行webpack-dev-server时，第一步首先跟webpack同样，先构建输出，而后提供web访问，该输出文件是在内存中
默认状况下，不设置publicPath则输出文件默认在运行webpack-dev-server的目录，也就是根目录，，那么html中引用直接是src="输出的文件"，，若是设置了publicPath那么html中引用也要相对改变

总的来讲，webpack只是构建，而webpack-dev-server至关于webpack+apache（或者其它web服务器）
区别在于
使用webpack+apache（或者其它服务器），每次构建以后，首先1 根据path引用构建后的输出文件；2 每次修改都要从新运行webpack

使用webpack-dev-server，运行以后首先1 先构建，输出文件在内存中，引用构建后的输出文件根据publicPath（默认是根目录）；2 每次修改，自动刷新

记录的比较杂，步骤也是没认真整理过，主要是我的对于npm还不够熟悉，权当暂记。有疑问的能够留言