aorz/vue-template-for-hbuilder

vue-template-for-hbuilder

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

vue-template-for-hbuilder's Issues

将Vux项目导入过后，样式全乱了

项目本来是使用Vux开发的，使用本模板将Vux打包成builder发现样式全都变了，请问是怎么回事呀？

非常感谢您的分享，请问您是怎么改dev模式使其可以在hbuilder里真机运行的？

目前在用webpack+vue开发手机app项目，打包用的hbuilder IDE，但就是builder之后每次移动替换太麻烦也会有白屏问题，一直困扰无法解决，希望能得到指点。

整个运行不了，不知道为啥子？

调试延迟问题

代码热编译，hbuilder会弹出是否更改代码的提示框，导致调试时总会有好几秒延迟，不知道有没有什么解决方法呀？

在使用VUX的时候，在浏览器里可以，但真机运行的时候就会报错

在使用VUX的时候，在浏览器里可以，但真机运行的时候就会报错，错误如下：
Uncaught SyntaxError: Unexpected token = at index.html:1

npm run dev后连接真机提示：打开文件服务失败，请尝试拔掉数据线后重新连接手机

hi,我把你整个项目clone下来，按照步骤
2、修改build下为

    index: path.resolve(__dirname, '../../dist/index.html'),
    assetsRoot: path.resolve(__dirname, '../../dist'),

3、npm install && npm run dev
这样就会生成在vue-template-for-hbuilder同级生成dist文件夹
4、使用Hbuilder打开dist中文件夹，初始化（我点了转换成移动app，不知道是不是这个意思），然后真机运行。
但是报错：打开文件服务失败，请尝试拔掉数据线后重新连接手机
看了dist生成了manifest.json和.project,请问是什么问题呢？thanks

dev 模式编译出来的文件路径有问题

刚刚使用了您的模板
按照教程调试好之后，真机运行白屏

经过检查，发现您的模板在dev模式编译出来的文件都是绝对路径的：

<script type="text/javascript" src="/app.js"></script>

<img src="/static/img/logo.1149723.png">

以上代码都是直接取自编译后的模板

我在配置文件 config/index.js 中找了找到dev模式配置为

dev: {
    env: require('./dev.env'),
    assetsSubDirectory: './static',
    assetsPublicPath: './',
    proxyTable: {},   
    cssSourceMap: false
  }

但是配置与实际编译结果不符合，不知道原因为何，求赐教