Series Article Directory
The first chapter customizes the top, middle and bottom (top menu, bottom area, middle main area display) three-tier structure home page Chapter
two uses Vue3, Element-plus menu components to build menus
[Chapter 3 uses Vue3, Element-plus menu components to build wheels Broadcast map]
[Chapter 4 Use Vue3, Element-plus menu components to build a group map article]
Article directory
- Series Article Directory
-
- 1. System design
-
- 2. Renderings of this chapter
-
- 3. Start to dry
-
- 3.1, Vue3 project creation
-
- 3.1.1. Create a museum blank directory
- 3.1.2, use idea to open
- 3.1.3. Create a Vue3 project
-
- 3.1.3.1. Open the cmd command and enter the directory created in the previous step;
- 3.1.3.2. Run the command: vue create front
- 3.1.3.3. Select Vue3 project
- 3.1.3.4, project construction
- 3.1.3.5, build successfully
- 3.1.3.6. Follow the prompts to start the project
- 3.1.3.7, access the project in the browser
- 3.2, Vue3 routing application
-
- 3.3. Element-plus application
-
- 3.4. The layout of Element-plus, the placement of menus in the top bar area, and the placement of site navigation \ copyright and other information in the bottom bar container
- 3.5. Execute npm run serve to start the project, and you can see the rendering of the first part
- Summarize
Article directory
- Series Article Directory
- 1. System design
- 2. Renderings of this chapter
- 3. Start to dry
-
- 3.1, Vue3 project creation
-
- 3.1.1. Create a museum blank directory
- 3.1.2, use idea to open
- 3.1.3. Create a Vue3 project
-
- 3.1.3.1. Open the cmd command and enter the directory created in the previous step;
- 3.1.3.2. Run the command: vue create front
- 3.1.3.3. Select Vue3 project
- 3.1.3.4, project construction
- 3.1.3.5, build successfully
- 3.1.3.6. Follow the prompts to start the project
- 3.1.3.7, access the project in the browser
- 3.2, Vue3 routing application
- 3.3. Element-plus application
- 3.4. The layout of Element-plus, the placement of menus in the top bar area, and the placement of site navigation \ copyright and other information in the bottom bar container
- 3.5. Execute npm run serve to start the project, and you can see the rendering of the first part
- Summarize
1. System design
Vue3 museum management system, starting from building a Vue3 project to create a museum system.
Divided into 2 systems: front-end user, background management
1.1. Foreground users
Contains modules: user module, information module, collection module
1.1.1, user module
- Login
Provide front-end user login function - Registration
Provide front-end user registration function - Check whether the login account is unique
Search the user database to see if the same account exists
1.1.2. Information module
- Information List
Inquiry List Information Display - Information details
Display of information details data, display information such as news title, subtitle, release time, source, author, news content, etc.
1.1.3. Collection module
- Collection classification information query
Collection classification information display - Collection list information
query Collection list information display, filter query according to classification information, filter query according to collection title - Collection details information display
Collection details information display, display collection title, subtitle, collection time, source, discoverer, collection value, age, collection content and other information
2. Renderings of this chapter
2.1. Disassembly task
Tasks in this chapter:
1. Creation of Vue3 project;
2. Vue3 routing application;
3. Element-plus application;
4. Element-plus layout;
5. Place menu in top bar area;
6. Place navigation in bottom bar container , copyright and other information
3. Start to dry
3.1, Vue3 project creation
3.1.1. Create a museum blank directory
3.1.2, use idea to open
3.1.3. Create a Vue3 project
Command format: vue create project name
Since this chapter is about building the front-end user homepage, we create the front-end project
vue create front
3.1.3.1. Open the cmd command and enter the directory created in the previous step;
3.1.3.2. Run the command: vue create front
3.1.3.3. Select Vue3 project
3.1.3.4, project construction
3.1.3.5, build successfully
3.1.3.6. Follow the prompts to start the project
cd front
npm run serve
3.1.3.7, access the project in the browser
Access address: http://localhost:8080/
3.2, Vue3 routing application
3.2.1. Open the museum project in Idea and expand the front project
3.2.2. Install router for the project
npm install vue-router@4
After installation, open the package.json file to verify whether there is a vue-router dependency
3.2.3. Create view and router directories under src
3.2.3.1, /view/Home.vue statement
<template>
<div>
<h1>{
{msg}}</h1>
</div>
</template>
<script>
export default {
name: 'Home',
data() {
return {
msg: "首页"
}
}
}
</script>
<style scoped>
</style>
3.2.3.2, /router/index.js file
import {
createRouter, createWebHashHistory } from 'vue-router'
const routes = [
{
path: "/",
name: 'home',
component: ()=>import("@/view/Home.vue")
}
]
const router = createRouter({
history:createWebHashHistory(),
routes
})
export default router;
3.2.3.3, main.js load route
import {
createApp } from 'vue'
import App from './App.vue'
import router from "./router/index"
const app = createApp(App);
app.use(router);
app.mount('#app');
3.2.3.4, App.vue load router-view
<template>
<p>
<router-view/>
</p>
</template>
3.2.3.5. Modify the startup port: 80
npm run serve – --port 80
3.2.4. Access page
You can see that the data of the route "/" (/view/VueHome.vue) page is displayed here
3.3. Element-plus application
3.3.1. Install Element-plus for the project
npm install element-plus --save
Check that element-plus in the package.json file has been added
3.3.2, Vue project loads Element-plus
On the basis of the router in the previous step, element-plus is further introduced
import { createApp } from 'vue'
import App from './App.vue'
import router from "./router/index"
import ElementPlus from 'element-plus';
import 'element-plus/theme-chalk/index.css';
const app = createApp(App);
app.use(router);
app.use(ElementPlus)
app.mount('#app');
3.4. The layout of Element-plus, the placement of menus in the top bar area, and the placement of site navigation \ copyright and other information in the bottom bar container
Modify the App.Vue file
<template>
<div id="app" name="app">
<el-container>
<!-- 顶栏容器 -->
<el-header style="margin-top: 10px;">
<el-menu
:default-active="1"
class="el-menu-demo"
mode="horizontal"
active-text-color="#409eff"
router
>
<div class="logo" style="width: 10%;" >
<router-link to="/">
<span style="width: 240px; position: absolute; top: 20px; left: 60px; ">xx科技</span>
<img src="./assets/logo.png" style="height: 50px;" alt />
</router-link>
</div>
<el-menu-item index="/" >首页</el-menu-item>
<el-menu-item index="/history">历史博物馆</el-menu-item>
<el-menu-item index="/news" >资讯</el-menu-item>
<el-menu-item index="/about" >关于我们</el-menu-item>
</el-menu>
</el-header>
<!-- 主要区域容器 -->
<el-main>
<keep-alive>
<router-view :key="$route.path+$route.query"></router-view>
</keep-alive>
</el-main>
<!-- 底栏容器 -->
<el-footer>
<div class="footer">
<el-row :gutter="25">
<el-col :span="6" >
<div style="width: 100%; color: #c6cbd1; margin: 25px 10px; font-size: 20px"> 服务热线 </div>
<div style="color: #14cb85; font-size: 18px">
<span> <el-icon color="#14cb85"> <phone /> </el-icon> 13999999999</span>
</div>
<div style="width: 100%; color: #b0b0b0; margin: 25px 10px"> 深圳市XXXX </div>
<div style="width: 100%; color: #b0b0b0; margin: 25px 10px"> 邮编：XXXXX</div>
</el-col>
<el-col :span="6" >
<div style="width: 100%; color: #c6cbd1; margin: 25px 10px; font-size: 20px"> 新闻资讯 </div>
<div style="width: 100%; color: #b0b0b0; margin: 25px 10px"> <router-link to="/news" style="color: #6a737d;font-size: 17px ">博物馆新闻</router-link> </div>
<div style="width: 100%; color: #b0b0b0; margin: 25px 10px"> <router-link to="/news" style="color: #6a737d;font-size: 17px ">行业动态</router-link> </div>
</el-col>
<el-col :span="6" >
<div style="width: 100%; color: #c6cbd1; margin: 25px 10px; font-size: 20px"> 关于 </div>
<div style="width: 100%; margin: 25px 10px"> <router-link to="/about" style="color: #6a737d;font-size: 17px ">关于我们</router-link> </div>
</el-col>
</el-row>
<div class="mod_help">
<p class="coty">商城版权所有 © 2012-2021 XXXX</p>
</div>
</div>
</el-footer>
<!-- 底栏容器END -->
</el-container>
</div>
</template>
<script>
export default {
name: 'App',
components: {
}
}
</script>
<style>
/* 全局CSS */
* {
padding: 0;
margin: 0;
border: 0;
list-style: none;
}
#app .el-header {
padding: 0;
}
#app .el-main {
min-height: 300px;
padding: 20px 0;
}
#app .el-footer {
padding: 0;
}
a,
a:hover {
text-decoration: none;
}
/* 全局CSS END */
/* 顶部导航栏CSS */
.topbar {
height: 40px;
background-color: #3d3d3d;
margin-bottom: 20px;
}
.topbar .nav {
width: 1225px;
margin: 0 auto;
}
.topbar .nav ul {
float: right;
}
.topbar .nav li {
float: left;
height: 40px;
color: #b0b0b0;
font-size: 14px;
text-align: center;
line-height: 40px;
margin-left: 20px;
}
.topbar .nav .sep {
color: #b0b0b0;
font-size: 12px;
margin: 0 5px;
}
.topbar .nav li .el-button {
color: #b0b0b0;
}
.topbar .nav .el-button:hover {
color: #fff;
}
.topbar .nav li a {
color: #b0b0b0;
}
.topbar .nav a:hover {
color: #fff;
}
.topbar .nav .shopCart {
width: 120px;
background: #424242;
}
.topbar .nav .shopCart:hover {
background: #fff;
}
.topbar .nav .shopCart:hover a {
color: #ff6700;
}
.topbar .nav .shopCart-full {
width: 120px;
background: #ff6700;
}
.topbar .nav .shopCart-full a {
color: white;
}
/* 顶部导航栏CSS END */
/* 顶栏容器CSS */
.el-header .el-menu {
max-width: 1225px;
margin: 0 auto;
}
.el-header .logo {
height: 60px;
width: 339px;
float: left;
margin-right: 100px;
position: relative;
}
.el-header .so {
margin-top: 10px;
width: 300px;
position: absolute;
right: 1%;
}
/* 顶栏容器CSS END */
/* 底栏容器CSS */
.footer {
width: 100%;
text-align: center;
background: #2f2f2f;
padding-bottom: 20px;
}
.footer .ng-promise-box {
border-bottom: 1px solid #3d3d3d;
line-height: 145px;
}
.footer .ng-promise-box {
margin: 0 auto;
border-bottom: 1px solid #3d3d3d;
line-height: 145px;
}
.footer .ng-promise-box .ng-promise p a {
color: #fff;
font-size: 20px;
margin-right: 210px;
padding-left: 44px;
height: 40px;
display: inline-block;
line-height: 40px;
text-decoration: none;
background: url("assets/imgs/us-icon.png") no-repeat left 0;
}
.footer .github {
height: 50px;
line-height: 50px;
margin-top: 20px;
}
.footer .github .github-but {
width: 50px;
height: 50px;
margin: 0 auto;
background: url("assets/imgs/github.png") no-repeat;
}
.footer .mod_help {
text-align: center;
color: #888888;
}
.footer .mod_help p {
margin: 20px 0 16px 0;
}
.footer .mod_help p a {
color: #888888;
text-decoration: none;
}
.footer .mod_help p a:hover {
color: #fff;
}
.footer .mod_help p span {
padding: 0 22px;
}
/* 底栏容器CSS END */
.flex-grow {
flex-grow: 1;
}
li.el-menu-item{
font-size: 18px;
}
</style>
3.5. Execute npm run serve to start the project, and you can see the rendering of the first part
After the content of this chapter is finished, we will explain how to use routing changes, monitoring routing changes, main area container layout, carousel, e-tab components, e-row, and e-col components.
Summarize
The above is what I want to talk about today. This article only briefly introduces the homepage layout of the museum management system, involving the creation of Vue3 projects, Vue3 routing, Element-plus menus, Element-plus layouts, etc.