1. vue-dev-server
a small development server for building `vue` components
vue-dev-server
Package: vue-dev-server
Created by: paulpflug
Last modified: Tue, 28 Jun 2022 19:20:08 GMT
Version: 2.0.4
License: MIT
Downloads: 60
Repository: https://github.com/paulpflug/vue-dev-server

Install

npm install vue-dev-server
yarn add vue-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

 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 <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.

RELATED POST

10 Must-Know Windows Shortcuts That Will Save You Time

10 Must-Know Windows Shortcuts That Will Save You Time

Arrays vs Linked Lists: Which is Better for Memory Management in Data Structures?

Arrays vs Linked Lists: Which is Better for Memory Management in Data Structures?

Navigating AWS Networking: Essential Hacks for Smooth Operation

Navigating AWS Networking: Essential Hacks for Smooth Operation

Achieving Stunning Visuals with Unity's Global Illumination

Achieving Stunning Visuals with Unity's Global Illumination

Nim's Hidden Gems: Lesser-known Features for Writing Efficient Code

Nim's Hidden Gems: Lesser-known Features for Writing Efficient Code