### **安装** ``` npx nuxi init <project-name> ``` ### **新建页面** - 项目根目录新建 /page目录 - 在 `app.vue` 文件中添加 `<NuxtPage></NuxtPage>` ~~~ <template> <NuxtPage></NuxtPage>//自动加载page下的页面 </template> <script> </script> <style> :focus {outline: 0;} </style> ~~~ ### **路由自动访问**  访问 127.0.0.1/ 访问的是page/index.vue 127.0.0.1/user => page/user.vue ### **user.vue代码** ~~~ <template> <div class="user"> <el-container> <!-- 左侧边栏--> <el-aside style="width: auto" class="el-menu-vertical-demo"> <UserLeft :collapse="collapseVal"></UserLeft> </el-aside> <!-- 侧边栏 end--> <el-container> <el-header> <UserHeader @collapseBtnClick="collapseBtnClick"> </UserHeader> </el-header> <el-main> <NuxtPage></NuxtPage> </el-main> <!-- <el-footer>这是页面底部</el-footer>--> </el-container> </el-container> </div> </template> <script setup> definePageMeta({ middleware: 'user-login' }) const collapseVal = ref(false); // const collapseClick = () => { // collapseVal.value = !collapseVal.value // } const collapseBtnClick = (val) => { collapseVal.value = val.value } </script> <style scoped lang="less"> .home { position: fixed; top: 0; left: 0; width: 100%; height: 100%; } .el-menu-vertical-demo:not(.el-menu--collapse) { min-height: 400px; } .el-header { background-color: pink; } .el-main{ background-color: rgba(252, 252, 253, 0.99); padding: 8px; } </style> ~~~