手摸手Element-ui组件化开发

前端环境准备

编码工具: VSCode

依赖管理:NPM

项目构建: Vuecli

NPM的全称是Node Package Manager,是一个NodeJS包管理和分发工具,已经成为了非官方的发布Node模块(包)的标准。2020年3月17日,Github宣布收购npm,GitHub现在已经保证npm将永远免费。

NPM也可以理解为Maven

依赖管理NPM安装配置

NPM官网

https://nodejs.org/en/download/

下载安装完成后

验证 Node.js 是否已成功安装

node -v

在nodejs安装目录创建node_global和node_cache文件夹

cmd命令,依次输入:
npm config set prefix "D:\Nodejs\node_global"
npm config set cache "D:\Nodejs\node_cache"

npm config set prefix “D:\Nodejs\node_global”:将 Node.js 全局安装包的安装路径设置为 “D:\Nodejs\node_global”。在使用 npm install -g 命令全局安装 Node.js 模块时,将会将模块安装到指定的目录中。
npm config set cache “D:\Nodejs\node_cache”:将 Node.js 模块缓存路径设置为 “D:\Nodejs\node_cache”。在使用 npm install 命令安装 Node.js 模块时,将会将模块缓存到指定的目录中。

修改系统环境变量

F:\Program Files\nodejs\node_global

NODE_PATH

F:\Program Files\nodejs\node_modules

使用npm install express -g全局安装 Express 模块

说明文件权限不够,允许完全控制得以解决

更改 npm 的默认源为淘宝源
npm config set registry https://registry.npm.taobao.org

恢复默认的 npm 官方源
npm config set registry https://registry.npmjs.org

查看当前npm 源的 URL

使用淘宝源全局安装 cnpm。cnpm 是一个基于 npm 的淘宝定制版,可以在国内更快地安装 Node.js 包

npm install -g cnpm --registry=https://registry.npm.taobao.org

Element-ui项目创建

Element网站快速成型工具,一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库

创建vue2项目

 

npm i element-ui

#全局注册ElementUIimport ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';Vue.use(ElementUI);

图标库

https://fontawesome.dashgame.com/

安装

npm i font-awesome

#全局注册font-awesomeimport 'font-awesome/css/font-awesome.min.css';

效果

组件
使用组件 Demo 快速体验交互细节;使用前端框架封装的代码帮助工程师快速开发。

主题
在线主题编辑器,可视化定制和管理站点主题、组件样式

资源
下载相关资源,用其快速搭建页面原型或高保真视觉稿,提升产品设计效率。

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

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

相关文章

「Verilog学习笔记」数据累加输出

专栏前言 本专栏的内容主要是记录本人学习Verilog过程中的一些知识点,刷题网站用的是牛客网 在data_out准备好,valid_b拉高时,如果下游的ready_b为低,表示下游此时不能接收本模块的数据,那么,将会拉低ready…

ImportError: No module named python_util.util

ImportError: No module named python_util.util 从师兄那里拷贝了一个python文件,运行报错ImportError: No module named python_util.util,python小白上网搜,并没有搜到有价值的答案。。。经过摸索,最后解决。 其实这就是缺少…

肾合胶囊 | 修行人追求的“长生不老”,其实就是一个“增阳消阴”的过程!

关于生命的问题,在人们面前有两条路任你选择。 人的生命活动靠精气来维持,善于保养精气者长生,否则就是短寿。 长生或短寿,只能由你自己选择。 其实要想长生并不是很难的事情,长生药就在你自己身上,只不…

Exchange意外登录日志

最近在审计Exchange邮件系统的时候,发现大量用户半夜登录的日志。而且都是成功的,几乎没有失败的情况。其中Logon Type 8表示用户从网络登录。 Logon type 8: NetworkCleartext. A user logged on to this computer from the network. The user’s pas…

HCIA-RS基础-RIP路由协议

前言: RIP路由协议是一种常用的距离矢量路由协议,广泛应用于小规模网络中。本文将详细介绍RIP路由协议的两个版本:RIPv1和RIPv2,并介绍RIP的常用配置命令。通过学习本文,您将能够掌握RIP协议的基本原理、RIPv1和RIPv2的…

MIPI 打怪升级之DSI篇

MIPI 打怪升级之DSI篇 目录 1 Overview2 DSI Mode 2.1 Video 模式2.2 Command 模式3 DSI Physical Layer 3.1 数据流控3.2 双向性3.3 Video Mode Interfaces3.4 Command Mode Interfaces3.5 Clock4 多通道管理 4.1 通道数匹配4.2 线上数据分布5 DSI 协议 5.1 包格式 5.1.1 短包…

秋招如何准备?有什么建议?

秋招,是毕业生最好的求职渠道,没有之一。尽管还有春招,社招......都不如秋招重要,因为秋招的机会更多..... 如何准备秋招? 1、简历很重要 一个好的简历,就是敲门砖,这是你跟企业HR的第一次亲…

什么是测试系统工程师(TSE)

