Article directory
The focus of this series of notes will be on how to use Vue3 to set up the project and interact with the back-end API. It will not introduce the basic features of Vue. For the basic features of Vue, you can refer to this video for four hours to quickly get you started with Vue . I just read this entry, and I think it's not bad.
Code address: https://github.com/yexia553/vue_study/tree/%E9%85%8D%E7%BD%AEvue-router/vue3-notes
Published simultaneously on personal site: http://www.panzhixiang.cn/article/2022/10/22/57.html
Page layout description and effect display
A website always has its own layout. The so-called layout is what information is displayed in what area. The picture below is the layout effect of our design, which is divided into three parts.
The left side of the page is a whole, which is used to display the menu bar, that is, which modules of the website are displayed; the right side is divided into upper and lower parts, and the upper part is used to display the user's avatar. Click the avatar to log out and other operations; The lower part of the side is the main area of the website, showing the information we want to convey to users.
Since the menu bar on the left and the upper part on the right are needed regardless of the page, we can make these two parts a common component. We can name the menu bar on the left as CommonAside, and the upper part on the right The part is called CommonHeader.
Introduction to Element Plus
People who know Vue basically know Element UI (used with Vue2) or Element Plus. Their role is to encapsulate a lot of UI libraries for us to use directly. For example, if we want to implement a table, we can use the el-table tag to help us accomplish.
implement the layout
Install
To use Element Plus, you must first install it. Execute the following command in the root directory of the project.
npm install element-plus --save
Since we will use the icon in Element Plus later, we will also install it here
npm install @element-plus/icons-vue
introduce
After installation, you need to introduce Element Plus in Vue3 before it can be used in Vue3. We use the global import method, but there are actually several import methods. You can click here to view the specific import methods.
The import method is to configure in main.js. After the configuration, main.js is as follows. I have noted in the code which codes are required for import.
import {
createApp } from 'vue'
import App from './App.vue'
import ElementPlus from 'element-plus' // 引入Element Plus 所需
import 'element-plus/dist/index.css' // 引入Element Plus 所需
import router from './router/index.js'
import * as ElementPlusIconsVue from '@element-plus/icons-vue' // 引入Element Plus icon 所需
import './assets/main.css'
const app = createApp(App)
// 引入Element Plus icon 所需
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
app.component(key, component)
}
app.use(router)
app.use(ElementPlus) // 引入Element Plus 所需
app.mount('#app')
Modify the initial style of Vue3
Vue3 has some styles by default when creating a project, that is, css. Under the project root directory /src/assets/ path, there are two style files, base.css and main.css. We can modify main.css up.
It is mainly to modify the two #app parts in main.css , which are modified as follows:
#app {
/* max-width: 1280px; */
margin: 0;
padding: 0;
font-weight: normal;
height: 100vh;
width: 100%;
}
#app {
/* display: grid; */
/* grid-template-columns: 1fr 1fr; */
padding: 0;
}
The css part is not explained in detail. The main purpose is to enable vue to display our pages normally in the browser. If you don’t understand it, you need to simply learn the css part.
implement the layout
When the last note talked about routing, we wrote in Main.vue
<template>
Home
</template>
We will now replace the contents inside with the following part
<template>
<div class="common-layout">
<el-container>
<el-aside width="180px">
Aside
</el-aside>
<el-container>
<el-header>Header</el-header>
<el-main>Main</el-main>
</el-container>
</el-container>
</div>
</template>
After the replacement, npm run devrun should see the following page
It can be seen that although it is very simple, the overall framework of the page has come out.
CommonAsideComponents
As mentioned above, we can extract the left menu bar into a component called CommonAside. Let's implement it now.
Create the CommonAside.vue file
First delete the content that src/components automatically creates when the project is initialized.
Create the CommonAside.vue file under the src/components path, the file content is as follows,
<template>
<el-menu class="el-menu-vertical-demo" background-color="#545c64" text-color="#fff" :collapse-transition="false"
active-text-color="#ffd04b">
<h3>后台管理</h3>
<el-menu-item :index="item.path+''" v-for="item in list" :key="item.label">
<component class="icons" :is="item.icon"></component>
<span>{
{item.label}}</span>
</el-menu-item>
</el-menu>
</template>
<script>
export default {
setup() {
const list = [
{
path: '/user',
name: 'user',
label: '用户管理',
icon: 'user',
url: '/user'
},
{
label: '其它',
name: 'other',
icon: 'location',
path: '/other',
url: 'other'
},
];
return {
list,
}
}
}
</script>
<style lang="less" scoped>
.icons {
width: 18px;
height: 18px;
margin-right: 4px;
}
.el-menu-vertical-demo {
width: 100%;
border-right: none;
h3 {
color: #fff;
text-align: center;
margin-top: 10px;
}
}
</style>
The code is divided into three parts: template, script and style. Let's explain them separately.
template
The el-menu tag is referenced in the template to achieve the style we need. In fact, we only use a very simple department here, and there are many methods and attributes that we have not used. You can take a look at the official website of element plus.
script
Inside the script is js code. Vue3 supports optional API and combined API. I use combined API. For the difference between the two and how to choose, you can see here
I actually defined and returned a list containing the contents of the left menu in the script.
style
The style contains the style, that is, css, but I use less. You can read the part about less here . In fact, it doesn’t matter if you don’t know less. Take a look at the above code and just follow the imitation. Actually, I don’t know less either. It's just imitation.
Use the CommonAside.vue component
As analyzed before, the CommonAside component will appear in all pages, so we can introduce this component in Main.vue. After the introduction, the content of Main.vue is as follows,
<template>
<div class="common-layout">
<el-container>
<el-aside width="180px">
<!-- 要注意这里引用CommonAside组件的方法，拆分了两个字符，用中短线连接的-->
<common-aside></common-aside>
</el-aside>
<el-container>
<el-header>Header</el-header>
<el-main>Main</el-main>
</el-container>
</el-container>
</div>
</template>
<script>
import CommonAside from "../components/CommonAside.vue";
export default {
components: {
CommonAside,
}
}
</script>
<style lang="less" scoped>
.common-layout {
height: 100%;
&>.el-container {
height: 100%;
&>.el-aside {
height: 100%;
background: #545c64;
}
&>.el-container {
&>.el-header {
padding: 0%;
}
}
}
}
</style>
The content of the code is very simple, just explain a small knowledge point in the style.
.common-layout means that the style of the curly braces that follow it will act within the scope of class="common-layout",
we will see that there will be &>.el-container under .common-layout, which will be associated with The el-container in common-layout will not work if there is an el-container outside of .common-layout.
The CommonAside component is also completed here. After starting the project, the page should look like this,
