「这是我参与2022首次更文挑战的第3天，活动详情查看：2022首次更文挑战」。

修改app.vue

我们可以先清理搭建vue项目后不需要的东西，将原本不需要的默认配置删除，例如一些view文件，组件文件等。app.vue可以当做是网站首页，也可以写所有页面中共同需要的动画或者样式，我们可以改变app.vue成我们需要的样式。简单的像下面代码即可。

<template>
  <div id="app">
    <router-view />
  </div>
</template>

<style lang="scss">
*{
  margin: 0;
  padding: 0;
  border: 0;
}
</style>

代码片段

点击文件 -> 首选项 -> 用户片段 -> 输入vh（名字可以自己取）

然后在vh片段文件中添加你需要的代码就可以啦

"vh": {
		"prefix": "vh",
		"body": [
			"<template>",
			"<div>",
			"",
			"</div>",
			"</template>",
			"<script>",
			"export default {",
			"",
			"}",
			"</script>",
			"<style scoped lang='scss'>",
			"</style>",
		],
		"description": "vh components"
	}

在我们新建的vue文件（home.vue）中输入vh，就会出现提示，点击提示中的vh或者回车，就可以快速的将我们需要的代码添加进来

配置路由显示页面信息

在data中添加msg，并在页面中显示出来 {{msg}}

export default {
  data() {
    return {
      msg: "home.vue 文件"
    };
  }
}

配置路由显示该页面, 将默认路径跳转为 Home 页面

import Home from '../views/home.vue'
const routes = [
  { path: "/", redirect: "Home" },
  { path: '/home', name: 'Home', component: Home }
]

安装Element

npm 安装语句

npm i element-ui -S

安装失败的话试一下cnpm i element-ui -S 安装成功后在main.js文件中完整引入Element就可以使用啦

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI)

Element布局容器

通常画一个页面我们就可以以Element布局容器作为整体的布局，方便快速搭建页面的基本结构

<el-container>：外层容器。当子元素中包含 <el-header> 或 <el-footer> 时，全部子元素会垂直上下排列，否则会水平左右排列。

<el-header>：顶栏容器。

<el-aside>：侧边栏容器。

<el-main>：主要区域容器。

<el-footer>：底栏容器。

将需要的代码布局粘贴到文件中，就可以在页面中显示了，这里将页面分成三块，顶部导航栏，侧边栏还有主要区域

<el-container>
  <el-header>Header</el-header>
  <el-container>
    <el-aside width="200px">Aside</el-aside>
    <el-main>Main</el-main>
  </el-container>
</el-container>

!important 改变样式

element ui的响应式布局, 使用css 无法改变样式，可以使用!important进行强制改变

<el-header class="m-header">Header</el-header>

.m-header {
    height: 300px !important;
}

看下改变后的效果，成功改变了el-header的高度

修改配置文件使用Element布局