- 1、本文档共15页,可阅读全部内容。
- 2、原创力文档(book118)网站文档一经付费(服务费),不意味着购买了该文档的版权,仅供个人/单位学习、研究之用,不得用于商业用途,未经授权,严禁复制、发行、汇编、翻译或者网络传播等,侵权必究。
- 3、本站所有内容均由合作方或网友上传,本站不对文档的完整性、权威性及其观点立场正确性做任何保证或承诺!文档内容仅供研究参考,付费前请自行鉴别。如您付费,意味着您自己接受本站规则且自行承担风险,本站不退款、不进行额外附加服务;查看《如何避免下载的几个坑》。如果您已付费下载过本站文档,您可以点击 这里二次下载。
- 4、如文档侵犯商业秘密、侵犯著作权、侵犯人身权等,请点击“版权申诉”(推荐),也可以打举报电话:400-050-0827(电话支持时间:9:00-18:30)。
第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文件
您可能关注的文档
- 《Vue 3基础入门》教学大纲.doc
- 《Vue 3基础入门》课件 第二章 Hello Word与Vue 3的基础特性 .pptx
- 《Vue 3基础入门》课件 第六章 组件复用.pptx
- 《Vue 3基础入门》课件 第七章 vue-router.pptx
- 《Vue 3基础入门》课件 第三章Vue 3基本指令.pptx
- 《Vue 3基础入门》课件 第十章 Vuex.pptx
- 《Vue 3基础入门》课件 第四章 Vue 3组件.pptx
- 《Vue 3基础入门》课件 第五章 样式绑定.pptx
- 《Vue 3基础入门》课件 第一章 vue 3简介 .pptx
- 机器人学及其应用导论 课件 第二章 机器人结构与驱动.pptx
最近下载
- 北京百师联盟信息技术研究院.doc
- 2.6《观察与比较》教学设计-2024-2025学年一年级上册科学教科版.docx VIP
- 人教版道德与法治二年级上册《这些是大家的》课件.pptx
- 中国特色大国外交和推动构建人类命运共同体.pptx
- 《产品质量鉴定程序规范 总则》.doc VIP
- 七年级数学(沪教版)上册课件-【第2课时 添括号】.pptx
- The Catcher int heRye麦田守望者英文版.doc
- 农药登记残留试验待测残留物和植物源性食品膳食风险评估残留物目录(2020版).docx
- 甲醇羰基化法制备醋酸.pptx
- 超星网课尔雅《走近核科学技术》超星尔雅答案2023章节测验答案.pdf
文档评论(0)