vue笔记(二)vue项目整合element-ui-全局

重生之我在学Vue--第8天 Vue 3 UI 框架(Element Plus) UI框架是提升开发效率和视觉统一性的利器,Element Plus作为Vue 3最流行的组件库之一,能让我们快速构建专业级界面。今日重点是在项目中集成Element Plus,并为任务管理系统注入现代化视觉体验。Element Plus 官方文档组件 | Element PlusVue3 官方文档传送点简介 | Vue.jsVue3 的中文官方文档学习笔记很全还有练习场,推荐去官网学习Vue 前端成仙之路_野生的程序媛的博客-优快云博客Go 后端成神之路_野生的程序媛的博客-优快云博客设计系统思维。 阅读详情

打开vue项目,推荐使用webstorm,在如图位置输入命令:

1. 安装 loader 模块:

npm install style-loader -D

npm install css-loader -D

npm install file-loader -D

2. 安装 Element-UI 模块:

npm install element-ui --save

3.修改 build/webpack.base.conf.js 的配置,添加下面两项:

      {
        test: /\\\\\\\\.css$/,
        loader: "style!css"
      },
      {
        test: /\\\\\\\\.(eot|woff|woff2|ttf)([\\\\\\\\?]?.*)$/,
        loader: "file"
      }

4. src/main.js内引入,如图:

import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI)

5.直接在vue文件内使用即可,如图:

 

注:顺道记下怎么下载router:

npm i vue-router -D

下载xvue:

npm install vuex -S

下载axios:

npm install axios -S

安装Echarts

 

npm install echarts -S

 

前端学习之vue+element-ui电商项目(二)用户界面 文章目录0. 准备工作1.页面布局1.1页面框架1.2 框架内容1.2 .1面包屑导航区1.2 .2卡片视图区2.搜索与添加2.1 界面样式2.2 数据添加2.3 方法实现3.用户列表区3.1 界面样式3.2 数据添加3.3 方法实现4.分页区4.1 界面样式4.2 数据添加4.3 方法实现5.添加用户对话框5.1 界面样式5.2 数据添加5.3 方法实现6.分配角色对话框6.1 界面样式6.2 数据添加6.3 方法实现7 .展示 0. 准备工作 component下新建文件Users.vue,并在路由中引 阅读详情

相关推荐

vue中添加element ui组件

上篇文章讲了vue和element ui的安装,接下来就说一说怎么在vue中引入element ui组件。具体element ui组件可以去官网去看然后复制代码~官网(复制粘贴太爽了!!!) 我们在官网找一个菜单的框架,在components文件夹下新建一个Menu.vue文件,把代码复制粘贴到该文件中。然后在APP.vue中局部引入(我这里引入了两个vue文件) <script> ...

weixin_43699616的博客 1098

vue-elementUI 之 全局配置

// 点击 遮罩层 是否关闭 Dialog ElementUI.Dialog.props.closeOnClickModal.default=false; // Dialog 是否在 body 里追加 ElementUI.Dialog.props.modalAppendToBody.default=false; // 分页默认 ElementUI.Pagination.props.layout.default="prev, pager, next, jumper"; ElementUI.Paginati.

freewlt 1574

深度学习笔记(3)——kernel(内核)与filter(滤波器)

本文仅仅简单介绍了kernel和filter的概念,介绍了确定filter和kernel个数的方法。

cs111211的博客 7137

element-plus 架构 - Config Provider 全局配置

在组件库的设计中,最常见的全局配置是z-index和sizez-index:统一管理弹出层(dialog, message, loading)等组件的层级。size:统一管理表单元素大小。这些都属于全局配置项,可以全局配置来实现。在中provide的依赖,在使用的地方inject即可。举例最终返回的context会作为组件的默认插槽的 props 使用。举例:

qq_40147756的博客 1万+

Buck的振铃实验与分析

上上期我们提到了buck电路的开关的振铃波形,本质原因是LC的阻尼振荡。文章偏理论,那BUCK到底是怎么产生尖峰振荡呢? 要想把这个问题搞清楚,也很是不容易,所以文章有点长,请直接点赞转发加收藏。 问题 本期主要分析以下这两个问题: 1、死区时间是什么?这里有个小台阶是什么情况? 2、上下尖峰振荡是如何产生的?跟哪些因素有关? 理想的BUCK的SW波形 我们由浅入深,一步一步来,先看理想的开关SW波形—没有尖峰电压的波形。 为了能更好的看buck电路各个点的电压电流情况.

