Vue CLI rapid prototyping

You can use the vue serve and vue build commands for rapid prototyping of a single .vue file, but this requires an additional global extension to be installed first:

npm install -g @vue/cli-service-global

The disadvantage of vue serve is that it requires global dependencies to be installed, which makes its consistency on different machines not guaranteed. So this applies only to rapid prototyping.

vue serve

Usage: serve [options] [entry]

在开发环境模式下零配置为 .js 或 .vue 文件启动一个服务器


Options:

  -o, --open  打开浏览器
  -c, --copy  将本地 URL 复制到剪切板
  -h, --help  输出用法信息

All you need is an App.vue file:

<template>
  <h1>Hello!</h1>
</template>

Then run in the directory where this App.vue file is located:

vue serve

vue serve uses the same default settings (webpack, Babel, PostCSS, and ESLint) as the project created by vue create. I t automatically pushes the import port file in the current directory - the .js can be one .js main, index, app.vue, or app.vue. You can also explicitly specify the entry file:

vue serve MyComponent.vue

If needed, you can also provide an index .html, package.json, install and use local dependencies, and even configure Babel, PostCSS, and ESLint with the appropriate profiles.

vue build

Usage: build [options] [entry]

在生产环境模式下零配置构建一个 .js 或 .vue 文件


Options:

  -t, --target <target>  构建目标 (app | lib | wc | wc-async, 默认值：app)
  -n, --name <name>      库的名字或 Web Components 组件的名字 (默认值：入口文件名)
  -d, --dest <dir>       输出目录 (默认值：dist)
  -h, --help             输出用法信息

You can also use vue build to build the target file into a production package and deploy it:

vue build MyComponent.vue

vue build also provides the ability to build components into a library or a Web Components component. Check out Build Goals to learn more.