四、vue-cli 介绍与使用

news2025/7/8 11:46:50

一、单页面应用程序

1.1、什么是单页面应用程序

单页面应用程序(英文名:Single Page Application)简称SPA,顾名思义,指的是一个web网站中只有唯一的一个HTML页面,所有的功能与交互都在这唯一的一个页面内完成。

例如:
在这里插入图片描述

二、vue-cli

2.1、什么是 vue-cli

vue-cli 是 Vue.js 开发的标准工具。它简化了程序员基于 webpack 创建工程化的 vue 项目的过程。
引用自 vue-cli 官方的一句话:
程序员可以专注在撰写应用上,而不必花好几天纠结webpack配置的问题。
中文官网:https://cli.vuejs.org/zh/
在这里插入图片描述在这里插入图片描述

2.2、安装和使用

vue-cli 是 npm 上的一个全局包使用 npm install命令,即可方便的把它安装到自己的电脑上:

npm install -g @vue/cli

在这里插入图片描述在这里插入图片描述
基于 vue-cli 快速生成工程化的 vue 项目:

vue create 项目的名称

在这里插入图片描述在这里插入图片描述在这里插入图片描述在这里插入图片描述

2.3、vue项目的运行流程

在工程化的项目中,vue要做的事情很单纯:通过main.jsApp.vue渲染到index.html的指定区域中。

其中:

  1. App.vue用来编写待渲染的模板结构
  2. index.html中需要预留一个 el区域
  3. main.js把App.vue渲染到了 index.html 所预留的区域中

2.4、目录结构

在这里插入图片描述

assets 文件夹:存放项目中用到的静态资源文件,例如:css 样式表、图片资源
components 文件夹:程序员封装的、可复用的组件,都要放到 components 目录下
main.js 是项目的入口文件。整个项目的运行,要先执行 main.js
App.vue 是项目的根组件。

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

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

相关文章

Python:函数使用

