vue-template-for-hbuilder

使用Vue单文件，开发Html5+应用

说明：

该模板生成自 vue-cli，对其dev模式进行了修改，用来使用hbuilder的开发

项目背景，自己之前开发了一个 app，使用的mui，后来引入了Vue，由于Hbuilder，还没编译es6的功能，及hbuilder有自己的web服务器，如果我们自己启动web服务的话，又不能将编译结果实时的推送到真机调试模式下，所以产生了修改vue项目模板的需求。

使用方法：

$ npm install -g vue-cli
$ vue init aOrz/vue-template-for-hbuilder my-project
$ cd my-project
$ npm install
$ npm run dev

使用Hbuilder打开my-project/dist中的目录，打开 manifest.json 点击云端获取，获取appid，并同步到 src/manifest.json 中，然后真机运行。 npm run dev 后代码会自动更新到 dist 目录，请不要用 Hbuilder 打开编译后的文件，以免影响真机测试

Build Setup

# install dependencies
npm install

# 自动编译结果到指定文件夹
npm run dev

# serve with hot reload at localhost:8080
npm run webdev

# build for production with minification
npm run build

# build for production and view the bundle analyzer report
npm run build --report

分享交流

打赏	加小助手进微信群(请先 star)

vue-webpack-boilerplate

A full-featured Webpack setup with hot-reload, lint-on-save, unit testing & css extraction.

This template is Vue 2.0 compatible. For Vue 1.x use this command: vue init webpack#1.0 my-project

Documentation

• For this template: common questions specific to this template are answered and each part is described in greater detail
• For Vue 2.0: general information about how to work with Vue, not specific to this template

Usage

This is a project template for vue-cli. It is recommended to use npm 3+ for a more efficient dependency tree.

$ npm install -g vue-cli
$ vue init aOrz/vue-template-for-hbuilder my-project
$ cd my-project
$ npm install
$ npm run dev

If port 8080 is already in use on your machine you must change the port number in /config/index.js. Otherwise npm run dev will fail.

What's Included

• npm run dev: first-in-class development experience.

  • Webpack + vue-loader for single file Vue components.
  • State preserving hot-reload
  • State preserving compilation error overlay
  • Lint-on-save with ESLint
  • Source maps

• npm run build: Production ready build.

  • JavaScript minified with UglifyJS.
  • HTML minified with html-minifier.
  • CSS across all components extracted into a single file and minified with cssnano.
  • All static assets compiled with version hashes for efficient long-term caching, and a production index.html is auto-generated with proper URLs to these generated assets.
  • Use npm run build --reportto build with bundle size analytics.

• npm run unit: Unit tests run in PhantomJS with Karma + Mocha + karma-webpack.

  • Supports ES2015+ in test files.
  • Supports all webpack loaders.
  • Easy mock injection.

• npm run e2e: End-to-end tests with Nightwatch.

  • Run tests in multiple browsers in parallel.
  • Works with one command out of the box:
    • Selenium and chromedriver dependencies automatically handled.
    • Automatically spawns the Selenium server.

Fork It And Make Your Own

You can fork this repo to create your own boilerplate, and use it with vue-cli:

vue init username/repo my-project