### 配置菜单 - 配置方法：打开src/layout/menu.json文件，按项目需求配置菜单项 - 配置说明： ``` json [ { // 二级菜单的配置同一级菜单 "id": "唯一标识", "name": "绑定路由名称", "title": "显示在菜单项中的标题", "isFolder": false, "icon": "图标" }, { "id": "唯一标识", "title": "显示在菜单项中的标题", "isFolder": true, 是否是文件夹 "icon": "图标", "children": [ { // 二级菜单的配置同一级菜单 "id": "唯一标识", "name": "绑定路由名称", "title": "显示在菜单项中的标题", "icon": "图标" }... ] }, ... ] ### 配置路由 - 配置方法：打开src/router/routes.js文件，按项目需求配置路由 - 配置说明： ``` json [ { path: '/login', // url匹配/login name: 'login', // 路由名称，即路由标识 meta: { title: '登录页面' }, // 附加元数据，非必填 component: () => import('@/views/account/login.vue') // 绑定动态组件，一般是绑定@/views中的视图页面 }, { path: '/', // 路由按自上到下的顺序直至匹配到path为至，此处路由定义在/login之下，因此匹配的是除/login外以/开头的其它url component: () => import('@/layout/index.vue'), meta: { authorize: false, title: 'vue-project' }, // 附加元数据authorize表示此路由是否需要进行登录验证 children: [ // 二级子路由 { path: 'test-view-1-1', name: 'test-view-1-1', component: () => import('@/views/test-view-1-1/index.vue'), meta: { title: '测试页面1-1' } }, ... ] } ] - path支持动态匹配、正则匹配等，如 /location/:id、/location/:id(\\d+)，详细内容参考vue-router官方文档 - 登录验证的实现方法在src/libs/util.js中的checkLogin()，src/router/index.js中的authorize ### 新增功能点 - 配置方法：新增功能点要配置三部分内容 1. src/views/下新建页面如：page1.vue或page1/index.vue 2. 配置路由，将路由动态绑定此页面：如{path:'/page1',name:'page1',component: () => import('@/views/page1/index.vue')} 3. 配置菜单，将菜单通过路由标识绑定路由，如："name": "page1", - 注意事项：以上三者的绑定关系是路由绑定页面(通过component属性)，菜单绑定路由(通过name属性) ### 代码规范 - 命名规范，没有强制的命名规范，原则上在单文件内中，属性、方法、api等使用小驼峰命名，类、组件使用大驼峰、Pascal命名，全局常量使用全大写加下划线命名，api使用RESTful规范 - 代码文件存放方式，src/views中只存放页面或与页面所绑定的组件，src/components存放自定义公共组件、二次封装组件，在实际开发中，通常建议把一个页面分隔成若干个功能独立、逻辑关联的小组件，然后进行拼装，方便后期维护、复用和迁移。 ### http请求 - fetch，此示例项目中使用fetch进行api请求，fetch是es6特性中的一种，通常可满足大部分使用场景 - 接口返回值，src/libs/http是http请求工具类，统一处理接口返回的错误码，示例项目中以接口返回{err_code:0, err_msg:'',result:{}}为例，实际项目中，要依据服务端的规范进行调整 ### 换肤 - 实现方法，动态创建标签写入到中，此示例项目中已实现 - 自定义皮肤，存放在public/skin中，每个皮肤单独一个文件 - 部署注意事项，web.config.js中的skinRoot定义了部署时的皮肤文件路径 ### 多语言 - 实现方法，vue-i18n库，此示例项目中已集成 - 自定义文本，在src/locale/lang/中配置 - 使用方法，组件已全局注册，在程序中使用$t('标识')即可绑定vue-i18n，具体参考src/views/test-view-1-1/index.vue