1.在src目录下新建pages文件夹用来放页面。新建文件Index.vue，首页
在Index.vue中搭建vue基本结构。
在element官网Element - The world's most popular Vue UI framework中选择想要的组件。
我选择是Container布局容器。选择好样式点击显示代码复制相关代码至Index.vue中。
页面全部代码如下：
<template>
<el-container>
<el-aside width="200px">Aside</el-aside>
<el-container>
<el-header>Header</el-header>
<el-main>Main</el-main>
</el-container>
</el-container>
</template>
<script>
export default {
}
</script>
<style scoped>
.el-header {
background-color: #B3C0D1;
color: #333;
text-align: center;
line-height: 60px;
}
.el-aside {
background-color: #D3DCE6;
color: #333;
text-align: center;
line-height: 200px;
}
.el-main {
background-color: #E9EEF3;
color: #333;
text-align: center;
line-height: 160px;
}
body>.el-container {
margin-bottom: 40px;
}
.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
line-height: 260px;
}
.el-container:nth-child(7) .el-aside {
line-height: 320px;
}
</style>此时在router文件夹下的index.js中导入路由，并配置路由规则
index.js完整代码如下：
import Vue from 'vue'
import VueRouter from 'vue-router'
// 导入路由（懒加载）
const Index = () => import("../pages/Index.vue")
Vue.use(VueRouter)
// 配置路由规则
const routes = [
{
path:"/index",
component:Index
}
]
const router = new VueRouter({
routes
})
export default router
此时在终端用npm run serve运行项目。
出现报错：error Component name "Index" should always be multi-word vue/multi-word-component-names
这是因为 ESLint校验在代码提交之前会进行一次检查，他可以避免因为某个字段未定义或者因为命名不规范导致的服务崩溃，可以有效的控制项目代码的质量。其进行自动检测的原因是因为我们在使用vue-cli创建项目使用了最新的vue/cli-plugin-eslint插件，引用了vue/multi-word-component-names规则，所以在编译的时候判定此次错误。
可以在package.json中查看eslint版本。
解决方案：在vue.config.js文件中添加下面代码
// 关闭eslint校验
lintOnSave:false此时vue.config.js中的全部代码为：
const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
transpileDependencies: true,
// 关闭eslint校验
// lintOnSave:false,
//设置代理请求
devServer: {
proxy: {
"/api": {
target: "http://localhost:3000",//目标地址
ws: true,//websocket长连接 keep-alive
changeOrigin: true,//允许跨域
pathRewrite: {//路径重写
"^/api": "http://localhost:3000"
}
}
}
}
})
再运行项目即可出现效果，如下图。之后的样式要求就按照自己的需求去编写css。（将页面设置整屏高度在Index.vue的style中找到.el-aside样式设置，添加height: 100vh;即可）
