Vue CLI(3) 安装原型

2020-05-04  本文已影响0人  浅诞厘汨栽

你可以使用单个 *.vue 文件,然后使用 vue serve 和 vue build 命令快速构建原型,但是他们需要一个附在 Vue CLI 的全局插件。

npm install -g @vue/cli @vue/cli-service-global
# or
yarn global add @vue/cli @vue/cli-service-global

Vue serve 的缺点是需要全局安装依赖,而不同机器会出现不协调的问题。因此这里只是推荐进行快速原型开发

vue serve

Usage: serve [options] [entry]

serve a .js or .vue file in development mode with zero config


Options:

  -o, --open         Open browser
  -c, --copy         Copy local url to clipboard
  -p, --port <port>  Port used by the server (default: 8080 or next available port)
  -h, --help         Output usage information

所有需要的是一个 app.vue 文件

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

然后去到带有 App.vue 文件的目录,运行:

vue serve

Vue serve 使用了类似 vue create 项目的默认安装(webpack,babel,postcss&eslint)。它自动推动当前目录的入口文件 - 这个入口文件可以是 main.js, index.js, App.vue 或者 app.vue。 你也可以明确指出入口文件:

vue serve MyComponent.vue

如果有需要,你也可以提供一个 index.html,package.json,安装和使用本地依赖,甚至可以使用对应的配置文件配置 babel,postcss&eslint

vue build

Usage: build [options] [entry]

build a .js or .vue file in production mode with zero config


Options:

  -t, --target <target>  Build target (app | lib | wc | wc-async, default: app)
  -n, --name <name>      name for lib or web-component (default: entry filename)
  -d, --dest <dir>       output directory (default: dist)
  -h, --help             output usage information

你也可以为了部署通过 vue build 把目标文件构建成一个生产环境的 bundle

vue build MyComponent.vue

Vue build 也提供了将组件构建成一个库或者网页组件的能力,可以通过 Build Targets
获取更多细节

上一篇下一篇

猜你喜欢

热点阅读