手摸手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.hqwc.cn/news/217420.html

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

相关文章

【从浅识到熟知Linux】基本指令之基本权限

🎈归属专栏:从浅学到熟知Linux 🚗个人主页:Jammingpro 🐟每日一句:用博客整理整理之前学过的知识,是个不错的选择。 文章前言:本文介绍Linux中的基本权限及相关指令用法并给出示例和…

30㎡新中式大横厅|方寸之间,诉说东方写意生活。福州中宅装饰,福州装修

今天要分享的是一个新中式风格的客厅装修,它的开间是4.5米,进深是6.5米。设计中有许多亮点,让我们一起来看看。 1️⃣ 首先,这个客厅采用了双眼皮无主灯吊顶的设计,让整个空间看起来更加高挑宽敞。吊顶的边缘线条简洁明…

【数据结构】堆(C语言)

今天我们来学习堆,它也是二叉树的一种(我滴神树!) 目录 堆的介绍:堆的代码实现:堆的结构体创建:堆的初始化:堆的销毁:堆的push:堆的pop:判空 &am…

2022年MathorCup大数据竞赛B题北京移动用户体验影响因素研究求解全过程文档及程序

2022年MathorCup高校数学建模挑战赛—大数据竞赛 B题 北京移动用户体验影响因素研究 原题再现: 移动通信技术飞速发展,给人们带来了极大便利,人们也越来越离不开移动通信技术带来的各种便捷。随着网络不断的建设,网络覆盖越来越…

定制手机套餐---python序列

if __name__ __main__:print("定制手机套餐")print("")#定义电话时长:字典callTimeOptions{1:0分钟,2:50分钟,3:100分钟,4:300分钟,5:不限量}callTimeInputinput("请输入电话时长的选择编号:")callTimeResultcallTimeOpt…

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

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

TCP/IP协议:最流行的电子邮件协议SMTP(简单邮件传输协议)详解

SMTP 是一种电子邮件协议,用于通过互联网从一个电子邮件帐户向另一个电子邮件帐户发送电子邮件。它是TCP/IP协议应用层的一部分。作为一种电子邮件协议,它建立了不同电子邮件客户端和帐户之间轻松信息交换的规则。这样,简单邮件传输协议就可以…

车载通信架构 —— 传统车内通信网络CAN(可靠性为王)

车载通信架构 —— 传统车内通信网络CAN(可靠性为王) 我是穿拖鞋的汉子,魔都中坚持长期主义的汽车电子工程师。 老规矩,分享一段喜欢的文字,避免自己成为高知识低文化的工程师: 屏蔽力是信息过载时代一个人的特殊竞争力,任何消耗你的人和事,多看一眼都是你的不对。非…

03 _ 系统设计目标(一):如何提升系统性能?

提到互联网系统设计,可能听到最多的词就是“三高”,也就是“高并发”“高性能”“高可用”,它们是互联网系统架构设计永恒的主题。这里将整体探讨下高并发系统设计的目标,然后在此基础上,探讨下:如何提升系…

力扣二叉树--总结篇(1)

前言 七天写了二十道题,前面感觉不错,后面越来越写不出来,刷题的心境和效果已然发生了变化。写个阶段总结,及时调整。 内容 先是二叉树的遍历 前序,中序,后序,即对应的递归,迭代…

CDA一级备考思维导图

CDA一级备考思维导图 第一章 数据分析概述与职业操守1、数据分析概念、方法论、角色2、数据分析师职业道德与行为准则3、大数据立法、安全、隐私 CDA一级复习备考资料共计七个章节,如需资料,请留言,概览如下图: 第一章 数据分析…

软件测试没有面试?8类细节让你邀约不断

求职不顺,没有邀约,大概率是你的简历出现了问题。 本篇文章列出高薪简历应该注意的细节,合计36处,涉及简历的八大组成部分。 同时,在这我也准备了一份软件测试视频教程(含接口、自动化、性能等&#xff0…