目录 一、函数的基本介绍 函数与方法的区别 函数的定义 二、函数返回值及传参的情况 test01 test02 test03 三、函数嵌套 test04 四、lambda表达式 test05 一、函数的基本介绍 函数与方法的区别 直接调用的是函数 通过对象点出来的是方法 print("hello"…

【Leetcode每日一题:882. 细分图中的可到达节点~~~单源最短路径Dijkstra算法】

题目描述 给你一个无向图(原始图),图中有 n 个节点,编号从 0 到 n - 1 。你决定将图中的每条边 细分 为一条节点链,每条边之间的新节点数各不相同。 图用由边组成的二维数组 edges 表示,其中 edges[i] […

Docker配置nginx

1.Docker安装nginx 安装的命令 sudo docker search nginx docker pull nginx查看是否安装 docker images运行测试nginx docker run --name nginx-test -p 9091:80 -d nginx --name #给你启动的容器起个名字,以后可以使用这个名字启动或者停止容器 -p #映射端口…

Fedora-14源配置

By: Ailson Jack Date: 2022.11.26 个人博客:http://www.only2fire.com/ 本文在我博客的地址是:http://www.only2fire.com/archives/149.html,排版更好,便于学习,也可以去我博客逛逛,兴许有你想要的内容呢。…

兆易创新GD32 (二)官方工程 Template 和 创建工程

官方例程位于标准库的目录下,详细路径如下 GD32F4xx_Firmware_Library_V3.0.0\GD32F4xx_Firmware_Library_V3.0.0\GD32F4xx_Firmware_Library\Template 文件目录清晰简单。值得注意的是system_gd32f4xx.c 位于CMSIS目录下 CMSIS简单理解ARM公司的统一软件命名规则C…

Spring Security 中的 RememberMe 登录,so easy!

1. RememberMe简介 RememberMe 这个功能非常常见,图 6-1 所示就是 QQ 邮箱登录时的“记住我”选项。 提到 RememberMe,一些初学者往往会有一些误解,认为 RememberMe 功能就是把用户名/密码用 Cookie 保存在浏览器中,下次登录时不…

11.25总结

目录 一.做题总结 1.约瑟夫问题 2.最近请求次数 4.选择题订正 二.最长字符串 三.最长数组问题 一.做题总结 1.约瑟夫问题 我的思路就是先遍历按队员编号添加按顺序初始化每个人的编号. 就建立循环,终止条件就是大小为1 进入每次叫号的循环.让编号不为1的全部移出去 因…

尚硅谷axios笔记——入门学习

这篇笔记不包括源码分析,呜呜感觉时间不够用了还得留时间准备教资面试 axios理解和使用 json-server服务与搭建 终端安装npm i -g json-server 启动服务 json-server --watch db.json 启动在当前文档前 数据去db.json找 查看id为2的页面在http://localhost:3000.…

Linux下调试方法汇总

一、Linux驱动调试方法 Linux驱动调试主要有以下几种方法: 1、利用printk。 2、查看OOP消息。 3、利用strace。 4、利用内核内置的hacking选项。 5、利用ioctl方法。 6、利用/proc 文件系统。 7、使用kgdb。 1.1、printk 这是驱动开发中最朴实无华,同时…

使用 Lambda 表达式的正确姿势,写得太好了叭

​ 编辑切换为居中 添加图片注释&#xff0c;不超过 140 字&#xff08;可选&#xff09; Lambda 表达式非常方便&#xff0c;在项目中一般在 stream 编程中用得比较多。 List<Student> studentList gen(); Map<String, Student> map studentList .stream() .…

Redis缓存的几个名词,缓存命中、缓存穿透、缓存雪崩、缓存击穿

本文为转载整理&#xff1a;原文地址为【https://zhuanlan.zhihu.com/p/422627839】 1. 缓存命中 缓存命中(cache hit)&#xff1a;当应用程序或软件请求数据时&#xff0c;会首先发生缓存命中。首先&#xff0c;中央处理单元&#xff08;CPU&#xff09;在其最近的内存位置&…

MySQL之BufferPool

文章目录前言一、BufferPool是什么二、BufferPool的组成2.1 结构图2.2 如何读取缓冲页三、BufferPool在MySQL中的作用前言 本文会讲述BufferPool是什么&#xff0c;BufferPool的组成&#xff0c;在mysql中的作用 一、BufferPool是什么 在mysql中是用来缓存磁盘中的页&#xff…

央企招聘:中储粮集团2023公开招聘公告(校招+社招,共700人)

中国储备粮管理集团有限公司2023年度招聘包括校园招聘和社会招聘&#xff0c;计划招募优秀人才700余人。 中国储备粮管理集团有限公司是经国务院批准组建的涉及国家安全和国民经济命脉的国有大型重要骨干企业&#xff0c;受国务院委托具体负责中央储备粮油棉的经营管理&#xf…

SSM毕设项目 - 基于SSM的房屋出租出售系统(含源码+论文)

文章目录1 项目简介2 实现效果2.1 界面展示3 设计方案3.1 概述3.2 系统流程3.2.1 系统开发流程3.2.2 操作流程3.3 系统结构设计4 项目获取1 项目简介 Hi&#xff0c;各位同学好呀&#xff0c;这里是M学姐&#xff01; 今天向大家分享一个今年(2022)最新完成的毕业设计项目作品…

【学习笔记31】JavaScript冒泡排序和选择排序

笔记首发 一、冒泡排序 &#xff08;一&#xff09;核心原理 循环遍历数组&#xff0c;当前单元和下一个单元进行数据比较按照从小到大排序&#xff0c;应该是当前单元小于下一个单元&#xff0c;如果当前单元大于下一个单元&#xff0c;将交换两个单元存储的数据一次循环结束…

44、Map

一、基本介绍&#xff1a; 1、Map接口实现类的特点&#xff3b;很实用&#xff3d; 注意&#xff1a;这里讲的是JDK8的Map接口特点 1&#xff09;Map与Collection并列存在。用于保存具有映射关系的数据&#xff1a;Key-Value 2&#xff09;Map 中的 key和value 可以是任何引…

5个超好用的视频素材网站,视频剪辑必备。

推荐五个高质量视频素材网站&#xff0c;免费、可商用&#xff0c;赶紧收藏起来&#xff01;1、菜鸟图库 https://www.sucai999.com/video.html?vNTYwNDUx网站素材非常丰富&#xff0c;有平面、UI、电商、办公、视频、音频等相关素材&#xff0c;视频素材质量很高&#xff0c;…

SpringBoot2.x系列教程31--SpringBoot中的缓存实现方案介绍

前言 作为一个程序员&#xff0c;我们不仅仅要把项目的功能实现出来&#xff0c;还要追求这个功能的高效和健壮&#xff0c;我们得想办法对项目的功能进行各种优化和性能的提升。其中缓存就是对程序性能进行显著提升的一个有效手段&#xff0c;那么在SpringBoot中对缓存有哪些…

我的数学学习回忆录——一个数学爱好者的反思(一)

早点关注我&#xff0c;精彩不迷路&#xff01;我是一个热爱数学20余年的数学爱好者&#xff0c;曾奉数学为宇宙的真理和一切行动的指南的极客。从小对数字世界好奇和敏感&#xff0c;玩各种数学思维游戏&#xff0c;然后在高考应试和竞赛中扎实训练数学基础&#xff0c;逐渐把…

[附源码]java毕业设计中华美食网站

项目运行 环境配置&#xff1a; Jdk1.8 Tomcat7.0 Mysql HBuilderX&#xff08;Webstorm也行&#xff09; Eclispe&#xff08;IntelliJ IDEA,Eclispe,MyEclispe,Sts都支持&#xff09;。 项目技术&#xff1a; SSM mybatis Maven Vue 等等组成&#xff0c;B/S模式 M…