项目创建好,接下来引入Container 布局容器,

1. 在src下新建layout文件夹, layoutName.vue

2. router=> index.ts

import { createRouter, createWebHashHistory, RouteRecordRaw } from 'vue-router'
import AppLayout from '@/layout/layoutName.vue'const routes: RouteRecordRaw [] = [{path: '/',component: AppLayout,children: [{path: '/',name: 'home',component: () => import('@/views/home/indexName.vue')}]},{path: '/login',name: 'login',component: () => import('../views/login/indexName.vue')}
]const router = createRouter({history: createWebHashHistory(),routes
})export default router

3. styles => common.css 目录下
   *{
   margin: 0;
   padding: 0;
   }
4. 注意要main.ts 文件下, 要注释 // import ‘./style.css’,不然 他们会居中
5. 终端: npm run dev
6. 接下来是看菜单: Menu 菜单, 在elementplus中搜索,
7. 在layout文件中新建 components文件夹,再建 layoutAside.vue ,从网友中复制过来

8. 在layoutName.vue 中

9. 终端运行发现, 图标不生效(icon), 在elementplus 中找icon, 发现要安装,根据自己情况安装一下

# NPM
$ npm install @element-plus/icons-vue
# Yarn
$ yarn add @element-plus/icons-vue
# pnpm
$ pnpm install @element-plus/icons-vue

10. 在src => plugins => element-plus-icon.ts, 新建的(element-plus-icon.ts), 这用于插件

import { App } from 'vue'
import * as ElementPlusIconsVue from '@element-plus/icons-vue'export default {install (app: App) {for (const [key, component] of Object.entries(ElementPlusIconsVue)) {app.component(key, component)}}
}

11. 在main.ts 中注册icon ,

import { createApp } from 'vue'
import App from './App.vue'
// 引入element icon
import elementIcon from './plugins/element-plus-icon'const app = createApp(App)
app.use(elementIcon)
...

12. 接下是对router和layoutAside, 改进
13. 在src => views 目录下新product 文件夹, 如图
    
14. 在route目录下, 新建modules目录, 再建 product.ts

import { RouteRecordRaw, RouterView } from 'vue-router'const routes: RouteRecordRaw = {path: 'product',name: 'product',component: RouterView,children: [{path: 'product_list',name: 'product_list',component: () => import('@/views/product/list/indexName.vue')},{path: 'product_attr',name: 'product_attr',component: () => import('@/views/product/attr/indexName.vue')},{path: 'product_classify',name: 'product_classify',component: () => import('@/views/product/classify/indexName.vue')},{path: 'product_reply',name: 'product_reply',component: () => import('@/views/product/reply/indexName.vue')}]}export default routes

15. 在router目录index.ts中, 导入进来,引用它

import product from './modules/product'const routes: RouteRecordRaw [] = [{path: '/',component: AppLayout,children: [{path: '/',name: 'home',component: () => import('@/views/home/indexName.vue')},product]},...
]

16. router 和 界面创建好了, 剩下就是layoutAside.vue了

17. 终端运行: npm run dev, 就ok