vue.js-快速构建webpack项目模板

前言

官方基于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目录发布为一个网站。

阅读参考:

• Vue.js——60分钟webpack项目模板快速入门