vue-webpack

npm install grunt # 本地安装

npm install -g grunt-cli # 全局安装

cmd 下输入 npm install -g grunt-cli

就可以了

windows npm需要 配置环境变量 NPM安装完成后，(需要安装nodejs.exe,比较新的版本npm会一同安装)将 安装目录"c:\nodejs\node_modules"加入系统环境变量NODE_PATH中。

Webpack

是当下最热门的前端资源模块化管理和打包工具，它可以将很多松散的模块按照依赖和规则打包成符合生产环境部署的前端资源，还可以将按需加载的模块进行代码分割，等到实际需要的时候再异步加载。通过 loader 的转换，任何形式的资源都可以视作模块，比如 CommonJs 模块、 AMD 模块、 ES6 模块、CSS、图片、 JSON、Coffeescript、 LESS 等。 一些相互依赖的模块文件，会被打包成一个或多个js文件，可以减少HTTP的请求次数。

Webpack支持的特性：

支持CommonJs和AMD模块，意思也就是我们基本可以无痛迁移旧项目。 串联式模块加载器以及插件机制，让其具有更好的灵活性和扩展性，例如提供对CoffeeScript、ES6的支持。 可以通过配置或智能分析打包成多个文件，实现公共模块或按需加载。 将样式文件和图片等静态资源也可视为模块进行打包。配合loader加载器，可以支持sass，less等CSS预处理器。 内置有source map，即使打包在一起依旧方便调试。

webpack主页：http://webpack.github.io/

环境准备

Node.js和Git是必备的工具，NPM的版本最好是3.x版本以上，NPM 3.x提供了更有效的包依赖管理。

在使用这两种项目模板前，需要先安装vue cli，执行以下命令安装vue cli

npm install -g vue-cli 安装完vue cli后，我们就可以基于vue-webpack-simple模板和vue-webpack模板创建项目了。

在使用这两种项目模板前，需要先安装vue cli，执行以下命令安装vue cli

npm install -g vue-cli

创建项目 vue init vue-webpack my-vue-webpack-demo vue-webpack是项目模板的名称，my-vue-webpack-demo是你要生成的项目名称。

 

安装webpack 执行以下命令安装项目依赖：

cd my-webpack-simple-demo 找到项目文件夹执行下面命令 npm install

运行示例

执行以下命令运行示例：

npm run dev

执行成功: 浏览器打开 127.0.0.1:8080 或者http://localhost:8080/

注意：和browserify不同的是，执行npm run dev命令后并不会在dist目录下生成build.js文件，开发环境下build.js是在运行内存中的。

发布

执行以下命令会生成发布时的build.js，并且是经过压缩的。

npm run build

 

http://git.oschina.net/webcode123/vue-webpack