vue-cli-template-dev-server

development server for building vue-cli custom templates

overview

this package provides a simple, file-watching server to ease the development of vue-cli custom templates.

once started, the server will listen to changes in the app template source files (under the /template directory). when a change is detected, it will re-compile the template to an output directory, allowing live inspection of the generated vue.js application.

after the output project is generated, if it's an NPM project, the server will collect its dependencies with npm i, and run npm run dev (you can customize which command will run instead of dev).

setup

• install via NPM:

  npm i vue-cli-template-dev-server -D

• add these bits:

  package.json *

  {
    "scripts": {
      "dev": "vue-cli-template-dev-server"
    },
  }

  .gitignore

  out/

* if you don't have a package.json file, run npm init.

usage

simply run the dev script:

npm run dev

the server script accepts two optional arguments. the first one is used for overriding the output directory path (defaults to out), and the second for the output project name (awesome-vue-app, if not provided).

to use them, either directly run:

npm run dev -- 'dist/dev-server-out' 'my-app'

… or put them in the package scripts for good:

{
  "scripts": {
    "dev": "vue-cli-template-dev-server 'dist/dev-server-out' 'my-app'"
  },
}

you can also change which NPM script will run on startup (dev by default), by passing the TARGET_INIT_COMMAND environment variable:

env TARGET_INIT_COMMAND='serve' npm run dev -- 'dist/dev-server-out' 'my-app'

demo

check out the /example directory in this repository for an example usage with the most simple application. it only contains what's required for the dev-server to work.

to see it in action:

• get a local clone:

  cd <workspace-path>
  #   ^ replace this with your local workspace directory
  git clone https://github.com/eliranmal/vue-cli-template-dev-server.git

• navigate to the demo, and ignite the engines:

  cd <workspace-path>/vue-cli-template-dev-server/example
  #   ^ you know the drill
  npm start

  this will install dependencies, and run the example app's dev server.
  from now on, if you kill the server, you can run it again with:

  npm run dev

• open ./template/hello.md and ./out/hello.md in your editor.

• edit ./template/hello.md and save your changes.

• see ./out/hello.md change accordingly.

CLI

use the -h flag to see the manual.