前端项目结构介绍与Vue-cli(脚手架)环境搭建

传统的前端项目结构

一个项目中有许多html文件

每一个html文件都是相互独立

如果需要在页面中导入一些外部依赖的组件(vue.js,elementUI),就需要在每一个html文件中引用都导入,十分的麻烦

而且这些外部组件都需要在其官网中自行下载,也增加了导入的繁琐程度

当今的前端项目结构

在一个node环境中构建项目,node(前端的开发环境)类似与后端中使用的maven,可以帮我们下载项目中需要使用的js/css文件

前端改变为单页面架构(一个项目中只有一个html文件),方便配置

所有的配置都是对这一个html文件进行配置的,只需要配置一次即可

将不同的功能写成不同的vue文件

一个vue文件不是一个单独的页面,是一个组件,需要先出差不同内容时,只需要将不同的组件切换导入即可

通过在一个html页面中切换不同的组件来达到页面的分模块编写

每一个组件都需要进行注册,并为其定义一个地址

Vue-cli搭建项目

vue-cli 官方提供的一个脚手架,用于快速生成一个 vue 的项目模板;

预先定义好的目录结构及基础代码,就好比咱们在创建 Maven 项目时可以选择创建一个骨架项目,这个骨架项目就是脚手架,我们的开发更加的快速;

使用前提(环境)

Node.js

需要安装一个node.js(node.js是前端开发的一个环境)

可以为前端开发提供服务功能

npm

npm 是 Node.js 的包管理工具,用来安装各种 Node.js 的扩展。

npm 是JavaScript 的包管理工具,也是世界上最大的软件注册表。

有超过 60 万个JavaScript 代码包可供下载。

npm 让 JavaScript 开发人员可以轻松地使用其他开发人员共享的代码。

主要功能

统一的目录结构

本地调试

热部署

单元测试

集成打包上线

Node.js安装

首先去官网下载安装包

https://nodejs.org/en/download

在这里插入图片描述

在这里插入图片描述

下载完成后打开安装包

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

在这里插入图片描述

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

此时就安装完成了

测试是否安装完成

键盘上win+r打开输入命令,输入cmd打开命令行

在命令行中输入node -v和npm -v

若出现如下图所示的版本号则安装成功

在这里插入图片描述

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

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

相关文章

PMBOK® 第六版 实施整体变更控制

目录 读后感—PMBOK第六版 目录 对于变化的态度,个人引用两句加以阐释,即“流水不腐,户枢不蠹”与“不以规矩,不能成方圆”。这看似相互矛盾,实则仿若两条腿总是一前一后地行进。有一个典型的例子,“自由美…

基于IM948(Low-cost IMU+蓝牙)模块的高精度PDR(Pedestrian Dead Reckoning)定位系统 — 可以提供模块和配套代码

一、背景与意义 行人PDR定位系统中的PDR(Pedestrian Dead Reckoning,即行人航位推算)背景意义在于其提供了一种在GPS信号不可用或不可靠的环境下,对行人进行精确定位和导航的解决方案。以下是关于PDR背景意义的详细描述&#xff1…

更正:VMWARE出现错误关闭Hyper-V会导致Docker Desktop报错

之前使用VMWARE时出现错误,当时在服务处将《HV主机服务》关闭,并使用命令 bcdedit /set hypervisorlaunchtype off 造成Docker Desktop无法使用 解决方法: 运行bcdedit /set hypervisorlaunchtype auto 注意这里最后不是on也不是start 重启…

Python代码打包成exe应用

目录 一、前期准备 二、Pyinstaller打包步骤 Pyinstaller参数详解 三、测试 Spec 文件相关命令 一、前期准备 (1)首先,我们需要确保你的代码可以在本地电脑上的pycharm正常运行成功。 (2)我们要先安装Pyinstalle…

AI智能体 | 扣子Coze 工作流中如何嵌入代码,看这一篇就够了

Coze的工作流中除了能嵌入大模型,插件,图像流,其他工作流外,还能嵌入代码。嵌入代码的好处是对一些复杂的返回结果进行二次处理。 Coze的代码支持js和python两种语言。这次用python来做演示介绍 在节点中选择代码 弹出对话框如下…

python-docx 设置页面边距、页眉页脚高度

本文目录 前言一、docx 页面边距在哪里二、对 <w:pgMar> 的详细说明1、上边距的说明2、右边距的说明3、下边距的说明4、左边距的说明5、页眉高度的说明6、页脚高度的说明三、设置 docx 页边距、页眉页脚高度1、完整代码2、代码执行效果图四、补充一些内容1、页面边距的两…

conda安装管理配置

原文链接&#xff1a;conda管理配置 导言 安装卸载 卸载 卸载 docker sudo rm -r /opt/anaconda3 #conda安装位置安装 从镜像archive中下载sh脚本安装 bash ./software/Anaconda3-2024.02-1-Linux-x86_64.sh -b -p /opt/anaconda3 #conda安装位置管理 查看 conda --ver…

Docker Compose:简化多容器管理的利器

