当前位置: 首页 > news >正文

vue-cli(vue脚手架方式搭建)

1.首先安装node前端环境,可以帮助我们去下载其他的组件

 

 下载完成后,去自己的电脑找到node的文件路径,复制去配置环境变量,在path中配 

 

 

环境搭配完成后,在cmd中进行测试 ,输入一下两个命令进行测试

2.在hbuilderX中创建一个vue-cli项目(标准的前段项目)

 

 

 

3.组件路由 

(1)安装

vue-router 是一个插件包,所以我们还是需要用 npm 来进行安装的。
打开命令行工具,进入你的项目目录,输入下面命令。
npm i vue-router@3.5.3

 (2) 第一步:

在src中创建一个文件夹router,并在该文件夹中建index.js,导入Vue,router和其他组件

格式(import Vue from"vue"),其中router和ElementUI需要Vue.use(router)

 

import Vue from "vue";
import router from "vue-router";
Vue.use(router);import Login from "../Login.vue";import Main from "../Main.vue";

第二步:定义组件路由

 

var rout = new router({routes:[{path:'/login',name:'Login',component:Login},{path:'/main',name:'Main',component:Main}]
});

第三步:导出路由对象

export default rout;

在默认的App.vue中

4.使用

5.打包

 npm run build

ElementUI前端框架

1.安装,在终端输入命令npm i element-ui -S

2.在main.js中导入ElementUI框架

import ElementUI from 'element-ui';

import 'element-ui/lib/theme-chalk/index.css';

Vue.use(ElementUI)

相关文章:

vue-cli(vue脚手架方式搭建)

1.首先安装node前端环境,可以帮助我们去下载其他的组件 下载完成后,去自己的电脑找到node的文件路径,复制去配置环境变量,在path中配 环境搭配完成后,在cmd中进行测试 ,输入一下两个命令进行测试 2.在hbuilderX中创建一个vue-cli项目(标准的前段项目) 3.组件路由 (1)安装 v…...

CentOS 安装 Docker

文章目录 一、更新yum源二、查看docker是否曾经安装过三、安装所需要的软件包四、设置yum源(也可以设置成国内的阿里源等)五、查看docker版本六、.安装docker (默认全部选y)七、查看docker安装版本八、docker 启动/停止/重启/开机…...

别搞了 软件测试真卷不动了...

内卷可以说是 2022年最火的一个词了。2023 年刚开始,在很多网站看到很多 软件测试的 2022 年度总结都是:软件测试 越来越卷了(手动狗头),2022 年是被卷的一年。前有几百万毕业生虎视眈眈,后有在职人员带头“…...

OJ刷题 第十二篇

21308 - 特殊的三角形 时间限制 : 1 秒 内存限制 : 128 MB 有这样一种特殊的N阶的三角形&#xff0c;当N等于3和4时&#xff0c;矩阵如下&#xff1a; 请输出当为N时的三角形。 输入 输入有多组数据&#xff0c;每行输入一个正整数N&#xff0c;1<N<100 输出 按照给出…...

【计算机专业应届生先找培训还是先找个工作过渡一下?】

计算机专业应届生先找培训还是先找个工作过渡一下&#xff1f; 计算机应届生是先培训还是先工作&#xff0c;这个问题应该困扰了很多专业技能一般的同学&#xff0c;尤其是学历方面还没有优势的普通本专科院校。都说技术与学历优秀的人进大厂&#xff0c;技术一般学历优秀的人能…...

MySQL数据库,联合查询

目录 1. 联合查询 1.1 内查询 1.2 外查询 1.3 自连接 1.4 子查询 1.5 合并查询 1. 联合查询 联合查询&#xff0c;简单的来讲就是多个表联合起来进行查询。这样的查询在我们实际的开发中会用到很多&#xff0c;因此会用笛卡尔积的概念。 啥是笛卡尔积&#xff1f;两张表…...

springboot注解(全)

一、什么是Spring Boot Spring Boot是一个快速开发框架&#xff0c;快速的将一些常用的第三方依赖整合&#xff08;通过Maven子父亲工程的方式&#xff09;&#xff0c;简化xml配置&#xff0c;全部采用注解形式&#xff0c;内置Http服务器&#xff08;Jetty和Tomcat&#xff0…...

进制转换—包含整数和小数部分转换(二进制、八进制、十进制、十六进制)手写版,超详细

