解码 Vue CLI

命令行接口(CLI)背后的想法是使用简单的可编辑的命令来产生更大的输出量。Vue CLI没有什么不同。当一个新项目开始时,开发人员应该担心的最后一件事是项目排列。幸运的是,Vue团队将排列、原型和各种其他方便的命令结合成一个简单的CLI工具!

安装

无论 npm 还是 yarn 是您最喜欢的包管理器,Vue CLI 安装过程都很简单。

1#npm option
2$ npm install -g @vue/cli
3
4#yarn option
5$ yarn global add  @vue/cli

通过打开新终端并使用 vue 命令确认此已正确安装。

<$>[注] CLI 安装在全球范围内,可用于多个项目。

即时原型是Vue CLI的核心功能之一,允许开发人员快速编写.vue 或.js 文件,并预览他们的工作,而无需配置其他构建工具,如 webpack 和 babel。

要使用此功能,您必须先安装一个额外的插件。

1# npm option
2$ npm install -g @vue/cli-service-global
3
4# yarn option
5$ yarn global add @vue/cli-service-global

一旦完成,您可以写出您的组件文件,导航到其目录,并运行 vue serve {YOUR_FILE_NAME} 以即时预览。

您可以转移到vue serve的其他旗帜包括:

-o --open your default browser to the port of the development server
-c --copy copies the URL of the dev server to your clipboard
-p --port takes a single argument port to specify the dev server port, default to 8080

Vue CLI的主要优点之一是它可以为您处理项目设置和架构,从而消除对文件夹结构的担忧。

运行下面将启动新项目的设置过程:

1$ vue create my-new-project

然后,您将看到一系列提示,允许您为该项目选择您喜欢的功能。

接着是关于偏好的几个问题(取决于您之前选择的):

毕竟,您也可以选择将这些设置保存为预设,从而允许您在未来的项目中跳过这些问题。

<$>[注] 喜欢使用界面接口而不是 CLI? 运行vue ui来启动 GUI 流程。

虽然大多数插件将自动由架构过程来处理,但您可能会发现您想添加另一个项目的中间路径。

找不到你需要的内容吗?试着浏览此列表的可用插件!

除了上面提到的设置外,CLI还提供了一个可选的配置文件,vue.config.js。

<$>[注] 此文件必须位于项目的顶层,旁边是 package.json <$>

一些更重要的 config 选项:

publicPath: 您的应用最终将部署的 URL. 默认值是 '/,所以如果您的域名是 my-domain.com,这将部署到 my-domain.com/. 如果您的应用不是顶级域,而是位于子路面上,这是有用的 *输出Dir: 将生成构建文件的目录。默认情况下,这是 dist *资产Dir: 你的静态资产所在的地方。这是与 outputDir 文件夹 *相对的: 视图应用页面不必是 *SPA(单页应用程序)。这个模式将为每个指定的输入点生成页面。这应该是一个包含每个页面的对象,每个

以下是一個簡單的例子,表明「vue.config.js」檔案看起來像什麼:

1module.exports = {
2  outputDir: 'public',
3  // ...more options
4}

您可以找到所有可用的选项的参考(https://cli.vuejs.org/config/)。

有大量的额外选项可以转移到此配置选项. 请自由查看官方文档有关更多信息!