在现代的应用开发和部署过程中&#xff0c;Docker已经成为不可或缺的工具。它通过容器化技术&#xff0c;使得应用的部署变得更加轻松和高效。然而&#xff0c;当我们需要管理和运行多个容器时&#xff0c;单纯依赖Docker命令行工具可能会显得繁琐且复杂。这时&#xff0c;Dock…

js中定义类的方式:

在JavaScript中&#xff0c;有几种定义类的方式&#xff0c;但最常用的是使用ES6引入的class关键字。以下是使用class定义类的一个简单示例&#xff1a; class Person {// 构造函数&#xff0c;用于初始化对象的属性constructor(name, age) {this.name name;this.age age;}/…

CCS的安装步骤

CCS的安装步骤 安装之前有几件重要的事情要做&#xff1a; 首先肯定是要下载安装包啦&#xff01;点击此处是跳到官网下载地址安装包不能处的路径中不能包含中文关闭病毒防护和防火墙&#xff0c;以及其他杀毒软件最后是在重启后进行安装 主要的步骤如下&#xff1a; 找到安…

数据库系统概论-第10章数据库恢复技术

10.1事务的基本概念 ①事务&#xff1a;用户宝义的一个数据库操作序列&#xff0c;是一个不可分割的工作单位。一个程序中包含多个事务。 事务通常是以BEGIN TRANSACTION开始&#xff0c;以COMMIT或ROLLBACK结束。COMMIT表示提交。ROLLBACK表示回滚&#xff0c;即在事务运行过…

电脑高手推荐:三款超实用软件,让你的电脑如虎添翼!

7Zip 7-Zip是一款免费且开源的文件压缩工具&#xff0c;支持多种文件格式&#xff0c;包括其自带的7z格式、ZIP、GZIP、BZIP2和TAR等。该软件由Igor Pavlov于1999年开发&#xff0c;具有高压缩比的特点。7-Zip不仅可以在Windows操作系统上使用&#xff0c;还可以在Unix-like的操…

【MySQL】数据库事务详解

文章目录 前言1. 事务的定义2. 事务的四个特性2.1 原子性2.2 一致性2.3 隔离性2.4 持久性 3. 事务的并发问题3.1 脏读3.2 不可重复读3.3 幻读3.4 更新丢失 4. 事务的隔离级别5. 事务的使用结语 前言 假设我们现在需要操作数据库进行转账&#xff0c;A 给 B 转账 100 块钱&…

高效修复机床导轨磨损,保障加工精度!

机床导轨是支承和引导运动构件沿着一定轨迹运动的传动装置&#xff0c;在机器设备中是个十分重要的部件&#xff0c;在机床中是常见的部件。机床的加工精度与导轨精度有直接的联系&#xff0c;且导轨一旦损坏&#xff0c;维修较复杂且困难。我们简单总结了以下几点对于机床导轨…

2741. 特别的排列

Powered by:NEFU AB-IN Link 文章目录 2741. 特别的排列题意思路代码 2741. 特别的排列 题意 给你一个下标从 0 开始的整数数组 nums &#xff0c;它包含 n 个 互不相同 的正整数。如果 nums 的一个排列满足以下条件&#xff0c;我们称它是一个特别的排列&#xff1a; 对于…

计组--控制器--复习专用

文章目录 前言一、控制器概述CPU的基本功能 二、控制器的功能和组成1.功能2.组成3.时序系统及其控制4.单周期、多周期、流水线1.单周期2.多周期3.流水线 三、微程序控制器1.基本概念2.微指令格式 总结 前言 学无止境&#xff0c;笔勤不辍。今天笔者简单介绍一下有关控制器的知…

【会议征稿,IEEE出版】第三届机器人、人工智能与智能控制国际会议(RAIIC 2024,7月5-7)

第三届机器人、人工智能与智能控制国际会议&#xff08;RAIIC 2024&#xff09;将于2024年7月5-7日中国绵阳举行。 RAIIC 2024是汇聚业界和学术界的顶级论坛&#xff0c;会议将邀请国内外著名专家就以传播机器人、人工智能与智能控制领域的技术进步、研究成果和应用做专题报告…

网站推广如何做?这七个方法要知道

在出海独立站商家中&#xff0c;推广是必不可少的环节。在你完成网站的搭建&#xff0c;产品的上架&#xff0c;以及网站的运营和优化后&#xff0c;你就可以开始着手推广你的网站了。你的网站是承载你的品牌和产品的主要平台&#xff0c;因此&#xff0c;你需要根据你的品牌和…

OZON跨境卖家爆款产品有哪些

OZON跨境卖家爆款产品有哪些&#xff1f;国内的Ozon跨境卖家做这几个品&#xff0c;不爆都难&#xff01; Top1 太阳镜 Очки солнцезащитные 商品id&#xff1a;1556874194 月销量&#xff1a;1095 OZON跨境卖家爆款产品工具&#xff1a;D。DDqbt。COm/…

2024三掌柜赠书活动第二十五期:Rust 游戏开发实战

目录 目录 前言 Rust语言概念 关于《Rust 游戏开发实战》 Rust系统编程的核心点 Rust开发的关键技术和工具 内容简介 作者简介 书中前言/序言 内容介绍 《Rust 游戏开发实战》全书速览 图书目录 结束语 前言 技术圈最近的编程语言新秀当属Rust莫属&#xff0c;Rus…