vue-cli的使用和单页面应用程序、使用vue-cli脚手架创建vue项目步骤

news2024/9/20 18:27:32

1.vue-cli的使用

 vue-cli是Vue.js开发的标准工具。它简化了程序员基于webpack创建工程化的Vue项目的过程。

引用自vue-cli官网上的一句话:
程序员可以专注在撰写应用上,而不必花好几天去纠结webpack配置的问题。

中文官网: https://cli.vuejs.org/zh/

1.1 安装

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

npm install -g @vue/cli

快速生成工程化的Vue项目:

vue create 项目名称

以上安装直接 cmd 打开一个终端进行安装就可以了。

点击地址栏,然后输入cmd单击一下就可以进入当前终端。

使用 vue create 项目名称创建一个vue项目时:

可以用上下箭头选择

接下来是:

 现在可以先不用装Linter/Formatter,这个是规定代码规范的,后面会讲;

 接下来:

 然后:

这个我们通常选第一项;

然后:

 如果选Y,则再:

 再点回车,就开始创建vue项目;

 记住终端窗口不能关闭,否则就无法访问该网站了;

如果窗口关闭了可以点击项目中的 package.json 文件,然后有:

 直接 npm run serve就可以继续访问了。

2. vue项目中 src 目录的构成:

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

 4. vue项目的运行流程

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

其中:

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

 

 

2.什么是单页面应用程序

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

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

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

相关文章

WTI纽约原油CFD是什么?交易技巧有哪些?

WTI常称为美国原油或纽约原油,WTI是West Texas Intermediate 的简称,代表西德州中级原油(West Texas Intermediate),偶尔称为德州轻甜原油(Texas Light Sweet),它是大宗商品交易中核心的石油基准。那么本文就来具体的聊聊&#xf…

接口自动化【四】(在接口自动化【三】上的优化_加入了类前置,表格中替换数据,断言)

前言 一、使用 unittest框架结合setUpClass前置条件上传图片 二、一个类里面同时有类方法和实例方法----补充知识点(需要引用类方法中的变量) 三、结合类前置setUpClass,ddt,Excel表格数据,进行上传图片 四、加入l…

铁路应答器传输系统介绍

应答器传输系统 应答器传输系统是安全点式信息传输系统,通过应答器实现地面设备向车载设备传输信息。 应答器可根据应用需求向车载设备传输固定的(通过无源应答器)或可变的(通过有源应答器)上行链路数据。 当天线单…

【gitee】安装依赖报错

gitee地址 安装依赖时报错 Error while executing: npm ERR! D:\gongju\Git\cmd\git.EXE ls-remote -h -t git://github.com/adobe-web npm ERR! Error while executing: npm ERR! D:\git\Git\cmd\git.EXE ls-remote -h -t https://github.com/nhn/raphael.git npm ERR! npm…

数据分析实战 205 :项目分析思路 —— 某在线教育机构经营分析

版权声明:本文为博主原创文章,未经博主允许不得转载。 文章目录 一、思路分析1.1 教育行业营收转化模型1.2 某教育机构利润结构1.3 问题确认与指标拆解:业务逻辑图1.3.1 确认毛利额数据异常的问题1.3.2 提升毛利额的方案 1.4 问题解决思路 一…

vue大屏开发系列—使用echart开发省市地图数据,并点击省获取市地图数据

1. 本文在基础上进行改进,后端使用若依后端 IofTV-Screen: 🔥一个基于 vue、datav、Echart 框架的物联网可视化(大屏展示)模板,提供数据动态刷新渲染、屏幕适应、数据滚动配置,内部图表自由替换、Mixins注入…

JS Array数组常用方法(附上相应的用法及示例)

会改变原数组的方法 1、array.push(需要在末尾添加的数据)【给数组末尾添加一个元素】 2、array.unshift(需要在首位添加的数据)【给数组首位添加一个元素】 3、array.pop()【从数组末尾删除元素,不需要传参】 4、array.shift()【从数组首位开始删除元素,不需要传参】 5、arra…

【算法与数据结构】5 常见的时间复杂度,你知道吗?

欢迎来到爱书不爱输的程序猿的博客, 本博客致力于知识分享,与更多的人进行学习交流 本文收录于算法与数据结构体系专栏,本专栏对于0基础者极为友好,欢迎与我一起完成算法与数据结构的从0到1的跨越 时间复杂度与空间复杂度 一、前情回顾二、常见的时间复杂度1.常见的…

