第十五章 Vue工程化开发及Vue CLI脚手架

目录

一、引言

二、Vue CLI 基本介绍

三、安装Vue CLI

3.1. 安装npm和yarn

3.2. 安装Vue CLI

3.3. 查看 Vue 版本

四、创建启动工程

4.1. 创建项目架子

4.2. 启动工程

五、脚手架目录文件介绍

六、核心文件讲解 

6.1. index.html

6.2. main.js

6.3. App.vue 


一、引言

开发 Vue 的两种方式:

1. 核心包传统开发模式:基于html/css/js文件,直接引入核心包,开发Vue。

    我们前面几个章节涉及到的就是传统的开发模式。

2. 工程化开发模式:基于构建工具(例如:webpack ) 的环境中开发Vue。

工程化开发模式问题:

① webpack 配置不简单

② 雷同的基础配置

③ 缺乏统一标准

二、Vue CLI 基本介绍

Vue CLI 是 Vue 官方提供的一个全局命令工具,它解决了以往工程化开发模式的主要问题,生成标准化的配置,可以帮助我们快速创建一个开发 Vue 项目的标准化基础架子。【集成了 webpack 配置】

1. 开箱即用,零配置

2. 内置 babel 等工具

3. 标准化

Vue CLI脚手架创建出来的工程结构如下: 

三、安装Vue CLI

3.1. 安装npm和yarn

我本地是mac 安装方式如下(Windows系统可百度AI,这里不做赘述)

3.2. 安装Vue CLI

全局安装 (一次) :yarn global add @vue/cli npm i @vue/cli -g

报下列错误,解决方式如下:

自动补充兼容 的命令
yarn config set ignore-engines true 

3.3. 查看 Vue 版本

vue --version

四、创建启动工程

4.1. 创建项目架子

到自己指定的路径下创建Vue CLI脚手架的工程

vue create project-name(项目名-不能用中文)

Vue版本根据自身情况选择,这几章节学习主要讲解Vue2,所以我这里选择了Vue2: 

创建好的工程结构图: 

4.2. 启动工程

进入到我们创建好的工程目录中