TSE(TestSystemEngineer)简称测试系统工程师,作为系统工程(SE)团队的一员,很多公司目前还没有这样的角色,导致测试部分往往处理弱势,第一,不能进行端到端开发流程的测试,第二,不能对产品最终的测…

Vue + Element UI 实现复制当前行数据功能及解决复制到新增页面组件值不更新的问题

文章目录 引言第一部分:复制当前行数据功能的实现1.1 环境准备1.2 创建表格并渲染数据1.3 解决复制的数据不更新问题 第二部分:拓展知识2.1 Vue的响应性原理2.2 Element UI的更多用法 结语 Vue Element UI 实现复制当前行数据功能及解决复制到新增页面组…

王者荣耀——Java

代码如下: sxt Background package sxt;import java.awt.*; //背景类 public class Background extends GameObject{public Background(GameFrame gameFrame) {super(gameFrame);}Image bg Toolkit.getDefaultToolkit().getImage("C:\\Users\\24465\\Desk…

软件测试 | 解决‘pip‘ 不是内部或外部命令,也不是可运行的程序或批处理文件

📢专注于分享软件测试干货内容,欢迎点赞 👍 收藏 ⭐留言 📝 如有错误敬请指正!📢交流讨论:欢迎加入我们一起学习!📢资源分享:耗时200小时精选的「软件测试」资…

基于springBoot+Vue的停车管理系统

开发环境 IDEA JDK1.8 MySQL8.0Node 系统简介 本项目为前后端分离项目,前端使用vue,后端使用SpringBoot开发,主要的功能有用户管理,停车场管理,充值收费,用户可以注册登录系统,自主充值和预…

【数据结构】用C语言实现顺序栈(附完整运行代码)

🦄个人主页:修修修也 🎏所属专栏:数据结构 ⚙️操作环境:Visual Studio 2022 一.了解项目功能 在本次项目中我们的目标是实现一个顺序栈: 该顺序栈使用动态内存分配空间,可以用来存储任意数量的同类型数据. 顺序栈结构体需要包含三个要素:存放数据的数组…

软件测试 | MySQL 主键约束详解:保障数据完整性与性能优化

📢专注于分享软件测试干货内容,欢迎点赞 👍 收藏 ⭐留言 📝 如有错误敬请指正!📢交流讨论:欢迎加入我们一起学习!📢资源分享:耗时200小时精选的「软件测试」资…

Maven总结

文章目录 为什么学习Maven?一、Maven项目架构管理工具二、Maven的下载安装及配置1.maven的下载2.maven目录结构3.配置阿里云镜像和本地仓库:4.maven配置环境变量。5.阿里云镜像和本地仓库说明 三、idea中maven的操作1.以模板的形式创建maven项目2.其他配置maven的方式3.不勾模…

基础C语言编程题

int i,j; int a[3][3]; for(i0;i<3;i){for(j0;j<3;j){scanf("%d",&a[i][j]);a[i][j]a[i][j]*2;}} 6.功能&#xff1a;把20个随机数存入一个数组&#xff0c;然后输出该数组中的最大值。 int main(){int p[20];int i,max0;for(i0;i<20;i){scanf("…

浅谈现代化城市建设中智慧消防的研究与应用

安科瑞 华楠 【摘要】随着城市现代化发展&#xff0c;城市居住密度愈来愈大&#xff0c;城市建筑结构复杂多样化&#xff0c;高层建筑火灾发生率在不断地升高。对现代化城市面临的消防问题展开讨论&#xff0c;针对智慧消防在现代化城市建设中的现状进行了分析&#xff0c;并提…

python cv2.imread()和Image.open()的区别和联系

文章目录 1. cv2.imread()1.1 cv2.imread参数说明1.2 注意事项 2. Image.open()3. cv2.imread()与Image.open()相互转化3.1 cv2.imread()转成Image.open()&#xff1a;Image.fromarray()3.2 Image.open()转成cv2.imread()&#xff1a;np.array() 1. cv2.imread() cv2.imread()…

每日一题--删除链表的倒数第 N 个结点

破阵子-晏殊 燕子欲归时节&#xff0c;高楼昨夜西风。 求得人间成小会&#xff0c;试把金尊傍菊丛。歌长粉面红。 斜日更穿帘幕&#xff0c;微凉渐入梧桐。 多少襟情言不尽&#xff0c;写向蛮笺曲调中。此情千万重。 目录 题目描述&#xff1a; 思路分析&#xff1a; 方法及…

RK3568驱动指南|第八篇 设备树插件-第72章 设备树插件语法和编译实验

瑞芯微RK3568芯片是一款定位中高端的通用型SOC&#xff0c;采用22nm制程工艺&#xff0c;搭载一颗四核Cortex-A55处理器和Mali G52 2EE 图形处理器。RK3568 支持4K 解码和 1080P 编码&#xff0c;支持SATA/PCIE/USB3.0 外围接口。RK3568内置独立NPU&#xff0c;可用于轻量级人工…