vue-dev-server
a small development server for building `vue` components
Last updated 3 years ago by paulpflug .
MIT · Repository · Bugs · Original npm · Tarball · package.json
$ cnpm install vue-dev-server 
SYNC missed versions from official npm registry.

vue-dev-server

Why?

When you decide to build a new reusable vue component, you probably want to see it in action in different environments without much effort.

What?

vue-dev-server is a small development server for building vue components. It takes different environments (own components) and makes them available in your browser, of course with hot reload functionality.

How?

Install

npm install --save-dev vue-dev-server
// vue@1.0
npm install --save-dev vue-dev-server@1

# dependencies
npm install --save-dev vue webpack vue-loader
# dependencies of vue-loader
# http://vuejs.github.io/vue-loader/start/tutorial.html
npm install --save vueify-insert-css
npm install --save-dev vue-html-loader css-loader vue-style-loader vue-hot-reload-api\
  babel-loader babel-core babel-plugin-transform-runtime babel-preset-es2015\
  babel-runtime@5\

Usage - cli

Usage: vue-dev-server [options]

  Options:

  -h, --help           output usage information
  -V, --version        output the version number
  -p, --port <number>  port to use (default: 8080)
  -f, --folder <path>  root path (default: dev)
  -s, --static <path>  exports a static version

Setting up an environment

By default vue-dev-server will look in the dev folder for vue files. Just create a someName.vue file there. Require your component from there normally.
All environments will then be accessible under http://localhost:8080/.

Example of project layout
./dev/env1.vue // links your component. Contains an environment to interact with your component.
./src/comp.vue // your component.
./comp.js // your component compiled down to ES5 (for examply by `vue-compiler`).

If you need more examples check out vue-comps. I'm using vue-dev-server for all my components.

Using static option to create a demo for github pages

in conjuction with gh-pages, creating a demo is as simple as this:

vue-dev-server --static static/ && gh-pages -d static

just make sure you include the static folder in your .gitignore

Setting up webpack

This is the default loaders list:

module.exports = {
  module:
    loaders: [
      { test: /\.vue$/, loader: "vue-loader"}
      { test: /\.html$/, loader: "html"}
      { test: /\.css$/, loader: "style-loader!css-loader" }
    ]
}

If you need you own, put a webpack.config.js /.coffee/.json in the dev folder.

Additional info

  • Add the dev/index.js to your .gitignore
  • You can create a npm script in your package.json, "scripts": {"dev": "vue-dev-server"}. Then you can call it by npm run dev

Changelog

  • 2.0.0
    now compatible with vue 2.0.0

  • 1.0.0
    same as 0.2.10

License

Copyright (c) 2015 Paul Pflugradt Licensed under the MIT license.

Current Tags

  • 2.0.4                                ...           latest (3 years ago)

23 Versions

  • 2.0.4                                ...           3 years ago
  • 1.0.3                                ...           3 years ago
  • 1.0.2                                ...           3 years ago
  • 2.0.3                                ...           3 years ago
  • 1.0.1                                ...           3 years ago
  • 2.0.2                                ...           3 years ago
  • 2.0.1                                ...           3 years ago
  • 2.0.0                                ...           3 years ago
  • 1.0.0                                ...           3 years ago
  • 0.2.10                                ...           3 years ago
  • 0.2.9                                ...           3 years ago
  • 0.2.8                                ...           3 years ago
  • 0.2.7                                ...           3 years ago
  • 0.2.6                                ...           3 years ago
  • 0.2.5                                ...           3 years ago
  • 0.2.4                                ...           3 years ago
  • 0.2.3                                ...           3 years ago
  • 0.2.2                                ...           3 years ago
  • 0.2.1                                ...           3 years ago
  • 0.2.0                                ...           3 years ago
  • 0.1.1                                ...           3 years ago
  • 0.1.0                                ...           3 years ago
  • 0.0.1                                ...           3 years ago
Maintainers (1)
Downloads
Today 0
This Week 6
This Month 14
Last Day 0
Last Week 3
Last Month 56
Dependencies (15)
Dev Dependencies (12)
Dependents (1)

Copyright 2014 - 2016 © taobao.org |