Vue使用element-ui

  1. main.js配置
//引入Vue
import Vue from 'vue'
//引入App
import App from './App.vue'//完整引入
//引入ElementUI組件庫
// import ElementUI from 'element-ui';
//引入ElementUI全部樣式
// import 'element-ui/lib/theme-chalk/index.css';//按需引入
import { Button,Row,DatePicker } from 'element-ui';//關閉Vue的生產提示
Vue.config.productionTip = false//應用ElementUI
// Vue.use(ElementUI);
Vue.component('atguigu-button', Button);
Vue.component('atguigu-row', Row);
Vue.component('atguigu-date-picker', DatePicker);//創建vm
new Vue({el:'#app',render: h => h(App),
})
  1. 使用
<template><div><button>原生的按鈕</button><input type="text"><atguigu-row><el-button>默認按鈕</el-button><el-button type="primary">主要按鈕</el-button><el-button type="success">成功按鈕</el-button><el-button type="info">信息按鈕</el-button><el-button type="warning">警告按鈕</el-button><el-button type="danger">危險按鈕</el-button></atguigu-row><atguigu-date-pickertype="date"placeholder="選擇日期"></atguigu-date-picker><atguigu-row><el-button icon="el-icon-search" circle></el-button><el-button type="primary" icon="el-icon-s-check" circle></el-button><el-button type="success" icon="el-icon-check" circle></el-button><el-button type="info" icon="el-icon-message" circle></el-button><el-button type="warning" icon="el-icon-star-off" circle></el-button><el-button type="danger" icon="el-icon-delete" circle></el-button></atguigu-row></div>
</template><script>export default {name:'App',}
</script>

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/news/40261.shtml
繁體地址,請注明出處:http://hk.pswp.cn/news/40261.shtml
英文地址,請注明出處:http://en.pswp.cn/news/40261.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

記一次前端直接上傳圖片到oss報錯

前端直接上傳圖片到阿里云oss,相關過程官網和網上資料已經很詳細&#xff0c;不做贅述。 但這個過程比較復雜&#xff0c;前后端對接過程中很容易出現報錯&#xff0c;這里遇到了以下報錯&#xff0c;不容易排查。 請求顯示net::ERR_NAME_NOT_RESOLVED錯誤&#xff0c;catch輸…

如何在windows電腦安裝多個tomcat服務器和亂碼問題

前提條件安裝jdk 以17版本為例&#xff0c;將jdk8卸載干凈 1.首先進入tomcat官網下載 tomcat網址 這里下載tomcat10為例子 1.1 這里選擇方式一 下載解壓版 2.解壓后拷貝三份 分別命名為 8081、 8082、 8083 3.分別對每個tomcat執行以下操作 3.1 找到tomcat所在webapps文…

Flask框架-配置日志(1):flask使用日志

一、項目結構 study_flask --| apps/ --| __init__.py --| base/ --| logger.py --| __init__.py --| app.py 二、配置日志功能 1、base/logger.py import os import logging from datetime import datetime,date,timedelta from logging.handlers import RotatingFileHandl…

python 開啟5個進程處理list數據

要在 Python 中開啟多個進程來處理列表數據&#xff0c;你可以使用 multiprocessing 模塊。下面是一個開啟5個進程處理列表數據的示例代碼&#xff1a; python import multiprocessingdef process_item(item):# 在這里處理每個列表項的邏輯print(f"Processing item: {ite…

LeetCode[56]合并區間

難度&#xff1a;Medium 題目&#xff1a; 以數組 intervals 表示若干個區間的集合&#xff0c;其中單個區間為 intervals[i] [starti, endi] 。請你合并所有重疊的區間&#xff0c;并返回 一個不重疊的區間數組&#xff0c;該數組需恰好覆蓋輸入中的所有區間 。 示例 1&…

Android Studio Giraffe控制臺亂碼

這幾天在使用Android Studio Giraffe進行一個App的開發&#xff0c;在項目構建的時候&#xff0c;控制臺輸出中文都是亂碼&#xff0c;看著很不爽&#xff0c;進行了兩項配置&#xff0c;中文就可以正常輸出了&#xff0c;看起來就爽多了。 第一個配置&#xff1a;點擊Help菜單…

Redis對象和五種常用數據類型

Redisobject 對象 對象分為鍵對象和值對象 鍵對象一般是string類型 值對象可以是string&#xff0c;list&#xff0c;set,zset,hash q&#xff1a;redisobj的結構 typedef struct redisObject { //類型 unsigned type:4; //編碼 unsigned encoding:4; //指向底層實現…

webrtc Thread 和 TaskQueue 的 應用和思考

webrtc Thread 和 TaskQueue 的 應用和思考 Thread #include "rtc_base/thread.h"void FunctionToRunOnThread() {// Your threaded logic here.printf("Function running on the thread!\n"); }int main() {rtc::Thread* thread rtc::Thread::Create()…

WebService—XFire配置筆記

