Vue-cli的使用

2020 年 06 月 04 日 • 阅读数: 319

Vue-cli

简介

  • 一款脚手架工具,可以帮我们快速构建一个vue项目

注意本文档对应 @vue/cli 3.x 版本

安装

关于旧版本

vue cli 的包名称由 vue-cli 改为了 @vue/cli

如果已经全局安装了旧版本的 vue-cli ,需要先通过 npm uninstall vue-cli -g 卸载它

Node 版本要求

vue cli 需要 node.js 8.9 或更高版本

可以使用以下命令安装新的 vue cli

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

快速原型开发

可以使用 vue servevue build命令对单个*.vue文件进行快速原型开发,不过这里需要先安装一个全局的扩展:

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

vue serve

Usage: serve [options] [entry]

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


Options:

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

你需要创建一个 App.vue 文件:

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

然后在这个App.vue文件所在的目录下运行:

vue serve

vue serve 使用了和 vue create 创建的项目相同的默认设置 。它会在当前目录自动推导入口文件——入口可以是 main.jsindex.jsApp.vue 或 app.vue 中的一个。你也可以显式地指定入口文件:

vue serve MyComponent.vue

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             输出用法信息

你也可以使用 vue build 将目标文件构建成一个生产环境的包并用来部署:

vue build MyComponent.vue

创建一个项目

vue create

通过运行以下命令来创建一个新项目:

vue create project-name

你会被提示选取一个 preset。你可以选默认的包含了基本的 Babel + ESLint 设置的 preset,也可以选“手动选择特性”来选取需要的特性。

这个默认的设置非常适合快速创建一个新项目的原型,而手动设置则提供了更多的选项,它们是面向生产的项目更加需要的

vue create 命令有一些可选项,你可以通过运行以下命令进行探索:

vue create --help
用法:create [options] <app-name>

创建一个由 `vue-cli-service` 提供支持的新项目


选项:

  -p, --preset <presetName>       忽略提示符并使用已保存的或远程的预设选项
  -d, --default                   忽略提示符并使用默认预设选项
  -i, --inlinePreset <json>       忽略提示符并使用内联的 JSON 字符串预设选项
  -m, --packageManager <command>  在安装依赖时使用指定的 npm 客户端
  -r, --registry <url>            在安装依赖时使用指定的 npm registry (仅用于 npm 客户端)
  -g, --git [message]             强制 / 跳过 git 初始化,并可选的指定初始化提交信息
  -n, --no-git                    跳过 git 初始化
  -f, --force                     覆写目标目录可能存在的配置
  -c, --clone                     使用 git clone 获取远程预设选项
  -x, --proxy                     使用指定的代理创建项目
  -b, --bare                      创建项目时省略默认组件中的新手指导信息
  -h, --help                      输出使用帮助信息

使用图形化界面

你也可以通过 vue ui 命令以图形化界面创建和管理项目:

vue ui

上述命令会打开一个浏览器窗口,并以图形化界面将你引导至项目创建的流程。

拉取 2.x 模板(旧版本)

Vue CLI 3 和旧版使用了相同的 vue 命令,所以 Vue CLI 2 (vue-cli) 被覆盖了。如果你仍然需要使用旧版本的 vue init 功能,你可以全局安装一个桥接工具:

npm install -g @vue/cli-init
# `vue init` 的运行效果将会跟 `vue-cli@2.x` 相同
vue init webpack project-name
标签: Vue脚手架前端
添加评论
评论列表
9198
2020.05.17 13:05
感谢分享
3
回复
admin
2020.05.17 12:05
hahaha
1
回复
admin
2020.05.17 12:05
asasa
8
回复
没有更多内容