手摸手Element-ui组件化开发

news2024/11/30 12:29:09

前端环境准备

编码工具: 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

#全局注册ElementUI

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

Vue.use(ElementUI);

图标库

https://fontawesome.dashgame.com/

安装

npm i font-awesome

#全局注册font-awesome

import 'font-awesome/css/font-awesome.min.css';

效果

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

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

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

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

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

相关文章

Node.js入门指南(四)

目录 express框架 express介绍 express使用 express路由 express 响应设置 中间件 路由模块化 EJS 模板引擎 express-generator hello,大家好!上一篇文章我们介绍了Node.js的模块化以及包管理工具等知识,这篇文章主要给大家分享Nod…

【代码】基于VMD(变分模态分解)-SSA(麻雀搜索算法优化)-LSTM的光伏功率预测模型(完美复现)matlab代码

程序名称:基于VMD(变分模态分解)-SSA(麻雀搜索算法优化)-LSTM的光伏功率预测模型 实现平台:matlab 代码简介:提出了变分模态分解(VMD)和麻雀搜索算法(SSA)与长短期记忆神经网络 (LSTM)相耦合,…

佳易王各行业收银管理系统软件,企业ERP管理软件,企业或个体定制开发软件以及软件教程资源下载总目录,持续更新,可关注收藏查阅

系统简介 1、佳易王软件功能实用、操作简单、软件绿色免安装,解压即可使用,软件已经内置数据库,不需再安装其他数据库文件。 2、佳易王软件,已经形成系列,上百款管理系统软件涵盖多个行业。 3、已为多个企业个体定制…

CSS特效019:图标图片悬浮旋转一周

CSS常用示例100专栏目录 本专栏记录的是经常使用的CSS示例与技巧,主要包含CSS布局,CSS特效,CSS花边信息三部分内容。其中CSS布局主要是列出一些常用的CSS布局信息点,CSS特效主要是一些动画示例,CSS花边是描述了一些CSS…

Android WiFi的断开分析

1.wifi断开大体流程: 1.wifi断开 wlan-driver最先知道。 2.wlan-driver在与路由器连接的时候(未断开时), 会有周期性的beacon帧来维持连接,AP端一旦遇到突发事情,会立刻通过802.11协议的 deauth 帧/ reject 帧等 通知到 driver。 3. wlan-…

计算器的模拟实现

计算器的模拟实现 一、实验题目:计算器二:实验目的:三:实验内容与实现1:【实验内容】2:【实验实现】1.计算器界面的实现,如下图所示:2:各项功能的实现,如下图…

canvas版放大镜

效果预览图 完整代码 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><title>放大镜</title><st…

C++ vector迭代器失效

STL中vector迭代器失效常见错误写法示例 最近在看STL容器失效的例子&#xff0c;涉及到vector数组迭代器失效的问题&#xff0c;如果不注意使用&#xff0c;很容易出现问题&#xff0c;我们先来看一下一个简单的示例程序&#xff0c;在数组nums中删除大于50的元素&#xff0c;…

运维高级-day01

shell回顾 1、快速生成版权控制信息&#xff0c;具体的内容自己替换 [root scripts]# cat ~/.vimrc autocmd BufNewFile *.py,*.cc,*.sh,*.java exec ":call SetTitle()" func SetTitle() if expand("%:e") sh call setline(1,"#!/bin/bash")…

【数据库篇】关系模式的表示——(2)规范化

范式&#xff1a;范式是符合某一种级别的关系模式的集合 规范化&#xff1a;是指一个低一级的范式的关系模式&#xff0c;通过模式的分解转换为若干个高一级范式的关系模式的集合。 1NF 每个分量必须是不可分开的数据项&#xff0c;满足这个条件的关系模式就是1NF。 2NF 若…

代码随想录算法训练营第四十六天【动态规划part08】 | 139.单词拆分、背包总结

139.单词拆分 题目链接&#xff1a; 力扣&#xff08;LeetCode&#xff09;官网 - 全球极客挚爱的技术成长平台 求解思路&#xff1a; 单词是物品&#xff0c;字符串s是背包&#xff0c;单词能否组成字符串s&#xff0c;就是问物品能不能把背包装满。 动规五部曲 确定dp数…

