《Vue 3基础入门》课件 第九章 Vue CLI 项目部署.pptx

第9章VueCLI部署项目

C

ontents

目录

VueCLI的简介

webpack概述

构建与部署VueCLI项目

01

VueCLI的简介

PART

安装VueCLI

可以在命令行中使用下列任一命令进行安装：

npminstall-g@vue/cli

#OR

yarnglobaladd@vue/cli

如需升级项目中的VueCLI相关模块（以@vue/cli-plugin-或vue-cli-plugin-开头），则在项目目录下运行以下命令：

选项包括以下6种：

安装完成后，可以使用以下命令检查Vue3的版本是否正确：

vue--version

如果需要升级全局的VueCLI包，运行以下命令：

npmupdate-g@vue/cli

#或者

yarnglobalupgrade--latest@vue/cli

upgrade[options][plugin-name]

-t,--toversion

升级plugin-name到指定的版本

-f,--fromversion

跳过版本检测，默认从指定的版本升级

-r,--registryurl

使用指定的registry地址安装依赖

--all

升级所有的插件

--next

检查包括alpha/beta/rc版本在内的新版本

-h,--help

输出帮助内容

创建HelloWord项目

开发者可以使用vueserve和vuebuild命令对单个*.vue文件进行快速原型开发

这需要先额外安装一个全局的扩展：

vuebuild命令用法如下

npminstall-g@vue/cli-service-global

vueserve命令用法如下：

serve[options][entry]

选项包括:

所需要的是一个App.vue文件：

template

h1Hello!/h1

/template

build[options][entry]

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

选项包括:

vuecreate创建一个新项目的命令方法如下：

vuecreatehello-world

-o,--open

打开浏览器

-c,--copy

将本地URL复制到剪切板

-h,--help

输出帮助信息

-t,--targettarget

构建目标(app|lib|wc|wc-async,默认值：app)

-n,--namename

库的名字或WebComponents组件的名字(默认值：入口文件名)

-d,--destdir

输出目录(默认值：dist)

-h,--help

输出帮助信息

创建HelloWord项目

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

create[options]app-name

-p,--presetpresetName

忽略提示符并使用已保存的或远程的预设选项

-d,--default

忽略提示符并使用默认预设选项

-i,--inlinePresetjson

忽略提示符并使用内联的JSON字符串预设选项

-m,--packageManagercommand

在安装依赖时使用指定的npm客户端

-r,--registryurl

在安装依赖时使用指定的npmregistry

-g,--git[message]

强制/跳过git初始化，并可选地指定初始化提交信息

-n,--no-git

跳过git初始化

-f,--force

覆写目标目录可能存在的配置

-c,--clone

使用gitclone获取远程预设选项

-x,--proxy

使用指定的代理创建项目

-b,--bare

创建项目时省略默认组件中的新手指导信息

-h,--help

输出使用帮助信息

了解VueCLI项目结构

打开生成好的hello-word项目文件夹，可以看到最终生成的项目结构如图所示

子目录作用如下：

node_modules

存放项目的所有第三方依赖

public

存放基础模板和一些资源文件，例如index.html文件和favicon.ico文件等

src

存放项目的主体代码，包括静态资源、入口文件和自定义组件等

其他

在hello-world目录中还存在配置文件，例如package.json文件和babel.config.js文件等

02

webpack概述

PART

配置webpack

调整webpack配置最简单的方式是在vue.config.js文件