目录 1.进制转换必备知识&#xff1a; 1.1 二进制逢2进1 8进制逢8进1 10进制逢10进1 16进制逢16进1 1.2为了区分二、八、十、十六进制&#xff0c;我们通常在数字后面加字母进行区分 2. 二进制与八进制、十六进制相互转换 2.1 二进制转八进制 2.2 八…...

什么是UML?

文章目录 00 | 基础知识01 | 静态建模类图对象图用例图 02 | 动态建模时序图通信图状态图活动图 03 | 物理建模构件图部署图 UML&#xff08;Unified Model Language&#xff09;&#xff0c;统一建模语言&#xff0c;是一种可以用来表现设计模式的直观的&#xff0c;有效的框图…...

5.3 Mybatis映射文件 - 零基础入门,轻松学会查询的select标签和resultMap标签

本文目录 前言一、创建XML映射文件二、MybatisX插件安装三、mapper标签四、select标签UserMapper接口方法UserMapper.xml 五、resultMap标签定义resultMap标签修改select标签 总结 前言 MyBatis的强大在于它的语句映射&#xff0c;它提供了注解和XML映射文件两种开发方式&…...

“华为杯”研究生数学建模竞赛2020年-【华为杯】B题:汽油辛烷值优化建模(附获奖论文和python代码实现)

目录 摘 要: 1 问题重述 1.1 问题背景 1.2 问题重述 2 模型假设 3 符号说明...

C6678开发概述与Sys/bios基本使用

C6678开发概述 参考开发环境标记及术语创建sys/bios自定义平台运行第一个sys/bios程序Clock模块使用Demo 参考 TMS320C6678 Multicore Fixed and Floating-Point Digital Signal Processor Datasheet TMS320C66x DSP CorePac User Guide 官方手册 创龙6678开发教程 开发环境 …...

python算法中的图算法之网络流算法(详解二)

目录 学习目标: 学习内容: 网络流算法 Ⅰ. 网络流模型 Ⅱ . Ford-Fulk...

企业电子招投标采购系统之项目说明和开发类型源码

项目说明 随着公司的快速发展&#xff0c;企业人员和经营规模不断壮大&#xff0c;公司对内部招采管理的提升提出了更高的要求。在企业里建立一个公平、公开、公正的采购环境&#xff0c;最大限度控制采购成本至关重要。符合国家电子招投标法律法规及相关规范&#xff0c;以及…...

ERTEC200P-2 PROFINET设备完全开发手册(8-1)

8.1 IRT通讯实验 这里我们使用APP3 IsoApp&#xff0c;修改源代码usrapp_cfg.h的宏为 #define EXAMPL_DEV_CONFIG_VERSION 3 使能App3&#xff0c;对应的主程序为“usriod_main_isoapp.c” 编译后下载运行。打开4.2建立的TIA项目&#xff0c;添加等时模式组织块&#xff0c…...

手撕Twitter推荐算法

Twitter近期开源了其推荐系统源码[1,2,3]&#xff0c;截止现在已经接近36k star。但网上公开的文章都是blog[1]直译&#xff0c;很拗口&#xff0c;因此特地开个系列系统分享下。系列涵盖&#xff1a; Twitter整体推荐系统架构&#xff1a;涵盖图数据挖掘、召回、精排、规则多…...

JAVA多态性测试的基本实验------JAVA入门基础教程

