手摸手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.rhkb.cn/news/206603.html

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

相关文章

WebGL/threeJS面试题扫描与总结

什么是 WebGL?什么是 Three.js?请解释three.js中的WebGL和Canvas的区别? WebGL(全写Web Graphics Library)是一种3D绘图协议,这种绘图技术标准允许把JavaScript和OpenGL ES 2.0结合在一起,通过增加OpenGL ES 2.0的一个…

龙芯loongarch64服务器编译安装pyarrow

1、简介 pyarrow是一个高效的Python库,用于在Python应用程序和Apache Arrow之间进行交互。Arrow是一种跨语言的内存格式,可以快速高效地转移大型数据集合。它提供了一种通用的数据格式,将数据在内存中表示为表格,并支持诸如序列化和分布式读取等功能。 龙芯的Python仓库安…

【教程】 一文部署配置并入门 Redis

综述 什么是Redis Redis官网——Redis.io Redis, 作为一个高性能的键值对数据库,主要应用于以下场景: 缓存系统:由于其高速读写能力,Redis 非常适合用作缓存系统,减少数据库负载。 会话存储(Session St…

构建未来:云计算 生成式 AI 诞生科技新局面

目录 引言生成式 AI:开发者新伙伴云计算与生成式 AI 的无缝融合亚马逊云与生成式 AI 结合的展望/总结我用亚马逊云科技生成式 AI 产品打造了什么,解决了什么问题未来科技发展趋势:开发者的机遇与挑战结合实践看未来结语开源项目 引言 2023年…

基于SpringBoot母婴商城

摘 要 现代经济快节奏发展以及不断完善升级的信息化技术,让传统数据信息的管理升级为软件存储,归纳,集中处理数据信息的管理方式。本母婴商城系统就是在这样的大环境下诞生,其可以帮助管理者在短时间内处理完毕庞大的数据信息&am…

04.里氏替换原则(Liskov Substitution Principle)

暴论:一般的,如果一个富二代不想着证明自己,那么他一辈子都会衣食无忧。 一言 里氏替换原则想告诉我们在继承过程中会遇到什么问题,以及继承有哪些注意事项。 概述 这是流传较广的一个段子: “一个坐拥万贯家财的富二…

DBS note6:Hashing(哈希存储)

目录 一、一般策略 二、算法简述 三、哈希缺点(Drawbacks of Hashing) 四、举例 五、外部哈希的分析 一、一般策略 由于我们无法一次性将所有数据放入内存中,我们需要构建多个不同的哈希表并将它们连接在一起。然而,这个想法…

第20 章 多线程

20.1线程简介. 20.2创建线程 2.1继承Thread类 Thread 类是java.lang包中的一个类,从这个类中实例化的对象代表线程,程序员启动一个新线程需要建立Thread 实例。Thread类中常用的两个构造方法如下: public Thread():创建一个新的线程对象。 public Threa…

如何提高3D建模技能?

无论是制作影视动画还是视频游戏,提高3D建模技能对于你的工作都至关重要的。那么如何能创建出精美的3D模型呢?本文给大家一些3D建模技能方面的建议。 3D建模通过专门的软件完成,涉及制作三维对象。这项技能在视频游戏开发、建筑、动画和产品…

18、串口通信

串口介绍 串口是一种应用十分广泛的通讯接口,串口成本低、容易使用、通信线路简单,可实现两个设备的互相通信。 单片机的串口可以使单片机与单片机,单片机与电脑、单片机与各式各样的模块互相通信,极大的扩展了单片机的应用范围&…

大模型能否生成搜索引擎的未来?

文|郝 鑫 编|刘雨琦 ChatGPT火爆之前,水面下,也有中国公司也在朝着智能助手的方向努力。夸克便是其中之一。在GPT风靡科技圈后,国内就开始陆续冒出一些大模型厂商。对当时夸克而言,做大模型毋庸置疑&am…

Python list列表添加元素的3种方法及删除元素的3种方法

Python list列表添加元素的3种方法 Python list 列表增加元素可调用列表的 append() 方法,该方法会把传入的参数追加到列表的最后面。 append() 方法既可接收单个值,也可接收元组、列表等,但该方法只是把元组、列表当成单个元素,这…

“逆风飞翔·事实孤儿同行计划”成长陪伴主题区域陪伴培训会

为推进各机构更好地开展事实孤儿成长陪伴工作,促进事实孤儿成长陪伴实施成效,搭建各机构间事实孤儿成长陪伴方式方法交流平台。11月26日,在中国乡村发展基金会、中国民生银行的支持下,由湖南省大爱无疆青少年公益发展中心主办&…

ZZULIOJ 2466: 楼上瞎说,楼下才是,Java

2466: 楼上瞎说,楼下才是 题目描述 《九章算术》的内容十分丰富,全书采用问题集的形式,收有246个与生产、生活实践有联系的应用问题,其中每道题有问(题目)、答(答案)、术&#xff…

MySQL事务详解

MySQL事务详解 数据库事务概述事务是如何实现的事务的ACID特性事务的状态 事务的使用显式事务隐式事务示例自动提交回滚回滚到保存点 事务的隔离级别数据并发问题MySQL 支持的四种隔离级别注意示例 设置隔离级别 事务的常见分类 数据库事务概述 数据库事务是数据库管理系统&am…

【Linux】:信号(一)产生

信号 一.前台进程和后台进程1.前台进程2。后台进程3.总结 二.自定义信号动作接口三.信号的产生1.键盘组合键2.kill信号进程pid3.系统调用1.kill函数2.raise函数3.abort函数 四.异常五.软件条件六.core文件 一.前台进程和后台进程 1.前台进程 一个简单的代码演示 像这种程序在…

华为云之云桌面Workspace的使用体验

华为云之云桌面Workspace的使用体验 一、云桌面Workspace介绍1.云桌面简介2.云桌面特点3. 云桌面应用场景①远程移动办公②协同办公③安全办公④公用终端⑤图形制作渲染 二、本次实践介绍1. 本次实践目的2. 本次实践环境 三、购买云桌面1. 进入华为云的云桌面购买界面2. 选择购…

Linux下删除当前目录下的所有目录

Linux下删除当前目录下的所有目录 Linux下删除当前目录下的所有目录,可以使用命令:rm -rf ./* rm -rf ./*可以得知rm -rf ./命令是删除当前目录下的所有文件和文件夹,但不会删除根目录下的文件。其中,".“代表当前目录&…

ps 透明印章制作

ps 透明印章制作 1、打开不透明印章2、抠出红色印章3、新建图层4、填充红色印章到新图层5、导出透明印章 1、打开不透明印章 打开ps软件,菜单栏选择 文件-打开 选择本地不透明印章 打开 2、抠出红色印章 ps菜单栏 选择 选择-色彩范围 点击色彩范围 色彩范围窗口 取…

Python实现一箭穿心

文章目录 🎄效果🏳️‍🌈Turtle模块🌹代码🌺代码讲解 🎄效果 🏳️‍🌈Turtle模块 Turtle是一个绘图工具,是Python标准库中的一个模块。它提供了一种简单而直观的方式来创…