1、body中自带 margin: 8px 的问题

解决办法：在 public 目录下的 index.html 中加入如下样式即可

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）

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设置一个背景色便于观察），如何让其占满整个屏幕呢？做监听就可以了，具体见下方代码：

记录从0到1用vue实现一个管理系统，后续问题持续更新中…!