Vue.js 超详细入门与项目实战（微课视频版）课件 第02章 Vue 脚手架功能.pptx

第2章Vue脚手架功能;教学内容;知识目标;知识点预览;“脚手架”是指帮助搭建工程的工具的通俗说法，Vue框架对应的工具就是VueCLI。

VueCLI是一个基于Vue.js快速开发的系统，新版的VueCLI由@vue/cli模块实现交互式的项目开发，通过@vue/cli-service-global模块实现零配置原型开发，运行时依赖@vue/cli-service模块实现更新、升级和扩展功能，它包含下列几个核心功能。

CLI包

CLI服务

CLI插件;安装VueCLI之前，先必须安装最新版本的Node.js，推荐V10以上的版本，可以进入Node.js官网/en/，下载相应的安装包文件。如图所示。;图中，create指令用于创建一个新的基于VueCLI的项目，add指令用于向已创建的项目中加入插件，serve指令用于在浏览器下以开发者模式启动配置完成的项目，build指令则用于在浏览器下以生产模块编译配置完成的项目。;使用指令创建项目

打开提示符窗口，在光标闪烁处，输入指令：vuecreateshop再按回车键，就会通过VueCLI工具，自动创建一个名称为shop的项目，如图所示。;执行项目

项目创建后，可以在命令提示符窗口中，输入指令，先进入项目文件夹中，再在浏览器中启动该项目，如图所示。;分析项目结构

使用VisualStudio打开项目文件夹shop后，它的结构相对于Vue2之前的版本来说，更加简单，包含三个重要的文件夹，如图所示。;在项目中，默认生成的代码可以进行任意修改，接下来通过一个简单的实例，加深对文件和代码结构的理解能力。效果如图所示。;创建项目的最终目标是为了发布项目，即将项目部署到服务器上，通过外网访问这些编译后的项目页面，最终实现项目发布的功能；使用VueCLI4相比之前的版本而言，更加抽象和简洁，只要简单的两个步骤就可以完成项目的发布工具。

修改编译后公共资源文件路径

使用指令完成项目编译