weixin_42005993的博客 3万+

PnP 单目相机位姿估计(二):solvePnP利用二维码求解相机世界坐标

前言 原理简介 输入参数准备 1 objectPoints特征点世界坐标 2 imagePoints特征点在摄像头下的像素点坐标 3cameraMatrixdistCoeffs内参矩阵和畸变矩阵 相机世界坐标的求解 1求世界坐标中的点在相机坐标系下的坐标 2求相机在世界坐标中的坐标 3效果求解相机在世界坐标系下的坐标点 4求解代码1.前言  很多时候,当我们利用单目相机获取图像时,往往只能获取图像中

cocoaqin的博客 5万+

Element-ui 全局默认属性配置

文章目录前言一、npm引入二、CDN引入 前言 在使用Element-ui组件的时候,因为项目不同,总会有一些组件的默认属性值和项目是相反的,就导致每次在使用这个组件的时候需要更改这个属性的值。下面就最近针对Element-ui如何全局配置属性做下记录 提示:以下是本篇文章正文内容,下面案例可供参考 一、npm引入 npm引入直接修改main.js,主要是每种控件的默认项不一样,可以通过console.log(ElementUI.Dialog)查看组件默认配置在哪里,然后调整就好。 改了几种默认配置,暂

qq_26660583的博客 4071

Adobe Acrobat Pro(Adobe PDF) - 使用技巧

Adobe Acrobat Pro为Adobe出品的PDF查看和编辑软件,下文简称Adobe PDF,该软件功能强大,拥有查看PDF、编辑PDF、打印PDF、导出PDF、合并文件、组织页面、文本标注、注释、动作向导、等功能。本文介绍Adobe PDF的一些使用技巧,最后介绍软件设置。

NSJim的博客 4万+

前端学习之:Vue 中使用 element UI 和 echarts 创建组件的步骤(echarts 的全局使用和组件内使用);官网 elementUI 按需引入错误的相关修正

【代码】前端学习之:Vue 中使用 element UI 和 echarts 创建组件的步骤。

qq_42902997的博客 1882

labview的TDMS文件读写

本文先介绍TDMS概念和文件结构,然后介绍VI如何使用,最后分析一个labview的自带范例

观则明的博客 1万+

Python控制程控电源(USB)

随着智能电动汽车行业的持续发展,汽车电子或嵌入式设备在软硬件的测试中,都会使用程控电源供电,特别是自动化测试、压力测试场景必定使用到程控电源控制,控制电源上下电,监听电源电流、电压等,以下就以常见的艾德克斯程控电源为例,分享如何通过USB连接方式Python语言来控制程控电源。

测试领域技术分享 2865

从0-1创建Vue项目,整合ElementUI

从0-1创建Vue2.0项目

m0_55627541的博客 4490

【C语言】一文搞懂C语言文件操作

读写文件、文件相关库函数详解、文件缓冲区介绍

StackFrame 5659

html整合vue elementui,vue笔记(二)vue项目整合element-ui-全局

打开vue项目,推荐使用webstorm,在如图位置输入命令:1. 安装 loader 模块:npm install style-loader -Dnpm install css-loader -Dnpm install file-loader -D2. 安装 Element-UI 模块:npm install element-ui --save3.修改build/webpack.base.con...

weixin_33321992的博客 303

27、目标识别的最新进展

本文综述了目标识别(OID)领域的最新进展,重点介绍了质量评估、预处理和搜索空间缩减等关键技术。文章分析了多种质量指标,如缩减率、对完整性、召回率和精确率等,并探讨了它们的适用场景。同时,详细介绍了预处理中自动学习转换规则的方法,以及传统阻塞、排序邻域索引等搜索空间缩减技术。此外,文章还讨论了动态选择缩减技术的方法,并展望了未来研究方向,如更智能的预处理、自适应的缩减技术和与人工智能的结合。希望这些技术和方法能够为目标识别领域的研究和实践提供参考和帮助。

q5r6s7的博客 92

深度学习工具包 DeepLearningToolbox

