# 新增页面
:::tip 提示
在Pro项目中，新增页面的流程如下：新增.Vue页面组件、配置路由信息、增加权限配置这几个步骤  
:::
## 新增页面组件
首先没我们在/src/views目录下新建页面组件NewPage.vue，为了便于管理，我们也可以将其分目录归类
```{3}
├── src
│   ├── views                # 页面文件夹
│   │   ├── NewPage.vue      # 新增页面
```
为了更好的演示，我们将NewPage.vue代码初始化如下：
```html
<template>
	<PageWrapper>
		<PageContentWrapper>
			<PageItemCard
				class="tabs-item"
				:title="'新增页面'"
			>
                新页面内容
			</PageItemCard>
		</PageContentWrapper>
	</PageWrapper>
</template>

<script>
export default {
	name: 'NewPage'
}
</script>

<style scoped lang="scss">
</style>
```
## 修改路由配置
然后在路由中添加对应的配置，比如这样（路由配置不一定要按这样的结构吗，具体参见VueRouter文档）：
```javascript
let router = new Router({
	routes: [
		{
			path: '/',
			component: BasicLayout,
			children: [
                // ...
				{
					path: 'new',
					component: BlankLayout,
					children: [
						{
							path: 'newPage',
							name: '新页面',
							component: () => import('./views/NewPage/NewPage.vue')
						}
					]
				}
			]
		}
	]
})
```
## 设置页面权限
然后，由于我们启用的权限菜单的配置，最后你还要把这个入口添加到菜单里面，它在/src/config中，具体的用法，我们在下一章节会提到
```javascript
const FullMenu = [
    // ...
	{
		name: '新页面',
		icon: 'el-icon-data-analysis',
		children: [
			{
				path: '/new/newPage',
				name: '新增页面',
			}
		],
	}
    // ...
]

export default FullMenu

```
做完这些后，你就可以在项目中看到它的真面目了，一个最简单的页面就出现了：

![](../.vuepress/public/img/newPage.png)
好啦，你可以快乐的coding啦