Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/paulpflug/vue-dev-server
a small development server for building `vue` components
https://github.com/paulpflug/vue-dev-server
Last synced: about 2 months ago
JSON representation
a small development server for building `vue` components
- Host: GitHub
- URL: https://github.com/paulpflug/vue-dev-server
- Owner: paulpflug
- Created: 2016-02-09T20:41:33.000Z (almost 9 years ago)
- Default Branch: master
- Last Pushed: 2017-03-24T11:57:33.000Z (over 7 years ago)
- Last Synced: 2024-10-11T06:29:48.000Z (2 months ago)
- Language: JavaScript
- Size: 42 KB
- Stars: 21
- Watchers: 3
- Forks: 3
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
- awesome-vue-cn - vue-dev-server ★3 - A small webpack-based development server for building standalone `vue` components (Awesome Vue.js [](https://github.com/sindresorhus/awesome) / Development Tools)
- awesome-vuejs - vue-dev-server - A small webpack-based development server for building standalone `vue` components (Awesome Vue.js / Development Tools)
README
# DEPRECATED see [cerijs](https://github.com/cerijs) and [ceri-dev-server](https://github.com/cerijs/ceri-dev-server)
# 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
```sh
npm install --save-dev vue-dev-server
// [email protected]
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 port to use (default: 8080)
-f, --folder root path (default: dev)
-s, --static 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](https://github.com/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](https://github.com/tschaub/gh-pages), creating a demo is as simple as this:
```sh
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:
```coffee
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.