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
获取更多细节