②⑩① 【MySQL】什么是分库分表?拆分策略有什么?什么是MyCat?

个人简介&#xff1a;Java领域新星创作者&#xff1b;阿里云技术博主、星级博主、专家博主&#xff1b;正在Java学习的路上摸爬滚打&#xff0c;记录学习的过程~ 个人主页&#xff1a;.29.的博客 学习社区&#xff1a;进去逛一逛~ 目录 ②⑩① 【MySQL】什么是分库分表&#xf…

定时器/计数器的应用

前言 对近期学习定时器进行简单的记录 参考链接 LED数码管的静态显示与动态显示&#xff08;KeilProteus&#xff09;-CSDN博客 外中断的应用-CSDN博客 【mcuclub】定时器/计数器_定时器/计数器的内部结构和工作方式-CSDN博客 5.图解定时器/计数器 - 知乎 (zhihu.com) 5…

CPU、GPU、TPU内存子系统架构

文章目录 CPU、GPU、TPU内存子系统架构概要CPUGPUTPU共同点和差异&#xff1a; CPU、GPU、TPU内存子系统架构 概要 Memory Subsystem Architecture&#xff0c;图源自TVM CPU CPU&#xff08;中央处理器&#xff09;的内存子系统&#xff1a;隐式管理 主内存&#xff08;…

VMware如何导出和导入镜像OVF虚拟机(以unbuntu为例)

前言&#xff1a;我下载了一个unbuntu的系统镜像&#xff0c;基于这个镜像创建了一个unbuntu的虚拟机&#xff0c;辛辛苦苦配置需要的开发环境&#xff0c;如&#xff1a;安装了mysql&#xff0c;安装了jdk等&#xff0c;此时&#xff0c;我的同事可能需要也是同一套类似环境&a…

视觉CV-AIGC一周最新技术精选(2023-11)

PG-Video-LLaVA: Pixel Grounding Large Video-Language Models https://github.com/mbzuai-oryx/Video-LLaVA将基于图像的大型多模态模型&#xff08;LMM&#xff09;扩展到视频领域是具有挑战性的。最近将基于图像的LMM扩展到视频的方法要么缺乏grounding定位能力&#xff08…

SQL sever2008中的游标

目录 一、游标概述 二、游标的实现 三、优缺点 3.1优点&#xff1a; 3.2缺点&#xff1a; 四、游标类型 4.1静态游标 4.2动态游标 4.3只进游标 4.4键集驱动游标 4.5显示游标&#xff1a; 4.6隐式游标 五、游标基本操作 5.1声明游标 5.1.1.IS0标准语法 5.1.1.1语…

nodejs+vue+python+PHP+微信小程序-书吧租阅管理系统的设计与实现-安卓-计算机毕业设计

在当今高度发达的信息中&#xff0c;信息管理改革已成为一种更加广泛和全面的趋势。为确保中国经济的持续发展&#xff0c;信息时代日益更新&#xff0c;书吧租阅管理系统仍在蓬勃发展。同时&#xff0c;随着信息社会的快速发展&#xff0c;各种管理系统面临着越来越多的数据需…

leetcode刷题日志-15.三数之和

这道题还是有点难度&#xff0c;我能想到的就是三重循环&#xff0c;但是题目限制不能重复&#xff0c;所以这道题三重循环完还要去重&#xff0c;太过于麻烦。看了题解以后&#xff0c;大佬们还是厉害&#xff0c;大概思路是这样子的&#xff1a;先对数组进行排序&#xff0c;…

pandas根据列正逆序排序

题目&#xff1a;根据 buy_quantity 列进行排名&#xff0c;相同值分配相同的最低排名。 import pandas as pd# 创建一个示例 DataFrame data {item_id: [1, 2, 3, 4, 5, 6, 7], buy_quantity: [1, 2, 2, 3, 3, 4, 5]} df pd.DataFrame(data)# 使用 rank() 函数为 buy_quant…