wordpress视频列表模板/搜索引擎优化的作用
提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档
文章目录
- 前言
- 五、前端工程化(使用Vue创建一个完整的企业级前端项目)
- 1 Vue脚手架(Vue-cli)环境准备
- (1)安装NodeJS
- 2 Vue项目简介(创建)
- (1)Vue项目创建
- 通过命令行创建(这个创建的比较简洁,有些自定义功能还是采用ui比较好)
- 通过图形界面创建
- (2)Vue项目目录介绍
- 3 Vue项目开发流程
- (1)Vue项目结构代码解释
前言
五、前端工程化(使用Vue创建一个完整的企业级前端项目)
- 当前最为主流的开发模式:前后端分离
- 前端工程化: 是指在企业级的前端项目开发中,把前端开发所需的工具、技术、流程、经验等进行规范化、标准化。
- 模块化:JS、CSS
- 组件化:UI结构、样式、行为
- 规范化:目录结构、编码、接口
- 自动化:构建、部署、测试
1 Vue脚手架(Vue-cli)环境准备
- 介绍: Vue-cli 是Vue官方提供的一个脚手架,用于快速生成一个 Vue的项目模板。
- Vue-cli提供了如下功能:
- 统一的目录结构
- 本地调试
- 热部署
- 单元测试
- 集成打包上线
- 依赖环境: NodeJS
(1)安装NodeJS
Node.jsR是一个开源、跨平台的JavaScript运行时环境。其实就和java运行要安装jdk一样。
- step1:下载nodejs:https://nodejs.org/zh-cn
我们下载一个长期稳定版本就可以了
正常安装就是了,注意下面这个不用勾选
- step2:验证是否安装成功 node -v
可以看到版本号就成功了
- step3:配置npm的全局安装路径
用管理员权限运行cmd,执行下面命令:后面的路径就是你前面安装的nodejs选择的安装目录
npm config set prefix “D:\frontDevelopment\nodeJs”
使用 npm config get prefix验证有没有设置成功
- step4: 切换npm的镜像(加快资源的下载)
同样使用管理员权限执行下面命令
npm config set registry https://mirrors.huaweicloud.com/repository/npm/
这里镜像源有可能过期了,就去网上找最新的 - step5: 安装Vue-cli
使用管理员身份运行命令行,在命令行中,执行如下指令:
npm install -g @vue/cli
- step6:验证Vue-cli是否安装成功
vue --version
出现版本号就成功了
- step7: 安装Vue的路由功能(先装上,后面会用上)
npm install vue-router
2 Vue项目简介(创建)
(1)Vue项目创建
- 创建Vue项目
选择你要将项目创建的所在目录打开cmd, 有两种创建方案- 命令行:vue create 项目名
注意项目名不能有大写字母 - 图形化界面:vue ui
- 命令行:vue create 项目名
通过命令行创建(这个创建的比较简洁,有些自定义功能还是采用ui比较好)
- step1: 在你想要创建vue项目的目录使用管理员权限打开命令行界面,执行命令
vue create demo_vue_project - step2: 根据需求自行选择vue2或vue3
出现以下界面,项目创建成功:
创建成功后就可以在工作目录看到创建的项目文件夹了
- step3: 使用Vscode打开刚创建的项目
- step4: 启动vue项目,默认是8080端口
- 命令行:在创建的项目的这级目录下cmd执行下面命令
npm run serve
- 命令行:在创建的项目的这级目录下cmd执行下面命令
直接Vscode里面启动服务
NPM脚本侧边栏没有解决方案:NPM侧边栏没有解决方案
npm:解决 “无法加载文件,因为在此系统上禁止运行脚本“ 问题
服务启动成功,我们使用URL来访问
- step5: 端口切换
直接修改 vue.config.js这个配置文件即可
通过图形界面创建
- step1: 在你想要创建vue项目的目录使用管理员权限打开命令行界面,执行命令
vue ui
打开图形化界面
创建完成(下面界面可以直接关闭了)
直接通过VScode打开,下面的过程就和上面使用命令行创建一样了
(2)Vue项目目录介绍
- 基于Vue脚手架创建出来的工程,有标准的目录结构,如下:
【注】:由于Vue的版本或者一些其他问题,命令行创建的router和views目录可能没有,图形化界面我们勾选了router插件所以就有了,所以更加推荐图形化界面创建Vue项目。
3 Vue项目开发流程
(1)Vue项目结构代码解释
- index.html : 默认的首页入口html文件
该html文件默认导入的main.js文件
- 组件:在Vue中 .vue后缀的文件就是一个组件
这种组件理解成一个div块,里面定义了这个块的html,css样式,还有javaScript。这样就完美的封装成一个组件可以重复应用了
export default : 这是导出组件的语法,用这个修饰,在其他文件中就能使用 import导入这个 .vue组件对象(框架自动将这个.vue文件封装成一个组件实例化对象)
上面这些都是固定的,暂时不理解没有什么。下面我们会通过学习Element组件库来展示具体怎么使用,通过具体的练习才好理解。
- main.js文件解析
import Vue from 'vue' // 导入vue库
import App from './App.vue' // 导入App.vue组件
import router from './router' // 导入router文件夹下的index.js文件Vue.config.productionTip = false // 阻止显示生产模式的消息new Vue({router, // 注册路由,固定写法render: h => h(App) // 渲染App.vue组件 , h是createElement函数,将App.vue组件对象转换为虚拟DOM对象挂载到html页面上 app元素上
}).$mount('#app') // 上面的代码等价于下面的代码/* new Vue({el: '#app',router: router, // 注册路由,根据导入的router文件夹下的index.js文件生成了一个router对象,键和值相同,可以简写为routerrender: h => h(App) // 渲染App.vue组件 , h是createElement函数,将App.vue组件对象转换为虚拟DOM对象挂载到html页面上 app元素上
}) */
- .vue组件 语法
- template : 里面写html
- style: 里面写 css样式
- script: 里面写之前Vue对象里面的数据模型、JS方法函数等等(具体案例演示)
- 各个vue组件之间是独立的,也就是说,不同Vue组件里面的元素id和class这些就算名字相同,不会冲突,各个组件只能管自己的事情。
之前数据模型和方法是这种写法:
现在在Vue模版里面变成下面这样了:
<template><!-- 组件的模板部分 --><div class="my-component"><!-- 组件的内容 --><h1>{{ title }}</h1><button @click="handleClick">Click Me</button></div>
</template><script>
// 组件的逻辑部分
export default {name: 'MyComponent', // 组件名称(推荐使用大驼峰命名)props: {// 定义组件的 props(从父组件接收的数据)initialTitle: {type: String, // 类型校验default: 'Hello, Vue!' // 默认值}},data() {// 组件的内部状态return {title: this.initialTitle // 使用 props 初始化 data};},computed: {// 计算属性reversedTitle() {return this.title.split('').reverse().join('');}},watch: {// 监听器title(newTitle, oldTitle) {console.log(`Title changed from ${oldTitle} to ${newTitle}`);}},methods: {// 组件的方法handleClick() {this.title = 'Button Clicked!';}},// 生命周期钩子created() {console.log('Component created');},mounted() {console.log('Component mounted');}
};
</script><style scoped>
/* 组件的样式部分 */
/* 使用 scoped 属性将样式限制在当前组件内 */
.my-component {text-align: center;padding: 20px;font-family: Arial, sans-serif;
}h1 {color: #42b983;
}button {padding: 10px 20px;background-color: #42b983;color: white;border: none;border-radius: 5px;cursor: pointer;
}button:hover {background-color: #369c6e;
}
</style>
下面解释一下这个模版,主要理解一下那个父组件传递数据给子组件的机制,采用的是v-bind指令
相关文章:

