【Vue2入门技能树】：Vue2项目从入门到放弃所遇到的问题汇总

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实现一个管理系统，后续问题持续更新中…!