Table of Contents
Introduction
In this series we are going to focus on using a modern frontend framework with component base library to solve our problems as a frontend developer.
Today Focus
Today we are going to install one of the modern frontend framework which is Vue.JS and Element Plus as component base library Element Plus. You can skip ahead to the section where I implement and import the library into Vue if that technology is already installed on your system Installation of element-plus.
Installation process
Installation of Nodejs
Before we go to install Vue.JS we need to install Node JS.
Node.js is a free, open-source server environment that may be used with Windows, Linux, Mac OS, and Unix.
I am going to leave few links for installation step for this different operating system.
Installation of Vue
After successfully install Nodejs you can move to installing Vuejs. By running those commend line.
npm init vue@latest For more explanation, please refer to these official publications Guide quick-start.
Here is my setup after running the commend line.
Installation of element-plus
Element Plus is a UI component base library for Vue 3. To follow the official documentation Element-Plus.
You are required to change directory to your project, and run this commend line. npm install element-plus --save.
After successfully install.
After install element-plus, you are required to import the installation to src/main.js. This step allow Vue and element-plus to recognize one another and enables us to use the component created by element-plus. Here is the code.
import { createApp } from 'vue';
import ElementPlus from 'element-plus';
import 'element-plus/dist/index.css';
import App from './App.vue';
createApp(App).use(ElementPlus).mount('#app');
Working on component (table)
To run vue locally you can using this commend line.
npm run dev.
What you can see after you visit your locally host. (Mine is http://127.0.0.1:5173/ as default.
Working with folder structure
By best practice we recommend to put component as in components folder that exist in the src directory. Therefore, I am going to create a component name Table, in components/TableComponent.vue.
I am going copy and paste the component code base from the official website Table basic to components/TableComponent.vue.
<template>
<el-table :data="tableData" style="width: 100%">
<el-table-column prop="date" label="Date" width="180" />
<el-table-column prop="name" label="Name" width="180" />
<el-table-column prop="address" label="Address" />
</el-table>
</template>
<script lang="ts" setup>
const tableData = [
{
date: '2016-05-03',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles',
},
{
date: '2016-05-02',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles',
},
{
date: '2016-05-04',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles',
},
{
date: '2016-05-01',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles',
},
]
</script>
Even though, you continue to wonder why the website remains unchanged.It is because you have not import the component into the main page. Now I am going to go to src/App.vue to delete all the lines of the code and replace with this instead.
<template>
<TableComponent />
</template>
<script lang="ts" setup>
import TableComponent from './components/TableComponent.vue';
</script>
Conclusion
This concludes today's article. In the following one, I'll give you more information about using the table component in element-plus because it can accept props and render with keys and values from the props. You can check out my github for complete code Finish project.
Top comments (0)