Vue.js 超详细入门与项目实战（微课视频版）课件 第02章 Vue 脚手架功能_第1页
Vue.js 超详细入门与项目实战（微课视频版）课件 第02章 Vue 脚手架功能_第2页
Vue.js 超详细入门与项目实战（微课视频版）课件 第02章 Vue 脚手架功能_第3页
Vue.js 超详细入门与项目实战（微课视频版）课件 第02章 Vue 脚手架功能_第4页
Vue.js 超详细入门与项目实战（微课视频版）课件 第02章 Vue 脚手架功能_第5页
已阅读5页，还剩8页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

第2章Vue脚手架功能课件V1.0

教学内容第一节

脚手架核心功能第二节安装脚手架过程第三节使用脚手架创建项目知识目标教学目标理解和掌握最新版本VueCLI的功能掌握VueCLI的安装方式和常用指令掌握VueCLI编译和发布的方式知识点预览#节知识点难点重点应用2C02-01脚手架核心功能

C02-02安装脚手架过程1、安装VueCLI2、常用VueCLI指令C02-03使用脚手架创建项目1、创建第一个简单项目2、修改组件代码3、项目发布“脚手架”是指帮助搭建工程的工具的通俗说法，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/，下载相应的安装包文件。如图所示。安装VueCLI

图中，create指令用于创建一个新的基于VueCLI的项目，add指令用于向已创建的项目中加入插件，serve指令用于在浏览器下以开发者模式启动配置完成的项目，build指令则用于在浏览器下以生产模块编译配置完成的项目。常用VueCLI指令使用指令创建项目

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

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

使用VisualStudio打开项目文件夹shop后，它的结构相对于Vue2之前的版本来说，更加简单，包含三个重要的文件夹，如图所示。创建第一个简单项目node_modules文件夹用于保存各类依赖的包文件和模块src文件夹用于保存项目中全部的组件和各类加载的文件public文件夹用于保存公共图标和全局文件

在项目中，默认生成的代码可以进行任意修改，接下来通过一个简单的实例，加深对文件和代码结构的理解能力。效果如图所示。修改组件代码

创建项目的最终目标是为了发布项目，即将项目部署到服务器上，通过外网访问这些编译后的项目页面，最终实现项目发布的功能；使用VueCLI4相比之前

人人文库> 全部分类> 教育资料 > 课件下载

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论