yarn serve npm run serve(这两个命令会找package.json中的serve命令来启动,停止工程Ctrl+C

注:如果我们日后将serve改为dev,那么启动时就要用yarn serve,我们改成什么值,后续启动就要用这个值。 

五、脚手架目录文件介绍

六、核心文件讲解 

6.1. index.html

6.2. main.js

6.3. App.vue 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/pingmian/58878.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Linux 进程终止 进程等待

目录 进程终止 退出码 错误码 代码异常终止(信号详解) exit _exit 进程等待 概念 等待的原因 wait 函数原型 参数 返回值 监控脚本 waitpid 概念 函数原型 参数 返回值 WIFEXITED(status) WEXITSTATUS(status) 问题 为什么不用全局变量获得子进程的退出信…

[MySQL]DQL语句(一)

查询语句是数据库操作中最为重要的一系列语法。查询关键字有 select、where、group、having、order by、imit。其中imit是MySQL的方言,只在MySQL适用。 数据库查询又分单表查询和多表查询,这里讲一下单表查询。 基础查询 # 查询指定列 SELECT * FROM …

Java 批量导出Word模板生成ZIP文件到浏览器默认下载位置

是不是你们要找的&#xff01;是不是你们要找的&#xff01;是不是你们要找的&#xff01; 先看效果&#xff1a; 1.word模板格式 2.模板位置 3.需要的依赖 <!--POI-TL实现数据导出到word模板--><dependency><groupId>cn.hutool</groupId><artifact…

Flarum:简洁而强大的开源论坛软件

Flarum简介 Flarum是一款开源论坛软件&#xff0c;以其简洁、快速和易用性而闻名。它继承了esoTalk和FluxBB的优良传统&#xff0c;旨在提供一个不复杂、不臃肿的论坛体验。Flarum的核心优势在于&#xff1a; 快速、简单&#xff1a; Flarum使用PHP构建&#xff0c;易于部署&…

CPU用户时间百分比

在计算机系统中&#xff0c;"CPU用户时间百分比&#xff08;CPU User Time&#xff09;"是一个性能监控指标&#xff0c;它描述了CPU在用户模式下执行的累积时间与总的CPU时间的比例。这个指标可以帮助我们了解系统在执行用户态程序时的负载情况。下面是一些关于CPU用…

ubuntu20.04安装ros与rosdep

目录 前置配置 配置apt清华源 配置ros软件源 添加ros安装源&#xff08;中科大软件源&#xff09; 设置秘钥 更新源 ros安装 安装ros 初始化 rosdep 更新 rosdep 设置环境变量 安装 rosinstall 安装验证 启动海龟仿真器 操控海龟仿真器 rosdep安装更新 安装 使用…

mobile频段要查找、设置并获取相关参数,该怎么破?

今天我们一起来学习查找和设置mobile频段&#xff0c;并获取相关参数。 一、mobile概述 1.1 简介 “4G mobile”指的是第四代移动通信技术&#xff0c;常用于描述通过4G网络进行的高速无线数据传输和通信。4G网络最显著的特征是其高速数据传输能力。理论上&#xff0c;4G可以…

「C/C++」C++11 之<thread>多线程编程

✨博客主页何曾参静谧的博客📌文章专栏「C/C++」C/C++程序设计📚全部专栏「VS」Visual Studio「C/C++」C/C++程序设计「UG/NX」BlockUI集合「Win」Windows程序设计「DSA」数据结构与算法「UG/NX」NX二次开发「QT」QT5程序设计「File」数据文件格式「PK」Parasolid函数说明目…

[SAP ABAP] SMW0上传模板

通常来说&#xff0c;一个批量导入的程序必须使用指定的模板&#xff0c;我们需要将模板保存到SAP系统中&#xff0c;以便用户下载并更改。这里我们可以使用事务码SMW0解决上述的问题 1.选择二进制类型 2.输入存放的包 3.创建对象 选择需要进行上传的本地模板文件到SAP系统中 …

LSTM模型改进实现多步预测未来30天销售额

项目源码获取方式见文章末尾&#xff01; 600多个深度学习项目资料&#xff0c;快来加入社群一起学习吧。 《------往期经典推荐------》 项目名称 1.【BiLSTM模型实现电力数据预测】 2.【卫星图像道路检测DeepLabV3Plus模型】 3.【GAN模型实现二次元头像生成】 4.【CNN模型实…

中科蓝汛GPIO操作说明

第一种写法&#xff1a; GPIO配置输入模式 //内部上拉 GPIOBDE | BIT(4); //数字IO使能: 0为模拟IO, 1 为数字IO GPIOBDIR | BIT(4); //控制IO的方向: 0为输出, 1为输入. GPIOBFEN & ~BIT(4);//0:当作通用GPIO使用 //1:当作其它功能性IO GPIOBPU | BIT(4); //10K上拉…

3DDFA-V3——基于人脸分割几何信息指导下的三维人脸重建

1. 研究背景 从二维图像中重建三维人脸是计算机视觉研究的一项关键任务。在虚拟现实、医疗美容、计算机生成图像等领域中&#xff0c;研究人员通常依赖三维可变形模型&#xff08;3DMM&#xff09;进行人脸重建&#xff0c;以定位面部特征和捕捉表情。然而&#xff0c;现有的方…

高并发编程

一台64G内存的服务器QPS可以达到9W&#xff0c;TPS&#xff08;事务&#xff09;可以达到5K&#xff0c;每个TPS大约包含18个QPS.只读的话QPS可以达到30~40万.阿里云有相关测试工具、测试方法、测试结果。 1、volatile 保证可见性&#xff0c;禁止指令重排&#xff0c;避免多线…

HTML 基础标签——表单标签<form>

文章目录 1. `<form>` 标签:定义表单容器2. `<input>` 标签:多用途输入控件3. `<textarea>` 标签:多行文本输入框4. `<select>` 标签:下拉选择框5. `<option>` 标签:下拉菜单选项6. `<button>` 标签:按钮元素7. `<label>` 标签…

GraphQL 与 Elasticsearch 相遇:使用 Hasura DDN 构建可扩展、支持 AI 的应用程序

作者&#xff1a;来自 Elastic Praveen Durairaju GraphQL 提供了一种高效且灵活的数据查询方式。本博客将解释 Hasura DDN 如何与 Elasticsearch 配合使用&#xff0c;以实现高性能和元数据驱动的数据访问。 此示例的代码和设置可在此 GitHub 存储库 - elasticsearch-subgraph…

智能座舱相关术语全解及多模态交互在智能座舱中的应用

文章目录 座舱相关术语全解1. 智能座舱2. UFS3. 多模态交互4. 3D虚拟引擎5. AR/VR6. GNSS7. TTS8. DPU9. 摄像头10. 屏幕/显示器11. 音频12. 无线连接13. 其他组件 多模态交互在智能座舱中有以下一些应用 座舱相关术语全解 1. 智能座舱 智能座舱&#xff08;intelligent cabi…

selinux和防火墙

目录 selinux 1、selinux的说明 2、selinux的工作原理 安全上下文四个字段&#xff1a; 访问过程&#xff1a; 3、selinux的启动、关闭与查看 &#xff08;1&#xff09;SELinux三种模式 &#xff08;2&#xff09;修改安全上下文 4、selinux对linux服务的影响 防火墙 …

制氮机分子筛的材质选择

制氮机分子筛的材质选择对于其性能和效率至关重要。作为制氮设备中的核心部件&#xff0c;分子筛承担着将空气中的氮气与氧气有效分离的重任。以下是对制氮机分子筛常用材质的详细探讨&#xff1a; 制氮机分子筛的主要材质 碳分子筛(CMS) 碳分子筛由活性炭经过特殊工艺加工而成…

【运动的&足球】足球场地区域图像分割系统源码&数据集全套:改进yolo11-RFAConv

改进yolo11-ContextGuidedDown等200全套创新点大全&#xff1a;足球场地区域图像分割系统源码&#xff06;数据集全套 1.图片效果展示 项目来源 人工智能促进会 2024.10.28 注意&#xff1a;由于项目一直在更新迭代&#xff0c;上面“1.图片效果展示”和“2.视频效果展示”展…

Java keytool keystore的相关概念介绍与使用

参考资料 Java证书工具keytool用法总结keytool-简介CA证书介绍与格式转换密钥&#xff0c;私钥&#xff0c;公钥的区分とほほのOpenSSL入門 目录 一. 概念1.1 keystore文件1.2 keytool1.3 非对称加密1.3.1 加密解密1.3.2 数字签名认证1.3.3 通信中的加密与签名过程 1.4 证书格…