As a student majoring in computer science, I was very sad about the construction of the front-end page when doing practical training projects. At this time, the benefits of components were highlighted;
This article is to show you the use of ElementUi components! ! !
The content is divided into vue3 and previous versions, choose by yourself! ! !
All roads lead to Rome, come on! ! !
Table of contents
1. Prerequisites for using ElementUi components
1. Prerequisites for using ElementUi components
1. First of all, you need to install compilation software such as idea or vs. Here, idea is introduced.
Download and install idea Refer to my previous blog about idea download and installation
IDEA download and installation tutorial_Sangzhi Yuanfang~'s blog-CSDN blog 
https://blog.csdn.net/weixin_59367964/article/details/127900057?spm=1001.2014.3001.5502 2. Secondly, you need to install vue.js
Download and install vue.js Refer to my previous blog about vue.js download and installation
Nanny-level teaching in the early stage of using vue.js in idea We can start our content today
2. Use ElementUi in idea
1. Build a vue.js project
Open idea, (I use the latest version of idea, the old version of static web—>vue.js ) create a new vue.js project, in Vue Cli, you must select the marked with ~ logo
This is the scaffolding of vue.js, which can quickly build vue.js projects. If not, you have not systematically installed vue.js
Refer to the link given above for preliminary work preparation
Brothers, the project name must not be capitalized, it will make mistakes! ! ! The following has been changed
2. Item layout style
Quietly wait for the vuecli scaffolding to build the project, this process will be very fast, this is what it looks like to build successfully
3. Introduce elementui
Open the Terminal workbench input under the idea interface
npm i element-ui -S // corresponding to the version before vue3
npm install element-plus --save //corresponding to vue3 version
Look at the vue version you installed and choose the corresponding installation
The error in the screenshot below is that I forgot to install vue3, which caused an error.
Element-ui or element-plus appears in packpage.json->dependencies in the project, which means the introduction is successful
4. Use ElementUi
After that, you can use the components on ElementUi
First of all, I would like to mention that this article only introduces how to install and use Element U i components , and does not use :
Routing router function,
Network request axios function
The complete project will definitely use the above two functions, and I should introduce how to use these two functions in the follow-up
If you need it, you can pay attention to the blogger! ! ! ;
(1) First import the element module we installed in main.js
1. The vue3 version is installed with Element-plus, so main.js needs to be imported
import ElementPlus from 'element-plus';
import 'element-plus/dist/index.css';
Then use it ( .use must be in front )
createApp(App).use(ElementPlus)The overall main.js is what it looks like in the screenshot
2. Use the following before vue3
import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import App from './App.vue';
Vue.use(ElementUI);
new Vue({
el: '#app',
render: h => h(App)
});(2) Open the official website of Element U i, find something to copy the code
(3) Put it in the <template> of APP.vue and delete the others
The one selected in the screenshot is the place where the copied code is placed
The red mark is the component, which will definitely be used in the complete project. It is not displayed now , and the HelloWord inside needs to be deleted.
The arrow corresponds to the position where the component is placed, just to introduce it, don’t worry about it, don’t use it now
(4). Display effect
This is the component effect
Summarize
The early operation of this component may be a bit cumbersome. After finishing all of it, you will find that it is particularly easy to use.
After finishing it, using other people's code will always be faster and more comfortable than writing it yourself.
Add other components and you can build a static page
Like, follow, don't get confused, and make progress together! ! !
Like, follow, don't get confused, and make progress together! ! !
Like, follow, don't get confused, and make progress together! ! !