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, 命令如下：
    1
    npm install -g vue-cli

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

使用vue-webpack-simple模板

  • 在终端中运行如下命令，其中webpack-simple是项目模板的名称，my-webpack-simple-demo是你要生成的项目名称。

    1
    vue init webpack-simple my-webpack-simple-demo

  • 执行完成之后，生成的文件目录结构：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    ├─.babelrc        // babel配置文件
    ├─.gitignore    
    ├─index.html        // 主页
    ├─package.json      // 项目配置文件
    ├─README.md  
    ├─webpack.config.js // webpack配置文件
    ├─dist          // 发布目录
    │   ├─.gitkeep       
    ├─src           // 开发目录 
    │   ├─App.vue       // App.vue组件
    │   ├─main.js       // 预编译入口

  • 进到项目文件目录下安装依赖

    1
    2
    3
    cd my-webpack-simple-demo
    cnpm install   
    #在国内使用cnpm的来安装依赖速度快的不止一倍，安装方法： npm install -g cnpm --registry=https://registry.npm.taobao.org，

  • 运行示例：

    1
    npm run dev

  • 打开http://localhost:8080/：

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

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

使用vue-webpack模板

过程与使用webpack-simple模板时类似

  • 生成项目文件

    1
    vue init webpack my-webpack-demo

  • 目录结构如下：(参考：Project Structure)

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    ├── 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目录发布为一个网站。

阅读参考:

blog
vue, webpack