在學習之前,一直以為WebService就是一個工具,在兩個服務器之間建立一個通信,幫我們把需要傳輸的數據組織成規范的XML數據并發送到目的地,實際情況也確實是這樣的,不過更高級一點的是,XFire不但可以幫我們生成XML發送,而且可以在接收了xml之后還可以直接返回對象給我們用…

iptabels路由轉發

要配置iptables進行路由轉發&#xff0c;需要執行以下步驟&#xff1a; 確保系統已經開啟了IP轉發功能。可以通過執行以下命令來檢查&#xff1a; sysctl net.ipv4.ip_forward如果返回的值為1&#xff0c;表示已經開啟了IP轉發功能。如果返回的值為0&#xff0c;可以通過執行…

神經網絡基礎-神經網絡補充概念-29-為什么使用深層表示

概念 深層表示&#xff08;Deep Representation&#xff09;是指在深度神經網絡的多個隱藏層中逐層提取和學習數據的特征表示。 使用深層表示的原因 高維特征提取&#xff1a;深層神經網絡可以從原始數據中自動學習高維抽象特征。每個隱藏層都對數據進行一些變換&#xff0c…

“深入探索JVM內部機制:解密Java虛擬機的奧秘“

標題&#xff1a;深入探索JVM內部機制&#xff1a;解密Java虛擬機的奧秘 摘要&#xff1a;本文將深入探索Java虛擬機&#xff08;JVM&#xff09;的內部機制&#xff0c;介紹JVM的基本原理、運行時數據區域以及垃圾回收機制&#xff0c;并通過示例代碼解釋這些概念。 正文&am…

PG-DBA培訓14:PostgreSQL數據庫升級與遷移

一、風哥PG-DBA培訓14&#xff1a;PostgreSQL數據庫升級與遷移 課程目標&#xff1a; 本課程由風哥發布的基于PostgreSQL數據庫的系列課程&#xff0c;本課程屬于PostgreSQL備份恢復與遷移升級階段之PostgreSQL數據庫升級與遷移&#xff0c;學完本課程可以PostgreSQL數據庫升…

炒股票怎么加杠桿_融資融券賬戶怎么開通

炒股票作為一種投資方式&#xff0c;可以帶來不錯的回報。然而&#xff0c;對于那些希望以較小的資金獲得更高收益的投資者來說&#xff0c;加杠桿炒股票是一個值得考慮的選擇。本文將為您介紹加杠桿炒股票的意義&#xff0c;以及如何開通融資融券賬戶。 加杠桿炒股票的意義&a…

Centos8安裝docker并配置Kali Linux圖形化界面

鑒于目前網上沒有完整的好用的docker安裝kali桌面連接的教程&#xff0c;所以我想做一個。 準備工作 麻了&#xff0c;這服務器供應商提供的鏡像是真的純凈&#xff0c;純凈到啥都沒有。 問題一&#xff1a;Centos8源有問題 Error: Failed to download metadata for repo ap…

vue入門(增查改!)

<template><div><!-- 搜索欄 --><el-card id"search"><el-row><el-col :span"20"><el-input v-model"searchModel.name" placeholder"根據名字查詢"></el-input><el-input v-mode…

STM32 FLASH 讀寫數據

1. 《STM32 中文參考手冊》&#xff0c;需要查看芯片數據手冊&#xff0c;代碼起始地址一般都是0x8000 0000&#xff0c;這是存放整個項目代碼的起始地址 2. 編譯信息查看代碼大小&#xff0c;修改代碼后第一次編譯后會有這個提示信息 2.1 修改代碼后編譯&#xff0c;會有提示…

python3.73安裝教程,python3.10安裝教程

大家好&#xff0c;小編來為大家解答以下問題&#xff0c;python3.73安裝教程&#xff0c;python3.10安裝教程&#xff0c;現在讓我們一起來看看吧&#xff01; Python目前已支持所有主流操作系統&#xff0c;在Linux,Unix,Mac系統上自帶Python環境&#xff0c;一般默認裝的是P…

你敢信?代碼小白30min就能搭建一套酷炫級的駕駛艙!

大量研究結果表明&#xff0c;人類通過圖像獲取信息的速度比通過閱讀文字獲取信息的速度要快很多。 近幾年&#xff0c;數據可視化在企業中越發“流行”&#xff0c;將數字以可視化的形式展示&#xff0c;不僅清晰明了地展現企業真正的實力&#xff0c;也能讓管理者快速了解細節…

PG-DBA培訓12:PostgreSQL物理備份與恢復實戰

一、風哥PG-DBA培訓12&#xff1a;PostgreSQL物理備份與恢復實戰 課程目標&#xff1a; 本課程由風哥發布的基于PostgreSQL數據庫的系列課程&#xff0c;本課程屬于PostgreSQL備份恢復與遷移升級階段之PostgreSQL物理備份與恢復實戰&#xff0c;學完本課程可以掌握&#xff1…