Day954.以增量演进为手段 -遗留系统现代化实战

以增量演进为手段 Hi,我是阿昌,今天学习记录的是关于以增量演进为手段的内容。 遗留系统现代化中的 HOW,也就是第三个原则,以增量演进为手段。 很多团队在一阵大张旗鼓的遗留系统改造后,终于迎来了最终的“梭哈”时…

【线程同步】

一个大佬的笔记,比较详细 一、线程概述 1.线程概述 与进程(process)类似,线程(thread)是允许应用程序并发执行多个任务的一种机 制。一个进程可以包含多个线程。同一个程序中的所有线程均会独立执行相同…

supervisor安装

说明 Supervisor翻译过来是监管人,在Linux中Supervisor是一个进程管理工具,当进程中断的时候Supervisor能自动重新启动它。可以运行在各种类Linux/unix的机器上,supervisor就是用Python开发的一套通用的进程管理程序,能将一个普通…

【别再困扰于LeetCode接雨水问题了 | 从暴力法=>动态规划=>单调栈】

🚀 算法题 🚀 🌲 算法刷题专栏 | 面试必备算法 | 面试高频算法 🍀 🌲 越难的东西,越要努力坚持,因为它具有很高的价值,算法就是这样✨ 🌲 作者简介:硕风和炜,…

Spring使用总结

Spring框架使用 前言处理事务管理声明式事务:编程式事务: 框架核心常见注解 AOP( 面向切面编程)切面和通知有哪些类型?切面的类型通知类型AOP实现使用场景 IOC(管理所有的JavaBean)依赖注入(DI)…

道氏转02,水羊转债,超达转债,晓鸣转债,中旗转债上市价格预测

道氏转02 基本信息 转债名称:道氏转02,评级:AA-,发行规模:26.0亿元。 正股名称:道氏技术,今日收盘价:13.41元,转股价格:15.46元。 当前转股价值 转债面值 / …

大数据三驾马车与hadoop起源

背景介绍 Google成立于1998年是全球最大的搜索引擎公司,主要业务为搜索、云计算、广告技术等,主要利润来自于广告等服务。在21世纪初互联网刚刚兴起,每个企业保存和生产的数据量并不大,已有的技术对数据的保存和处理完全满足业务…

RabbitMQ支持消息的模式

一、简单模式 Simple 二、工作模式 Work 类型:无特点:分发机制 解释:当有多个消费者时,我们的消息会被哪个消费者消费呢,我们又该如何均衡消费者消费信息的多少呢? 主要有两种模式: 2.1 轮询分发&#xf…

2023年江苏专转本成绩查询步骤

2023年江苏专转本成绩查询时间 2023年江苏专转本成绩查询时间预计在5月初,参加考试的考生,可以关注考试院发布的消息。江苏专转本考生可在规定时间内在省教育考试院网,在查询中心页面中输入准考证号和身份证号进行查询,或者拨…

IDEA的BitoAI插件的简单使用指南(包括安装和注册)

注:插件声称使用的是GPT-4模型算法,并且多平台支持,包括vscode、pycharm等,这里只演示idea的安装和使用 1.安装 直接在idea的插件商城中搜索即可 2.注册 使用bito插件需要使用邮箱注册,注册非常简单,只需要…

【一起撸个DL框架】2 节点与计算图的搭建

CSDN个人主页:清风莫追 欢迎关注本专栏:《一起撸个DL框架》 文章目录 2 节点与计算图的搭建 🍒2.1 简介2.2 设计节点类2.3 节点类的具体实现2.4 搭建计算图进行计算2.5 小结2.6 题外话——节点存储的值 2 节点与计算图的搭建 🍒 …

数据湖Iceberg-存储结构(2)

文章目录 存储结构数据文件 data files表快照 Snapshot清单列表 Manifest list清单文件 Manifest file 数据湖Iceberg-简介(1) 数据湖Iceberg-存储结构(2) 数据湖Iceberg-Hive集成Iceberg(3) 数据湖Iceberg-SparkSQL集成(4) 数据湖Iceberg-FlinkSQL集成(5) 数据湖Iceberg-Flink…