5 前端系统开发:Vue2、Vue3框架(中):Vue前端工程化组件式开发
提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档 文章目录 前言五、前端工程化(使用Vue创建一个完整的企业级前端项目)1 Vue脚手架(Vue-cli)环境准备(1)…...

【Leetcode刷题记录】1456. 定长子串中元音的最大数目---定长滑动窗口即解题思路总结
1456. 定长子串中元音的最大数目 给你字符串 s 和整数 k 。请返回字符串 s 中长度为 k 的单个子字符串中可能包含的最大元音字母数。 英文中的 元音字母 为(a, e, i, o, u)。 这道题的暴力求解的思路是通过遍历字符串 s 的每一个长度为 k 的子串…...

Rust中使用ORM框架diesel报错问题
1 起初环境没有问题:在Rust开发的时候起初使用的是mingw64平台加stable-x86_64-pc-windows-gnu编译链,当使用到diesel时会报错,如下: x86_64-w64-mingw32/bin/ld.exe: cannot find -lmysql具体信息很长这是主要信息是rust找不到链…...

Java 数据库连接池:HikariCP 与 Druid 的对比
Java 数据库连接池:HikariCP 与 Druid 的对比 数据库连接池:HikariCP 1. 卓越的性能表现 HikariCP 在数据库连接池领域以其卓越的性能脱颖而出。 其字节码经过精心优化,减少了不必要的开销,使得连接获取和释放的速度极快。 在…...

04树 + 堆 + 优先队列 + 图(D1_树(D7_B+树(B+)))
目录 一、基本介绍 二、重要概念 非叶节点 叶节点 三、阶数 四、基本操作 等值查询(query) 范围查询(rangeQuery) 更新(update) 插入(insert) 删除(remove) 五、知识小结 一、基本介绍 B树是一种树数据结构,通常用于数据库和操作系统的文件系统中。 B树…...

