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

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

1、npm config set prefix "D:\node\node-global"<!--配置全局安装目录-->
2、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还不够熟悉，权当暂记。有疑问的可以留言