当前位置：首页 > news >正文

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

news 来源：原创 2024/9/29 14:57:02

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 {//用于动态设置组件的宽高，这里的组件只用到了windowHeightwindowWidth: 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>