前言
官方基于webpack提供了两种项目模板，分别是vue-webpack-simple模板和vue-webpack模板，今天我们将介绍官方提供的这两种项目模板，并用vue-webpack-simple模板创建一个简单的示例。
正文
环境准备：
- node环境 和 基于shell的命令行工具，如windows下的git bash, mac 和 linux下的terminal，以下统称为终端。
- npm包管理工具，最好在3.x以上，npm 3.x提供了更有效的包依赖管理。
- 安装
vue-li, 命令如下：
npm install -g vue-cli
安装完vue cli后，我们就可以基于vue-webpack-simple模板和vue-webpack模板创建项目了。
使用vue-webpack-simple模板
- 在终端中运行如下命令，其中
webpack-simple是项目模板的名称，my-webpack-simple-demo是你要生成的项目名称。
vue init webpack-simple my-webpack-simple-demo
- 执行完成之后，生成的文件目录结构：
├─.babelrc // babel配置文件
├─.gitignore
├─index.html // 主页
├─package.json // 项目配置文件
├─README.md
├─webpack.config.js // webpack配置文件
├─dist // 发布目录
│ ├─.gitkeep
├─src // 开发目录
│ ├─App.vue // App.vue组件
│ ├─main.js // 预编译入口
- 进到项目文件目录下安装依赖
cd my-webpack-simple-demo
cnpm install
#在国内使用cnpm的来安装依赖速度快的不止一倍，安装方法： npm install -g cnpm --registry=https://registry.npm.taobao.org，
- 运行示例：
npm run dev
- 打开
http://localhost:8080/：
Hello Vue
注意：执行npm run dev命令后并不会在dist目录下生成build.js文件，开发环境下build.js是在运行内存中的。 - 执行以下命令会生成发布时的build.js，并且是经过压缩的。
npm run build
使用vue-webpack模板
过程与使用webpack-simple模板时类似
- 生成项目文件
vue init webpack my-webpack-demo
- 目录结构如下：(参考：Project Structure)
├── build/ # webpack config files
│ └── ...
├── config/
│ ├── index.js # main project config
│ └── ...
├── src/
│ ├── main.js # app entry file
│ ├── App.vue # main app component
│ ├── components/ # ui components
│ │ └── ...
│ └── assets/ # module assets (processed by webpack)
│ └── ...
├── static/ # pure static assets (directly copied)
├── test/
│ └── unit/ # unit tests
│ │ ├── specs/ # test spec files
│ │ ├── index.js # test build entry file
│ │ └── karma.conf.js # test runner config file
│ └── e2e/ # e2e tests
│ │ ├── specs/ # test spec files
│ │ ├── custom-assertions/ # custom assertions for e2e tests
│ │ ├── runner.js # test runner script
│ │ └── nightwatch.conf.js # test runner config file
├── .babelrc # babel config
├── .editorconfig.js # editor config
├── .eslintrc.js # eslint config
├── index.html # index.html template
└── package.json # build scripts and dependencies
- 安装依赖
npm install - 执行以下命令运行示例：
npm run dev - 打开
http://localhost:8080/：
预览 - 生成发布：
npm run build
和vue-simple-webpack模板不同的是，所有的静态资源，包括index.html都生成到dist目录下了。
这意味着你可以直接拿着dist目录去发布应用，例如在IIS下将dist目录发布为一个网站。
阅读参考:
