Vue 新增一个菜单项及对应的页面

一、components文件夹下，新建一个名为 addressGridView文件夹

 二、将已有好用的页面  AddressList.scss 和 AddressList.vue  这两个文件到 addressGridView文件夹下

        并改名为 AddressGridView.scss 和 AddressGridView.vue 

        打开 AddressGridView.vue 文件，在其最下面

        @import './AddressGridView.scss';  //这句要改一下 引用

 三、在 sidebar目录下 index.vue 加入下面代码  用于 添加菜单项

<el-menu-item class="menu-item" index="10">
      <i class="el-icon-setting el-icon-setting4"></i>
      <span slot="title">通讯录</span>
</el-menu-item> 

其中重点是 index="10" 

四、在 store目录下 index.js 文件中 的  pageList 数组中 加入下面代码

{
    id: 10,
    title: '通讯录',
    icon: ''
}

注：最后的元素没有 逗号

如下图：

 ...

 五、在 home目录下的 Home.vue 加入下面代码

<AddressGridView v-else-if="pageId == 10" />

 再加入 页面引用

/* 页面内容引入 - 通讯录页 */
import AddressGridView from '@/components/addressGridView/AddressGridView'

 再在 comonents数组中 加入

AddressGridView

 保存后，在终端  用下面的命令运行

npm run serve

...编译结束后

 在浏览器中输入 http://127.0.0.1:4000 即可进入