1、body中自带 margin: 8px 的问题
解决办法:在 public 目录下的 index.html 中加入如下样式即可
<style>
* {
margin: 0;
}
</style>
2、使用vue-router、vuex
①在项目所在文件夹下打开 cmd 终端,然后运行如下代码,等待安装
//vue2 对应的 vue-router 版本是 3.x.x
npm install vue-router@3
//vue2 对应的 vuex 版本是 3.x.x
npm install vuex@3
//vue3 对应的 vue-router 版本是 4.x.x
npm install vue-router@4
//vue3 对应的 vuex 版本是 4.x.x
npm install vuex@4
//如果vue2不小心安装了vuex 4.x,则需要卸载掉vuex 4.x,然后再安装vuex 3.x
npm uninstall vuex@4
②在 src 目录下新建 router 文件夹,然后在 router 文件夹下新建 index.js ,在 index.js 中写入如下代码
import Vue from 'vue'
import VueRouter from 'vue-router'
//MainPage 是自定义组件,视实际情况写及import
import MainPage from '@/pages/main/MainPage.vue'
Vue.use(VueRouter)
const routes = [
//MainPage 是自定义组件,视实际情况写及import
{
path: '/',
name: '',
component: MainPage
},
// {
// path: '/login',
// name: '/login',
// component: LoginPage
// },
]
export default new VueRouter({
routes: routes
})
③在 src 目录下新建 store 文件夹,然后在 store 文件夹下新建 index.js ,在 index.js 中写入如下代码
import Vue from "vue";
import Vuex from 'vuex';
Vue.use(Vuex);
const actions = {
}
const mutations = {
}
const state = {
}
export default new Vuex.Store({
actions,
mutations,
state
})
④在 main.js 中加入如下代码
//引入路由
import router from './router';
//引入vuex
import store from './store';
//使用路由
new Vue({
render: h => h(App),
router,
store
}).$mount('#app')
④在组件中使用(一般是 App.vue)
<template>
<div id="app">
<router-view></router-view>
</div>
</template>
data() {
return {
//aaa 需要再 state 中存在 aaa ,不然要报错
msg: this.$store.state.aaa
}
},
3、使用 Element-UI 组件库
这里没啥坑,Vue2 安装Element-UI2,Vue3 安装Element-plus 就行了,具体参考官方文档
Element 2官方文档之快速上手
4、搭建管理系统页面布局
Element 2官方文档之Container 布局容器
可以参考官方指定的几个布局,也可以自己搭建,搭好之后,如果内容过少,它不会占满整个屏幕(可以将每个区域,top、left、main、header、footer设置一个背景色便于观察),如何让其占满整个屏幕呢?做监听就可以了,具体见下方代码:
<template>
<el-container>
<el-header class="main-top">
</el-header>
<el-container>
<!-- 动态绑定一个高度 -->
<el-aside class="main-left" :style="{height: dynamicHeight + 'px'}" >
</el-aside>
<el-main class="main-center">
<!-- 路由,保证点击其他菜单时,页面只在main区域变化 -->
<router-view></router-view>
</el-main>
</el-container>
</el-container>
</template>
<script>
export default {
name: 'MainPage',
components: {},
data() {
return {
//用于动态设置组件的宽高,这里的组件只用到了windowHeight
windowWidth: window.innerWidth,
windowHeight: window.innerHeight,
}
},
methods: {
handleResize() {
this.windowWidth = window.innerWidth;
this.windowHeight = window.innerHeight;
},
},
mounted() {
//监听Windows的resize事件
window.addEventListener('resize', this.handleResize);
},
beforeDestroy() {
//组件销毁之前,解绑Windows的resize事件
window.removeEventListener('resize', this.handleResize);
}
}
</script>
<style scoped>
.main-top {
background-color: aqua;
}
.main-left {
width: 200px;
text-align: left;
background-color: rgb(209, 229, 229);
}
.main-center {
background-color: rgb(222, 255, 255);
}
</style>
记录从0到1用vue实现一个管理系统,后续问题持续更新中…!