MATLAB实现单层竞争神经网络数据分类
一.单层竞争神经网络介绍 单层竞争神经网络(Single-Layer Competitive Neural Network)是一种基于竞争学习的神经网络模型,主要用于数据分类和模式识别。其核心思想是通过神经元之间的竞争机制,使得网络能够自动学习输入数据的特…...

AITables首发:基于AI全自动推理设计数据库,国内首创,跑5分钟相当于架构师设计一周!
AITables仅运行5分钟,整个系统的表都设计好了! 随着AI大模型技术的开源普及和平民化,现如今任何一个人都有可能成为超级个体。但随着企业级业务的膨胀和业务挑战增多,我们势必要跟上AI发展的节奏,让AI帮我们设计软件。…...

Go语言中结构体字面量
结构体字面量(Struct Literal)是在 Go 语言中用于创建和初始化结构体实例的一种语法。它允许你在声明结构体变量的同时,直接为其字段赋值。结构体字面量提供了一种简洁、直观的方式来创建结构体对象。 结构体字面量有两种主要形式࿱…...

PaddleOCR 截图自动文字识别
春节假期在家无聊,撸了三个小工具:PC截图编辑/PC录屏(用于meeting录屏)/PC截屏文字识别。因为感觉这三个小工具是工作中常常需要用到的,github上也有很多开源的,不过总有点或多或少的小问题,不利于自己的使用。脚本的编…...

【Blazor学习笔记】.NET Blazor学习笔记
我是大标题 我学习Blazor的顺序是基于Blazor University,然后实际内容不完全基于它,因为它的例子还是基于.NET Core 3.1做的,距离现在很遥远了。 截至本文撰写的时间,2025年,最新的.NET是.NET9了都,可能1…...

UE求职Demo开发日志#21 背包-仓库-装备栏移动物品
1 创建一个枚举记录来源位置 UENUM(BlueprintType) enum class EMyItemLocation : uint8 {None0,Bag UMETA(DisplayName "Bag"),Armed UMETA(DisplayName "Armed"),WareHouse UMETA(DisplayName "WareHouse"), }; 2 创建一个BagPad和WarePa…...

