vue-cli 搭建项目,ElementUI的搭建和使用
vue-cli 官方提供的一个脚手架,用于快速生成一个vue的项目模板;预先定义 好的目录结构及基础代码,就好比咱们在创建Maven项目时可以选择创建一个 骨架项目,这个骨架项目就是脚手架,我们的开发更加的快速;
主要的功能
- - 统一的目录结构
- - 本地调试
- - 热部署
- - 单元测试
- - 集成打包上线
需要的环境
Node.js
简单的说 Node.js是一个前端js运行环境或者说是一个 JS 语言解释器。
npm
npm 是Node.js 的包管理工具,用来安装各种 Node.js 的扩展。npm 是
JavaScript 的包管理工具,也是世界上最大的软件注册表。有超过 60 万个
JavaScript 代码包可供下载。npm 让 JavaScript 开发人员可以轻松地使用
其他开发人员共享的代码。
Node.js安装
下载
Node.js — Download Node.js®
安装






测试
cmd打开控制台分别输入node -v 和 npm -v
若显示以下结果则安装成功

使用HbuilderX快速搭建一个vue-cli项目

创建成功后,在命令行窗口启动项目
![]()
输入npm run serve命令
或者
右键点击对应项目找到外部命令中也可找到npm run serve命令

启动成功后,会出现访问项目地址:http://127.0.0.1:8080/
在命令行中ctrl+c 可以停止服务
组件路由
vue router 是 Vue.js 官方的路由管理器。它和Vue.js的核心深度集成,让构建 单页面应用变得易如反掌。
安装
vue-router 是一个插件包,所以我们还是需要用npm来进行安装的。
打开命令行工具,进入你的项目目录,输入下面命令。
npm i vue-router@3.5.3
搭建步骤:
1. 创建router目录
创建index.js 文件,在其中配置路由
import Vue from 'vue'; /* 导入vue */
import router from 'vue-router'; /* 导入路由 *//* 导入注册组件 */
import Index from '../Index.vue';
import Login from '../Login.vue';
import Reg from '../Reg.vue';/* 注册 定义组件访问地址 */
Vue.use(router);var rout = new router({routes: [{path:"/",component:Index},{path: '/index',component: Index},{path: '/login',component: Login},{path: '/reg',component: Reg}]});//导出路由对象export default rout;
2.使用路由
在<template>标签中使用路由(前提必须要加一个<div>根标签)
<template><!-- 组件模板格式 组件中必须有一个根标签 --><div>首页<router-link to="/login">登录</router-link><router-link to="/reg">注册</router-link>{{ name }} {{ age }}</div>
</template><script>/* 导出组件 */export default{//定义组件中的数据 datadata(){return{name:"Tom",age:20}},methods:{}}
</script><style>
</style>
3.在main.js 中配置路由
import Vue from 'vue'
import App from './App.vue'Vue.config.productionTip = false//导入组件路由
import router from './router/index.js'Vue.use(router);new Vue({router,render: h => h(App),
}).$mount('#app')
4.路由导航守卫
5.路由嵌套
{path: '/main',component: Main, //路由嵌套 在main下面的嵌套子路由children:[{path: '/majorlist',component: MajorList},{path: '/studentlist',component: StudentList}]}
6.路由传参
ElementUI
Element,一套为开发者、设计师和产品经理准备的基于 Vue2.0 的桌面端组件库.
安装ElementUI
在命令行窗口输入以下命令:
npm i element-ui -S
在 main.js 中写入以下内容:
/* 导入 ElementUI*/
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);
使用Element
Element网站
Element - The world's most popular Vue UI framework
在此网站中就可以找到自己所需求的各种组件
相关文章:
vue-cli 搭建项目,ElementUI的搭建和使用
vue-cli 官方提供的一个脚手架,用于快速生成一个vue的项目模板;预先定义 好的目录结构及基础代码,就好比咱们在创建Maven项目时可以选择创建一个 骨架项目,这个骨架项目就是脚手架,我们的开发更加的快速; …...
SQL-DDL操作
数据库操作 登录MySQL PS D:\WorkSpace\MachineLearning\DL_learning> mysql -u root -p Enter password: ****** Welcome to the MySQL monitor. Commands end with ; or \g. Your MySQL connection id is 12 Server version: 8.0.37 MySQL Community Server - GPLCopy…...
帮粉丝用gpt写代码生成一个文字视频
文章目录 使用网站ValueError: could not broadcast input array from shape (720,1280) into shape (720,1280,3) 定义文本内容和动画参数定义视频参数创建背景使用 PIL 创建文本图像创建文本剪辑使用函数创建文本剪辑合并所有剪辑导出视频1. 理解错误信息2. 确认图像数组形状…...
IP白名单及其作用解析
在网络安全领域,IP白名单是一项至关重要的策略,它允许特定的IP地址或地址范围访问网络资源,从而确保只有受信任的终端能够连接。下面,我们将深入探讨IP白名单的定义、作用以及实施时的关键考虑因素。 一、IP白名单的定义 IP白名单…...
【Android八股文】如何对ListView RecycleView进行局部刷新的?
文章目录 一、如何对ListView进行局部刷新的?1.1 方法一:更新对应view的内容1.2 方法二:通过ViewHolder去设置值1.3 方法三:调用一次getView()方法1.4 封装在万能适配器当中1.5 总结二、如何对RecyclerView 进行局部刷新的?2.0 为什么会有DiffUtil?2.1 讲解一下DiffUtil2…...
力扣300. 最长递增子序列(动态规划)
Problem: 300. 最长递增子序列 文章目录 题目描述思路及解法复杂度Code 题目描述 思路及解法 明确题目涉及到求取最值问题因此我们可以考虑使用动态规划来解决问题 1.定义状态:定义int类型的dp数组表示以nums[i]结尾的序列的最长长度,初始化均为1即表示…...
【ARM】Ulink不同的系列对于芯片的支持和可以支持keil软件
【更多软件使用问题请点击亿道电子官方网站】 1、 文档目标 了解不同版本的ULINK可以支持的芯片架构,和ULINK可以和哪个系列的keil软件进行在线调试 2、 问题场景 用于了解不同ULINK仿真器对于芯片的支持是不一样的,并不是ULINK可以支持所有的keil软件…...
【入门】5分钟了解卷积神经网络CNN是什么
本文来自《老饼讲解-BP神经网络》https://www.bbbdata.com/ 目录 一、卷积神经网络的结构1.1.卷积与池化的作用2.2.全连接层的作用 二、卷积神经网络的运算2.1.卷积层的运算2.2.池化的运算2.3.全连接层运算 三、pytorch实现一个CNN例子3.1.模型的搭建3.2.CNN完整训练代码 CNN神…...
dB分贝入门
主要参考资料: dB(分贝)定义及其应用: https://blog.csdn.net/u014162133/article/details/110388145 目录 dB的应用一、声音的大小二、信号强度三、增益 dB的应用 一、声音的大小 在日常生活中,住宅小区告知牌上面标示噪音要低…...
力扣1744.你能在你最喜欢的那天吃到你最喜欢的糖果吗?
力扣1744.你能在你最喜欢的那天吃到你最喜欢的糖果吗? 对于第i类糖果求出吃到它的最大时间和最小时间 判断给定时间是否在范围内 注意: 同一天可以吃多种糖果 不是只能吃一种 class Solution {public:vector<bool> canEat(vector<int>&am…...
Redis的使用和原理
目录 1.初识Redis 1.1 Redis是什么? 1.2 Redis的特性 1.2.1 速度快 1.2.2 基于键值对的数据结构服务器 1.2.3 丰富的功能 1.2.4 简单稳定 1.2.5 持久化 1.2.6 主从复制 1.2.7 高可用和分布式 1.3 Redis的使用场景 1.3.1 缓存 1.3.2 排行榜系统 1.3.3 计数器应用 1.3…...
扫描全能王的AI驱动创新与智能高清滤镜技术解析
目录 引言1、扫描全能王2、智能高清滤镜黑科技2.1、图像视觉矫正2.2、去干扰技术 3、实际应用案例3.1、打印文稿褶皱检测3.2、试卷擦除手写3.3、老旧文件处理3.4、收银小票3.5、从不同角度扫描文档 4、用户体验结论与未来展望 引言 在数字化时代背景下,文档扫描功能…...
【Linux】Linux系统配置,linux的交互方式
1.Linux系统环境安装 有三种方式 裸机安装或者双系统 -- 不推荐虚拟机安装 --- 不推荐云服务器/安装简单, 维护成本低——推荐, 未来学习效果好 我们借助云服务器 云服务器(Elastic Compute Service,ECS)的标准定义…...
Linux中--prefix命令使用及源码安装
1.prefix - 指定文件安装路径通常与configure搭配使用: 在安装源码时可使用下述命令指定源码安装路径: bogon:httpd-2.4.59 wancanchishenma$./configure --prefix/usr/local/apache 2.源码的安装一般由3个步骤组成:配置(configur…...
加速科技Flash存储测试解决方案 全面保障数据存储可靠性
Flash存储芯片 现代电子设备的核心数据存储守护者 Flash存储芯片是一种关键的非易失性存储器,作为现代电子设备中不可或缺的核心组件,承载着数据的存取重任。这种小巧而强大的芯片,以其低功耗、可靠性、高速的读写能力和巨大的存储容量&…...
数字化那点事:一文读懂数字乡村
一、数字乡村的定义 数字乡村是指利用信息技术和数字化手段,推动乡村社会经济发展和治理模式变革,提升乡村治理能力和公共服务水平,实现乡村全面振兴的一种新型发展模式。它包括农业生产的数字化、乡村治理的智能化、乡村生活的现代化等方面…...
彻底解决 macos中chrome应用程序 的 无法更新 Chrome 弹窗提示 mac自定义参数启动 chrome.app
mac系统中的chrome app应用在每次打开是都会提示一个 “无法更新 Chrome Chrome 无法更新至最新版本,因此您未能获得最新的功能和安全修复程序。” , 然而最新的chrome 程序似乎在某些情况下居然会出现 输入和显示不一致的情况,暂时不想升…...
等级保护 | 如何完成等保的建设整改
等级保护整改是等保基本建设的一个阶段。为了能成功通过等级测评,企业要根据等级保护建设要求,对信息和信息系统进行网络安全升级,对定级对象当前不满足要求的进行建设整改,包括技术层面的整改,也包括管理方面的整改。…...
开发微信小程序从开始到部署上线,哪些个流程需要付费
1. 微信公众平台账号注册 费用:300元人民币(这是企业账号的认证费用,个人账号不需要付费)。说明:如果你是企业或组织,需要进行微信公众平台的认证,这会产生费用。个人开发者可以免费注册账号&a…...
python r, b, u, f 前缀详解
1、r前缀 一般来说,\n’是一个换行符,是一个字符串;而加上r为前缀后,不会以任何特殊方式处理反斜杠。因此,r"\n" 是包含 ‘\’ 和 ‘n’ 的双字符字符串;示例如下: >>> pr…...
LBE-LEX系列工业语音播放器|预警播报器|喇叭蜂鸣器的上位机配置操作说明
LBE-LEX系列工业语音播放器|预警播报器|喇叭蜂鸣器专为工业环境精心打造,完美适配AGV和无人叉车。同时,集成以太网与语音合成技术,为各类高级系统(如MES、调度系统、库位管理、立库等)提供高效便捷的语音交互体验。 L…...
K8S认证|CKS题库+答案| 11. AppArmor
目录 11. AppArmor 免费获取并激活 CKA_v1.31_模拟系统 题目 开始操作: 1)、切换集群 2)、切换节点 3)、切换到 apparmor 的目录 4)、执行 apparmor 策略模块 5)、修改 pod 文件 6)、…...
srs linux
下载编译运行 git clone https:///ossrs/srs.git ./configure --h265on make 编译完成后即可启动SRS # 启动 ./objs/srs -c conf/srs.conf # 查看日志 tail -n 30 -f ./objs/srs.log 开放端口 默认RTMP接收推流端口是1935,SRS管理页面端口是8080,可…...
NLP学习路线图(二十三):长短期记忆网络(LSTM)
在自然语言处理(NLP)领域,我们时刻面临着处理序列数据的核心挑战。无论是理解句子的结构、分析文本的情感,还是实现语言的翻译,都需要模型能够捕捉词语之间依时序产生的复杂依赖关系。传统的神经网络结构在处理这种序列依赖时显得力不从心,而循环神经网络(RNN) 曾被视为…...
MySQL 知识小结(一)
一、my.cnf配置详解 我们知道安装MySQL有两种方式来安装咱们的MySQL数据库,分别是二进制安装编译数据库或者使用三方yum来进行安装,第三方yum的安装相对于二进制压缩包的安装更快捷,但是文件存放起来数据比较冗余,用二进制能够更好管理咱们M…...
【C++特殊工具与技术】优化内存分配(一):C++中的内存分配
目录 一、C 内存的基本概念 1.1 内存的物理与逻辑结构 1.2 C 程序的内存区域划分 二、栈内存分配 2.1 栈内存的特点 2.2 栈内存分配示例 三、堆内存分配 3.1 new和delete操作符 4.2 内存泄漏与悬空指针问题 4.3 new和delete的重载 四、智能指针…...
【JVM】Java虚拟机(二)——垃圾回收
目录 一、如何判断对象可以回收 (一)引用计数法 (二)可达性分析算法 二、垃圾回收算法 (一)标记清除 (二)标记整理 (三)复制 (四ÿ…...
通过 Ansible 在 Windows 2022 上安装 IIS Web 服务器
拓扑结构 这是一个用于通过 Ansible 部署 IIS Web 服务器的实验室拓扑。 前提条件: 在被管理的节点上安装WinRm 准备一张自签名的证书 开放防火墙入站tcp 5985 5986端口 准备自签名证书 PS C:\Users\azureuser> $cert New-SelfSignedCertificate -DnsName &…...
AI语音助手的Python实现
引言 语音助手(如小爱同学、Siri)通过语音识别、自然语言处理(NLP)和语音合成技术,为用户提供直观、高效的交互体验。随着人工智能的普及,Python开发者可以利用开源库和AI模型,快速构建自定义语音助手。本文由浅入深,详细介绍如何使用Python开发AI语音助手,涵盖基础功…...
pgsql:还原数据库后出现重复序列导致“more than one owned sequence found“报错问题的解决
问题: pgsql数据库通过备份数据库文件进行还原时,如果表中有自增序列,还原后可能会出现重复的序列,此时若向表中插入新行时会出现“more than one owned sequence found”的报错提示。 点击菜单“其它”-》“序列”,…...