package duotai;public class Person {public void eat(){System.out.println("人吃饭");}public void Pdrink(){System.out.println("人喝水");} }package duotai;public class Man extends Person {public void eat(){System.out.println("男人吃饭…...

小说作者推荐: 妄鸦合集

《惊悚练习生》作品介绍 主人公叫弥赛亚,宗九的小说是《惊悚练习生》&#xff0c;它的作者是妄鸦倾心创作的一本现代耽美、娱乐圈、才女类型的小说&#xff0c;书中主要讲述了&#xff1a;作者&#xff1a;妄鸦 落魄魔术师宗九穿书了他穿到一本恐怖无限流选秀文里&#xff0c…...

MySQL-自带工具介绍

目录 &#x1f341;mysql &#x1f341;mysqladmin &#x1f990;博客主页&#xff1a;大虾好吃吗的博客 &#x1f990;MySQL专栏&#xff1a;MySQL专栏地址 MySQL数据库不仅提供了数据库的服务器端应用程序&#xff0c;同时还提供了大量的客户端工具程序&#xff0c;如mysql&a…...

12个你应该知道的Python库

12个你应该知道的Python库 1. python命令行argparse 更简单的begins2. colorama改善命令行窗口3. pyqtgraph 它提供了不同的功能选择&#xff0c;尤其适用于实时和交互式可视化4. 网页浏览器Pywebview5. psutil 提供了完整的获取系统信息的方法 或许cpu近5s的基本报告6. Watchd…...

【根据当天日期输出明天的日期(需对闰年做判定)。】2022-5-15

缘由根据当天日期输出明天的日期(需对闰年做判定)。日期类型结构体如下&#xff1a; struct data{ int year; int month; int day;};-编程语言-CSDN问答 struct mdata{ int year; int month; int day; }mdata; int 天数(int year, int month) {switch (month){case 1: case 3:…...

从深圳崛起的“机器之眼”:赴港乐动机器人的万亿赛道赶考路

进入2025年以来&#xff0c;尽管围绕人形机器人、具身智能等机器人赛道的质疑声不断&#xff0c;但全球市场热度依然高涨&#xff0c;入局者持续增加。 以国内市场为例&#xff0c;天眼查专业版数据显示&#xff0c;截至5月底&#xff0c;我国现存在业、存续状态的机器人相关企…...

使用Matplotlib创建炫酷的3D散点图:数据可视化的新维度

文章目录 基础实现代码代码解析进阶技巧1. 自定义点的大小和颜色2. 添加图例和样式美化3. 真实数据应用示例实用技巧与注意事项完整示例(带样式)应用场景在数据科学和可视化领域,三维图形能为我们提供更丰富的数据洞察。本文将手把手教你如何使用Python的Matplotlib库创建引…...

宇树科技,改名了!

提到国内具身智能和机器人领域的代表企业&#xff0c;那宇树科技&#xff08;Unitree&#xff09;必须名列其榜。 最近&#xff0c;宇树科技的一项新变动消息在业界引发了不少关注和讨论&#xff0c;即&#xff1a; 宇树向其合作伙伴发布了一封公司名称变更函称&#xff0c;因…...

【Linux手册】探秘系统世界:从用户交互到硬件底层的全链路工作之旅

目录 前言 操作系统与驱动程序 是什么&#xff0c;为什么 怎么做 system call 用户操作接口 总结 前言 日常生活中&#xff0c;我们在使用电子设备时&#xff0c;我们所输入执行的每一条指令最终大多都会作用到硬件上&#xff0c;比如下载一款软件最终会下载到硬盘上&am…...

springboot 日志类切面,接口成功记录日志,失败不记录

springboot 日志类切面&#xff0c;接口成功记录日志&#xff0c;失败不记录 自定义一个注解方法 import java.lang.annotation.ElementType; import java.lang.annotation.Retention; import java.lang.annotation.RetentionPolicy; import java.lang.annotation.Target;/***…...

Leetcode33( 搜索旋转排序数组)

题目表述 整数数组 nums 按升序排列&#xff0c;数组中的值 互不相同 。 在传递给函数之前&#xff0c;nums 在预先未知的某个下标 k&#xff08;0 < k < nums.length&#xff09;上进行了 旋转&#xff0c;使数组变为 [nums[k], nums[k1], …, nums[n-1], nums[0], nu…...

k8s从入门到放弃之HPA控制器

k8s从入门到放弃之HPA控制器 Kubernetes中的Horizontal Pod Autoscaler (HPA)控制器是一种用于自动扩展部署、副本集或复制控制器中Pod数量的机制。它可以根据观察到的CPU利用率&#xff08;或其他自定义指标&#xff09;来调整这些对象的规模&#xff0c;从而帮助应用程序在负…...

HTTPS证书一年多少钱?

HTTPS证书作为保障网站数据传输安全的重要工具&#xff0c;成为众多网站运营者的必备选择。然而&#xff0c;面对市场上种类繁多的HTTPS证书&#xff0c;其一年费用究竟是多少&#xff0c;又受哪些因素影响呢&#xff1f; 首先&#xff0c;HTTPS证书通常在PinTrust这样的专业平…...

Django RBAC项目后端实战 - 03 DRF权限控制实现

项目背景 在上一篇文章中&#xff0c;我们完成了JWT认证系统的集成。本篇文章将实现基于Redis的RBAC权限控制系统&#xff0c;为系统提供细粒度的权限控制。 开发目标 实现基于Redis的权限缓存机制开发DRF权限控制类实现权限管理API配置权限白名单 前置配置 在开始开发权限…...