力扣988. 从叶结点开始的最小字符串
Problem: 988. 从叶结点开始的最小字符串 文章目录 题目描述思路复杂度Code 题目描述 思路 遍历思想(利用二叉树的先序遍历) 在先序遍历的过程中,用一个变量path拼接记录下其组成的字符串,当遇到根节点时再将其反转并比较大小(字典顺序大小&…...

《PYTHON语言程序设计》(2018版)1.7近似π。利用步幅来进行修改
利用循环的步幅来计算派 利用正常的办法, pi 4 *(1-(1/3)(1/5)-(1/7)(1/9)-(1/11)(1/13)-(1/15)) print(pi)利用这段代码得出结果 我们如何利用循环来进行呢 一、思路 首先我们来利用excel表格来计算一下结果 我做了一个设想,让相加的部分先进行相加,然后再进行减法呢?? 结…...

低通滤波算法的数学原理和C语言实现
目录 概述 1 原理介绍 1. 1 基本概念 1.2 一阶RC低通滤波器模型 2 C语言完整实现 2.1 滤波器结构体定义 2.2 初始化函数 2.3 滤波计算函数 3 应用示例 3.1 噪声信号滤波 3.2 输出效果对比 3.3 关键参数选择指南 4 性能优化技巧 4.1 定点数优化 4.2 抗溢出处理 …...

【BUUCTF杂项题】荷兰宽带数据泄露、九连环
一.荷兰宽带数据泄露 打开发现是一个.bin为后缀的二进制文件,因为提示宽带数据泄露,考虑是宽带路由器方向的隐写 补充:大多数现代路由器都可以让您备份一个文件路由器的配置文件,软件RouterPassView可以读取这个路由配置文件。 用…...

安全策略实验报告
1.实验拓扑图 2.实验需求 vlan2属于办公区,vlan3生产区 办公区pc在工作日时间可以正常访问OAserver,i其他时间不允许 办公区pc可以在任意时间访问Web server 生产区pc可以在任意时间访问OA server但不能访问web server 特例:生产区pc可以…...

Haproxy+keepalived高可用集群,haproxy宕机的解决方案
Haproxykeepalived高可用集群,允许keepalived宕机,允许后端真实服务器宕机,但是不允许haproxy宕机, 所以下面就是解决方案 keepalived配置高可用检测脚本 ,master和backup都要添加 配置脚本 # vim /etc/keepalived…...

亚博microros小车-原生ubuntu支持系列:20 ROS Robot APP建图
依赖工程 新建工程laserscan_to_point_publisher src/laserscan_to_point_publisher/laserscan_to_point_publisher/目录下新建文件laserscan_to_point_publish.py #!/usr/bin/env python3import rclpy from rclpy.node import Node from geometry_msgs.msg import PoseStam…...

Dockerfile构建容器镜像
Dockerfile 是一种文本格式的配置文件,用于自动化构建 Docker 镜像。它包含了一系列指令(命令),每个指令定义了容器镜像构建过程中的一步操作。通过Dockerfile,我们可以指定基础镜像、安装依赖、配置环境变量、复制文件…...

python 在包含类似字符\x16、\x12、\x某某的数组中将以\x开头的字符找出来的方法
话不多说直接看例子: import re# 原始列表 data [\x16, \x17, s, \x16, hello, \x1A]# 正则表达式匹配以 \x 开头的字符串 pattern r^\\x# 找出以 \x 开头的字符 result [item for item in data if isinstance(item, str) and re.match(pattern, repr(item)[1:-…...

Spring Bean 的生命周期介绍
Spring Bean 的生命周期涉及多个阶段,从实例化到销毁,在开发中我们可以通过各种接口和注解介入这些阶段来定制化自己的功能。以下是详细的生命周期流程: 1. Bean 的实例化(Instantiation) 方式:通过构造函…...

调用腾讯云批量文本翻译API翻译srt字幕
上一篇文章介绍了调用百度翻译API翻译日文srt字幕的方法。百度翻译API是get方式调用,参数都放在ur中,每次调用翻译文本长度除了接口限制外,还有url长度限制,而日文字符通过ur转码后会占9个字符长度,其实从这个角度来讲…...

车载软件架构 --- 软件定义汽车面向服务架构的应用迁移
我是穿拖鞋的汉子,魔都中坚持长期主义的汽车电子工程师。 老规矩,分享一段喜欢的文字,避免自己成为高知识低文化的工程师: 简单,单纯,喜欢独处,独来独往,不易合同频过着接地气的生活…...

Baklib引领内容中台与人工智能技术的创新融合之路
内容概要 在数字化转型的浪潮中,各行业正在面临前所未有的挑战与机遇。内容中台作为一种新的概念,逐渐进入了企业的视野,它不仅是一个技术平台,更是提供了整合和管理内容的新思路。从根本上,内容中台旨在提升企业对信…...

想品客老师的第十一天:模块化开发
模块化概念 模块化开发可以提高代码的可维护性、可读性和复用性,同时降低开发和调试的复杂性,把业务根据功能分开写,解决变量命名的冲突,可以开放部分接口给类(例如调用模块里的一个函数)也更适合团队协作…...

接入DeepSeek大模型
接入DeepSeek 下载并安装Ollamachatbox 软件配置大模型 下载并安装Ollama 下载并安装Ollama, 使用参数ollama -v查看是否安装成功。 输入命令ollama list, 可以看到已经存在4个目录了。 输入命令ollama pull deepseek-r1:1.5b, 下载deepse…...

基于遗传算法的256QAM星座图的最优概率整形matlab仿真,对比优化前后整形星座图和误码率
目录 1.算法仿真效果 2.算法涉及理论知识概要 3.MATLAB核心程序 4.完整算法代码文件获得 1.算法仿真效果 matlab2022a仿真结果如下(完整代码运行后无水印): GA优化曲线: 优化前后星座图对比 优化前后误码率对比 仿真操作步骤…...

JavaScript系列(57)--工程化实践详解
JavaScript工程化实践详解 🏗️ 今天,让我们深入探讨JavaScript的工程化实践。良好的工程化实践对于构建可维护、高质量的JavaScript项目至关重要。 工程化基础概念 🌟 💡 小知识:JavaScript工程化是指在JavaScript开…...

Linux-CentOS的yum源
1、什么是yum yum是CentOS的软件仓库管理工具。 2、yum的仓库 2.1、yum的远程仓库源 2.1.1、国内仓库 国内较知名的网络源(aliyun源,163源,sohu源,知名大学开源镜像等) 阿里源:https://opsx.alibaba.com/mirror 网易源:http://mirrors.1…...

【大数据技术】案例03:用户行为日志分析(python+hadoop+mapreduce+yarn+hive)
用户行为日志分析(python+hadoop+mapreduce+yarn+hive) 搭建完全分布式高可用大数据集群(VMware+CentOS+FinalShell) 搭建完全分布式高可用大数据集群(Hadoop+MapReduce+Yarn) 本机PyCharm远程连接虚拟机Python 搭建完全分布式高可用大数据集群(MySQL+Hive)...