深度学习工具包Deprecation notice.-----This toolbox is outdated and no longer maintained.There are much better tools available for deep learning than this toolbox, e.g. [Theano](http://deeplearning.net/software/theano/), [torch](http://torch.ch/) or [tensorflow](http://www.tensorflow.org/)I would suggest you use one of the tools mentioned above rather than use this toolbox.Best, Rasmus.DeepLearnToolbox================A Matlab toolbox for Deep Learning.Deep Learning is a new subfield of machine learning that focuses on learning deep hierarchical models of data.It is inspired by the human brain's apparent deep (layered, hierarchical) architecture.A good overview of the theory of Deep Learning theory is[Learning Deep Architectures for AI](http://www.iro.umontreal.ca/~bengioy/papers/ftml_book.pdf)For a more informal introduction, see the following videos by Geoffrey Hinton and Andrew Ng.* [The Next Generation of Neural Networks](http://www.youtube.com/watch?v=AyzOUbkUf3M) (Hinton, 2007)* [Recent Developments in Deep Learning](http://www.youtube.com/watch?v=VdIURAu1-aU) (Hinton, 2010)* [Unsupervised Feature Learning and Deep Learning](http://www.youtube.com/watch?v=ZmNOAtZIgIk) (Ng, 2011)If you use this toolbox in your research please cite [Prediction as a candidate for learning deep hierarchical models of data](http://www2.imm.dtu.dk/pubdb/views/publication_details.php?id=6284)```@MASTERSTHESIS\{IMM2012-06284, author = "R. B. Palm", title = "Prediction as a candidate for learning deep hierarchical models of data", year = "2012",}```Contact: rasmusbergpalm at gmail dot comDirectories included in the toolbox-----------------------------------`NN/` - A library for Feedforward Backpropagation Neural Networks`CNN/` - A library for Convolutional Neural Networks`DBN/` - A library for Deep Belief Networks`SAE/` - A library for Stacked Auto-Encoders`CAE/` - A library for Convolutional Auto-Encoders`util/` - Utility functions used by the libraries`data/` - Data used by the examples`tests/` - unit tests to verify toolbox is workingFor references on each library check REFS.mdSetup-----1. Download.2. addpath(genpath('DeepLearnToolbox'));Example: Deep Belief Network---------------------```matlabfunction test_example_DBNload mnist_uint8;train_x = double(train_x) / 255;test_x = double(test_x) / 255;train_y = double(train_y);test_y = double(test_y);%% ex1 train a 100 hidden unit RBM and visualize its weightsrand('state',0)dbn.sizes = [100];opts.numepochs = 1;opts.batchsize = 100;opts.momentum = 0;opts.alpha = 1;dbn = dbnsetup(dbn, train_x, opts);dbn = dbntrain(dbn, train_x, opts);figure; visualize(dbn.rbm{1}.W'); % Visualize the RBM weights%% ex2 train a 100-100 hidden unit DBN and use its weights to initialize a NNrand('state',0)%train dbndbn.sizes = [100 100];opts.numepochs = 1;opts.batchsize = 100;opts.momentum = 0;opts.alpha = 1;dbn = dbnsetup(dbn, train_x, opts);dbn = dbntrain(dbn, train_x, opts);%unfold dbn to nnnn = dbnunfoldtonn(dbn, 10);nn.activation_function = 'sigm';%train nnopts.numepochs = 1;opts.batchsize = 100;nn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.10, 'Too big error');```Example: Stacked Auto-Encoders---------------------```matlabfunction test_example_SAEload mnist_uint8;train_x = double(train_x)/255;test_x = double(test_x)/255;train_y = double(train_y);test_y = double(test_y);%% ex1 train a 100 hidden unit SDAE and use it to initialize a FFNN% Setup and train a stacked denoising autoencoder (SDAE)rand('state',0)sae = saesetup([784 100]);sae.ae{1}.activation_function = 'sigm';sae.ae{1}.learningRate = 1;sae.ae{1}.inputZeroMaskedFraction = 0.5;opts.numepochs = 1;opts.batchsize = 100;sae = saetrain(sae, train_x, opts);visualize(sae.ae{1}.W{1}(:,2:end)')% Use the SDAE to initialize a FFNNnn = nnsetup([784 100 10]);nn.activation_function = 'sigm';nn.learningRate = 1;nn.W{1} = sae.ae{1}.W{1};% Train the FFNNopts.numepochs = 1;opts.batchsize = 100;nn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.16, 'Too big error');```Example: Convolutional Neural Nets---------------------```matlabfunction test_example_CNNload mnist_uint8;train_x = double(reshape(train_x',28,28,60000))/255;test_x = double(reshape(test_x',28,28,10000))/255;train_y = double(train_y');test_y = double(test_y');%% ex1 Train a 6c-2s-12c-2s Convolutional neural network %will run 1 epoch in about 200 second and get around 11% error. %With 100 epochs you'll get around 1.2% errorrand('state',0)cnn.layers = { struct('type', 'i') %input layer struct('type', 'c', 'outputmaps', 6, 'kernelsize', 5) %convolution layer struct('type', 's', 'scale', 2) %sub sampling layer struct('type', 'c', 'outputmaps', 12, 'kernelsize', 5) %convolution layer struct('type', 's', 'scale', 2) %subsampling layer};cnn = cnnsetup(cnn, train_x, train_y);opts.alpha = 1;opts.batchsize = 50;opts.numepochs = 1;cnn = cnntrain(cnn, train_x, train_y, opts);[er, bad] = cnntest(cnn, test_x, test_y);%plot mean squared errorfigure; plot(cnn.rL);assert(er<0.12, 'Too big error');```Example: Neural Networks---------------------```matlabfunction test_example_NNload mnist_uint8;train_x = double(train_x) / 255;test_x = double(test_x) / 255;train_y = double(train_y);test_y = double(test_y);% normalize[train_x, mu, sigma] = zscore(train_x);test_x = normalize(test_x, mu, sigma);%% ex1 vanilla neural netrand('state',0)nn = nnsetup([784 100 10]);opts.numepochs = 1; % Number of full sweeps through dataopts.batchsize = 100; % Take a mean gradient step over this many samples[nn, L] = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.08, 'Too big error');%% ex2 neural net with L2 weight decayrand('state',0)nn = nnsetup([784 100 10]);nn.weightPenaltyL2 = 1e-4; % L2 weight decayopts.numepochs = 1; % Number of full sweeps through dataopts.batchsize = 100; % Take a mean gradient step over this many samplesnn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.1, 'Too big error');%% ex3 neural net with dropoutrand('state',0)nn = nnsetup([784 100 10]);nn.dropoutFraction = 0.5; % Dropout fraction opts.numepochs = 1; % Number of full sweeps through dataopts.batchsize = 100; % Take a mean gradient step over this many samplesnn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.1, 'Too big error');%% ex4 neural net with sigmoid activation functionrand('state',0)nn = nnsetup([784 100 10]);nn.activation_function = 'sigm'; % Sigmoid activation functionnn.learningRate = 1; % Sigm require a lower learning rateopts.numepochs = 1; % Number of full sweeps through dataopts.batchsize = 100; % Take a mean gradient step over this many samplesnn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.1, 'Too big error');%% ex5 plotting functionalityrand('state',0)nn = nnsetup([784 20 10]);opts.numepochs = 5; % Number of full sweeps through datann.output = 'softmax'; % use softmax outputopts.batchsize = 1000; % Take a mean gradient step over this many samplesopts.plot = 1; % enable plottingnn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.1, 'Too big error');%% ex6 neural net with sigmoid activation and plotting of validation and training error% split training data into training and validation datavx = train_x(1:10000,:);tx = train_x(10001:end,:);vy = train_y(1:10000,:);ty = train_y(10001:end,:);rand('state',0)nn = nnsetup([784 20 10]); nn.output = 'softmax'; % use softmax outputopts.numepochs = 5; % Number of full sweeps through dataopts.batchsize = 1000; % Take a mean gradient step over this many samplesopts.plot = 1; % enable plottingnn = nntrain(nn, tx, ty, opts, vx, vy); % nntrain takes validation set as last two arguments (optionally)[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.1, 'Too big error');```[![Bitdeli Badge](https://d2weczhvl823v0.cloudfront.net/rasmusbergpalm/deeplearntoolbox/trend.png)](https://bitdeli.com/free "Bitdeli Badge")

Element-UI - Vue项目整合Element-UI & Icon图标 & 自定义Icon图标

Element-UI - Vue项目整合Element-UI & Icon图标 & 自定义Icon图标 博主很久之前就想使用Element-UI,总是因为学习后端的技术鸽了很久(博主目前是偏后端),这里博主通过Vue来整合Element-UI(不是Vue项目整合Element-UI,Vue项目整合Element-UI不久就会有的,因为最近博主有一个项目需要)。 引入Element-UI npm安装 Vue项目整合Element-UI会用到,这里博主就介绍一下。 npm i element-u

kaven 1万+

efm32 入门.pdf

本PDF共计22页,介绍的是操作驱动API,下载与否自己斟酌。

【vue】vue3使用element ui

element-ui支持vue2版本,当用vue3安装element-ui的时候会报错,这就需要安装element-plus版本来用到vue3项目中。

努力变好 3万+

老版QQ原生表情gif动态

这是老版的QQ表情,不过全是动态的的,Windows照片查看器是不会动的,可以右击用浏览器打开查看,再说一遍是老版的,只是分享给宁愿用老版也要动态的人。

怀旧版电脑GBC模拟器

再现原版GBC掌机的界面,电脑运行连游戏界面都一样大小,很怀旧,很真实,(英文版)强烈推荐,很小的文件,很难才找到的。

Vue开发实例(06)之Vue3注册Element-ui报错解决

Uncaught TypeError: Cannot read properties of undefined (reading 'prototype') at eval (webpack-internal:///./node_modules/element-ui/lib/utils/types.js:39) at Object../node_modules/element-ui/lib/utils/types.js (chunk-vendors.js:2923) at __webp

编程界明世隐的博客 1万+

vue引入Element-ui

vue引入Element-ui之全局引入

m0_51459514的博客 1万+

Vue项目7:Vue项目整合Element UI

本博文主要介绍如何在VueCli项目中使用ElementUI,主要包括两大步骤:一、创建Vue项目;二、使用ElementUI 一、创建Vue项目 1.创建Vue项目 打开cmd命令窗口,进入工作目录,例如:F:\Study\elmentUI\demo 输入如下命令创建项目,项目名称为:vueaddelement vue init webpack vueaddelemen...

大头皮鞋的博客 970

vue中如何使用Element-UI

element-ui组件库官网:[http://element-cn.eleme.io/#/zh-CN](http://element-cn.eleme.io/#/zh-CN) 官网中有各种组件的使用教程,demo代码,方法,函数等。 下面介绍vue-cli项目中如何使用element-ui 1 .第一步是下载:npm i element-ui –S 2 .引入 Element 完整引入 在...

田兴的博客 6584

Vue2通用后台管理项目笔记-axios,ajax,element-ui,vuex,vue-router

vue2前端通用后台管理项目笔记,这个做完准备去一边看js高级,一边看coderwhy的算法,保证这个学期找到实习

Kiwi23333的博客 2408

Element-ui 的全局引入和按需引入

在项目中我们通常需要使用到 Element- UI 这个组件库,想要随时在任意页面使用我们需要在全局引入,而且其中的组件并不全是都能被使用到,于是根据需要可以仅引入部分组件 以 Vue项目 为例 全局引入 在入口文件 main.js 中写,引入全部组件 // main.js import Vue from 'vue'; import ElementUI from 'element-ui'; import 'element-ui/lib/theme-chalk/index.css'; impor.

芝芝为荔枝 7403

【Vue】Vue集成Element-UI框架

点击进入Element-UI 是一套基于 Vue 2.0 的桌面端组件库,由饿了么前端团队推出并进行开源。它提供了丰富的 PC 端组件,简化了常用组件的封装,大大降低了开发难度,使开发人员能够轻松构建功能强大、风格统一的页面。Element-UI 与 Vue.js 集成非常紧密,开发者可以轻松地将 Element-UI 的组件嵌入到他们的 Vue.js 应用程序中。今日之学习篇章已然落笔,愿诸君有所收获。🤩倘若您对此深感兴趣,不妨关注此专栏,新知将持续涌现,与您共舞思维的华章。😎。

颜颜yan_的博客 2956

vue 项目全局修改element-ui的样式

引入了element-ui,但是和我们自己的样式颜色有很大的不同, 官网自定义主题 →点击查看 修改例子: 在src文件下创建 element-var.scss,代码如下 $--color-primary: yellow; /*修改按钮primary的颜色*/ /* 改变 icon 字体路径变量,必需 */ $--font-path: '../node_modules/element-ui/lib/theme-chalk/fonts'; @import "../node_modules/ele...

IT-精英联盟 6340

vue+element-ui入门(手把手教你怎么用element)

vue+element入门,手把手教你怎么用element1.vue安装使用查看版本升级或安装 cnpm最新稳定版全局安装 vue-cli创建一个基于 webpack 模板的新项目这里需要进行一些配置,默认回车即可2.安装element-uinpm 安装3.使用项目目录:引入 Element使用elment-ui运行访问网页: 1.vue安装使用 参考:https://www.runoob.com...

Handsome2013的博客 1万+
上一篇: 谷歌浏览器调试 · 杂
下一篇: vue笔记(三)vue路由
gcc_front
博客等级 码龄9年 16粉丝 98原创
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付:10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值