- 1、本文档共13页,可阅读全部内容。
- 2、原创力文档(book118)网站文档一经付费(服务费),不意味着购买了该文档的版权,仅供个人/单位学习、研究之用,不得用于商业用途,未经授权,严禁复制、发行、汇编、翻译或者网络传播等,侵权必究。
- 3、本站所有内容均由合作方或网友上传,本站不对文档的完整性、权威性及其观点立场正确性做任何保证或承诺!文档内容仅供研究参考,付费前请自行鉴别。如您付费,意味着您自己接受本站规则且自行承担风险,本站不退款、不进行额外附加服务;查看《如何避免下载的几个坑》。如果您已付费下载过本站文档,您可以点击 这里二次下载。
- 4、如文档侵犯商业秘密、侵犯著作权、侵犯人身权等,请点击“版权申诉”(推荐),也可以打举报电话:400-050-0827(电话支持时间:9:00-18:30)。
第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相比之前的版本而言,更加抽象和简洁,只要简单的两个步骤就可以完成项目的发布工具。
修改编译后公共资源文件路径
使用指令完成项目编译
您可能关注的文档
- 人工智能通识教程 第2版 课件 第5、6章 机器学习、 深度学习.pptx
- 人工智能通识教程 第2版 课件 第7、8章 强化学习、数据挖掘.pptx
- 人工智能通识教程 第2版 课件 第9、10章 机器人技术、 计算机视觉.pptx
- 人工智能通识教程 第2版 课件 第11、12章 自然语言处理、 GPT——大语言模型起步.pptx
- 人工智能通识教程 第2版 课件 第13、14章 群体智能、 自动规划.pptx
- 人工智能通识教程 第2版 课件 第14、15章 自动规划、 人工智能发展.pptx
- 人工智能通识教程 第2版 课件全套 周苏 第1--15章 思考的工具--- 人工智能发展.pptx
- Vue.js 超详细入门与项目实战(微课视频版)教学大纲.docx
- Vue.js 超详细入门与项目实战(微课视频版)课件 第01章 前端框架发展.pptx
- Vue.js 超详细入门与项目实战(微课视频版)课件 第03章 Vue 数据绑定.pptx
文档评论(0)