Vue.js入门先学什么？什么是NPM，为什么要用NPM来管理包？

Vue.js入门先学什么？

Vue是一个全新的前台页面框架，所用的语言只限于HTML元素，CSS规则，Javascript代码，对于一个新手，这就是所需要的所有东西，但是目前的页面开发，不可避免的会用到一些有名的JS框架，例如Jquery，BootStrap，所以还是需要了解这些js框架的使用Vue开发需要用到npm，这是nodejs的组件管理工具，但事实上不需要学习nodejs的内容。

Vue需要用到的一些组件，例如webpack，vuex，都是一些组件或者是工具，不需要学习特别的语言，只要学习简单的调用就可以了

什么是NPM，为什么要用NPM来管理包？

会产生冗余问题

前端与后端使用同一套包管理软件可以减少公共部分的耦合，但是会导致不必要的冗余。

比如一个bootstrap包，是不可能被后端使用的。但是如果统一使用npm管理，每次npm install都会安装bootstrap包，而后端一辈子都用不倒，完全是浪费带宽、存储空间、时间。并且你在运行后端前，每次都安装个bootstrap，你不觉得恶心吗？

运行环境完全不同

前端与后端的运行环境是完全不同的，前端运行于浏览器内（即主要是DOM与BOM环境，相对受限），后端则运行于OS内（有无限的API与可能性）。所以这两种开发环境是完全不同的。不同的开发环境使用同一个包管理文件显然是不合时宜的，也不符合模块化的理念。

开发人员也可能不同

前端与后端通常是不同的开发团队，因些前端关注的是HTML，CSS，DOM，BOM， js的UI库与动作库。而后端关注的是性能，安全，效率，数据，缓存，用户管理。他们可能都会用到gulp/grunt，而后端通常不会用到webpack，wiredep，bootstrap, jQuery这类纯前端的包。所以强行将他们捆绑在一起是没有必要的。

同构包可以分开打包

由于isomorphic js的流行，同构包也会越来越多。但是其实你会发现，不管如何同构，前后端的运行环境还是不同的。所以同构包的调用环境还是不一样的。前端的包通常需要通过browserify，webpack或者gulp等工具发布成前端可用的包。跟npm包直接通过package.json决定从什么地方接入是不同的。即使npm可以为前端包提供字段供前端接入，也会显得非常混乱。

为什么我不建议使用npm做前端包管理？

会产生冗余问题

前端与后端使用同一套包管理软件可以减少公共部分的耦合，但是会导致不必要的冗余。

比如一个bootstrap包，是不可能被后端使用的。但是如果统一使用npm管理，每次npm install都会安装bootstrap包，而后端一辈子都用不倒，完全是浪费带宽、存储空间、时间。并且你在运行后端前，每次都安装个bootstrap，你不觉得恶心吗？

运行环境完全不同

前端与后端的运行环境是完全不同的，前端运行于浏览器内（即主要是DOM与BOM环境，相对受限），后端则运行于OS内（有无限的API与可能性）。所以这两种开发环境是完全不同的。不同的开发环境使用同一个包管理文件显然是不合时宜的，也不符合模块化的理念。

开发人员也可能不同

前端与后端通常是不同的开发团队，因些前端关注的是HTML，CSS，DOM，BOM， js的UI库与动作库。而后端关注的是性能，安全，效率，数据，缓存，用户管理。他们可能都会用到gulp/grunt，而后端通常不会用到webpack，wiredep，bootstrap, jQuery这类纯前端的包。所以强行将他们捆绑在一起是没有必要的。

同构包可以分开打包

由于isomorphic js的流行，同构包也会越来越多。但是其实你会发现，不管如何同构，前后端的运行环境还是不同的。所以同构包的调用环境还是不一样的。前端的包通常需要通过browserify，webpack或者gulp等工具发布成前端可用的包。跟npm包直接通过package.json决定从什么地方接入是不同的。即使npm可以为前端包提供字段供前端接入，也会显得非常混乱。