# ElementUI-Vue前端框架项目初始化 #### 作者：高天阳 #### 邮箱：<13683265113@163.com> ``` 更改历史 * 2018-2-25 高天阳 初始化文档 ``` ## 1 克隆、安装及启动 ### 1.1 在项目中添加clone权限： ![](https://1608391883-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MU31qUdgJWnjhqnXmr2%2Fsync%2F0f237f75c280f752dca0386b25c67f894154ab94.jpeg?generation=1613901911383941\&alt=media) ### 1.2 克隆项目至本地： ``` git clone [项目克隆地址] code: git clone git@115.28.80.125:zhangjiakou/zhangjiakouweb.git ``` ![](https://1608391883-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MU31qUdgJWnjhqnXmr2%2Fsync%2Fa597cec32e3d74ac41569a3c0c4c63096c98aaba.jpeg?generation=1613901911385035\&alt=media) ### 1.3 安装依赖： ``` npm install ``` ``` # 建议不要用cnpm安装 会有各种诡异的bug 可以通过如下操作解决 npm 下载速度慢的问题 npm install --registry=https://registry.npm.taobao.org ``` ### 1.4 服务启动： ``` # 启动服务 npm run dev ``` ## 2 目录结构、文件功能介绍 ### 2.1 目录结构： ``` zhangjiakouweb/node_modules 项目开发依赖 zhangjiakouweb/src/router/ 框架路由配置 zhangjiakouweb/src/views/ 编写代码存放目录 zhangjiakouweb/src/lang/ i18n配置 ``` ![](https://1608391883-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MU31qUdgJWnjhqnXmr2%2Fsync%2F867c9b5a1429d5dd89b6bc80ff36931a0cd4149e.jpeg?generation=1613901911311032\&alt=media) ### 2.2 主要文件及功能 * 框架路由配置 ``` zhangjiakouweb/src/router/index.js 配置路由文件 ``` * 无需修改部分 ``` import Vue from 'vue' import Router from 'vue-router' const _import = require('./_import_' + process.env.NODE_ENV) // in development-env not use lazy-loading, because lazy-loading too many pages will cause webpack hot update too slow. // so only in production use lazy-loading; // detail: https://panjiachen.github.io/vue-element-admin-site/#/lazy-loading Vue.use(Router) /* Layout */ import Layout from '../views/layout/Layout' /** note: submenu only apppear when children.length>=1 * detail see https://panjiachen.github.io/vue-element-admin-site/#/router-and-nav?id=sidebar **/ /** * hidden: true if `hidden:true` will not show in the sidebar(default is false) * alwaysShow: true if set true, will always show the root menu, whatever its child routes length * if not set alwaysShow, only more than one route under the children * it will becomes nested mode, otherwise not show the root menu * redirect: noredirect if `redirect:noredirect` will no redirct in the breadcrumb * name:'router-name' the name is used by (must set!!!) * meta : { roles: ['admin','editor'] will control the page roles (you can set multiple roles) title: 'title' the name show in submenu and breadcrumb (recommend set) icon: 'svg-name' the icon show in the sidebar, noCache: true if fasle ,the page will no be cached(default is false) } **/ export const constantRouterMap = [ { path: '/login', component: _import('login/index'), hidden: true }, { path: '/authredirect', component: _import('login/authredirect'), hidden: true }, { path: '/404', component: _import('errorPage/404'), hidden: true }, { path: '/401', component: _import('errorPage/401'), hidden: true }, { path: '', component: Layout, redirect: 'dashboard', children: [{ path: 'dashboard', component: _import('dashboard/index'), name: 'dashboard', meta: { title: 'dashboard', icon: 'dashboard', noCache: true } }] }, { path: '/documentation', component: Layout, redirect: '/documentation/index', children: [{ path: 'index', component: _import('documentation/index'), name: 'documentation', meta: { title: 'documentation', icon: 'documentation', noCache: true } }] } ] export default new Router({ // mode: 'history', // require service support scrollBehavior: () => ({ y: 0 }), routes: constantRouterMap }) ``` * 需修改部分(只举其中两个代表性例子) ``` export const asyncRouterMap = [ { path: '/sharedFolders', // 路径 component: Layout, // 组件 redirect: 'sharedFolders', // 定向 name: 'sharedFolders', // 名称 meta: { title: 'sharedFolders', // 标题 icon: 'component' // 图标 }, children: [ { path: 'fileManagement', // 子菜单路径 component: _import('sharedFolders/fileManagement'), // 组件 name: 'fileManagement', // 组件名称 meta: { title: 'fileManagement' } // 组件标题 }, { path: 'folderManagement', component: _import('sharedFolders/folderManagement'), name: 'folderManagement', meta: { title: 'folderManagement' } }, { path: 'capacityPassword', component: _import('sharedFolders/capacityPassword'), name: 'capacityPassword', meta: { title: 'capacityPassword' } } ] }, { path: '/documentCirculation', // 路径 component: Layout, // 组件 redirect: 'documentCirculation', // 定向 name: 'documentCirculation', // 名称 meta: { title: 'documentCirculation', // 标题 icon: 'example' // 图标 }, children: [ { path: '/documentCirculation/documentApproval', // 二级菜单路径 component: _import('documentCirculation/documentApproval/index'), // 二级菜单组件 redirect: '/documentCirculation/documentApproval/complex-table', // 二级菜单组件定向 name: 'documentApproval', // 二级菜单组件名称 meta: { title: 'documentApproval', // 二级菜单组件标题 icon: 'table' // 二级菜单组件图标 }, children: [ { path: 'approvalLaunched', // 三级菜单路径 component: _import('documentCirculation/documentApproval/approvalLaunched/index'), // 三级菜单组件 name: 'approvalLaunched', // 三级菜单名称 meta: { title: 'approvalLaunched' } // 三级菜单标题 }, { path: 'branchLeaders', component: _import('documentCirculation/documentApproval/branchLeaders/index'), name: 'branchLeaders', meta: { title: 'branchLeaders' } }, { path: 'authorityLeaders', component: _import('documentCirculation/documentApproval/authorityLeaders/index'), name: 'authorityLeaders', meta: { title: 'authorityLeaders' } }, { path: 'deputyAttorney', component: _import('documentCirculation/documentApproval/deputyAttorney/index'), name: 'deputyAttorney', meta: { title: 'deputyAttorney' } }, { path: 'attorneyGeneral', component: _import('documentCirculation/documentApproval/attorneyGeneral/index'), name: 'attorneyGeneral', meta: { title: 'attorneyGeneral' } }, { path: 'documentPublishing', component: _import('documentCirculation/documentApproval/documentPublishing/index'), name: 'documentPublishing', meta: { title: 'documentPublishing' } } ] }, { path: '/documentCirculation/documentHis', component: _import('documentCirculation/documentHis/index'), redirect: '/documentCirculation/documentHis/complex-table', name: 'documentHis', meta: { title: 'documentHis', icon: 'table' }, children: [ { path: 'hisApprovalLaunched', component: _import('documentCirculation/documentHis/hisApprovalLaunched/index'), name: 'hisApprovalLaunched', meta: { title: 'hisApprovalLaunched' } }, { path: 'documentReview', component: _import('documentCirculation/documentHis/documentReview/index'), name: 'documentReview', meta: { title: 'documentReview' } }, { path: 'hisDocumentCirculation', component: _import('documentCirculation/documentHis/hisDocumentCirculation/index'), name: 'hisDocumentCirculation', meta: { title: 'hisDocumentCirculation' } }, { path: 'documentList', component: _import('documentCirculation/documentHis/documentList/index'), name: 'documentList', meta: { title: 'documentList' } } ] } ] }, ] ``` * 导航栏 ``` wechatgame/src/app/navigation/ 导航配置 wechatgame/src/app/navigation/navigation.module.js 导航路由配置 wechatgame/src/app/navigation/navigation.controller.js 工具栏控制器配置 wechatgame/src/app/navigation/XXX/layouts 框架导航页面不同样式布局方案 ``` ![](https://1608391883-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MU31qUdgJWnjhqnXmr2%2Fsync%2Ffa1324b01746d03a1ad17c47a2ca7546651f1423.jpeg?generation=1613901900332505\&alt=media) > 一般情况下 只会修改页面样式 此次还修改了控制器 增加了一个打开关闭判定 ![](https://1608391883-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MU31qUdgJWnjhqnXmr2%2Fsync%2Fd25c9bde960b54213a8dcfadb30f42101b7581a5.jpeg?generation=1613901900749490\&alt=media) ![](https://1608391883-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MU31qUdgJWnjhqnXmr2%2Fsync%2F45dd253a98e8aaa62a83d25d38156bb9c0811a05.jpeg?generation=1613901900131492\&alt=media) * 工具栏 ``` wechatgame/src/app/toolbar/ 工具栏配置 wechatgame/src/app/toolbar/toolbar.module.js 工具栏路由配置 wechatgame/src/app/toolbar/toolbar.controller.js 工具栏控制器配置 wechatgame/src/app/toolbar/XXX/layouts 工具栏页面不同样式布局方案 ``` ![](https://1608391883-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MU31qUdgJWnjhqnXmr2%2Fsync%2Fdb9ba128403d412e647edb03a96c9c5d9e83b0af.jpeg?generation=1613901901475011\&alt=media) > 工具栏主要包括:LOGO、下拉列表、搜索、国际化、更多 ![](https://1608391883-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MU31qUdgJWnjhqnXmr2%2Fsync%2F85877861db634b57d9833b27d5c7b7263a145e9c.jpeg?generation=1613901899830887\&alt=media) > 修改了工具栏LOGO内容、登录用户姓名 注释了下拉栏多余内容、国际化、更多 ![](https://1608391883-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MU31qUdgJWnjhqnXmr2%2Fsync%2F929e015af51d77b96ff0eb5d17778efb734da116.jpeg?generation=1613901900199029\&alt=media) ![](https://1608391883-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MU31qUdgJWnjhqnXmr2%2Fsync%2Fb93f1f0e14245a6abfaba3d0b38b96725c901231.jpeg?generation=1613901900228439\&alt=media) ![](https://1608391883-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MU31qUdgJWnjhqnXmr2%2Fsync%2F814eaa3d400e0c3625b9506193fb258d91508f8c.jpeg?generation=1613901900246429\&alt=media) ### 2.3 安装restangular并注入 安装restangular插件 ``` bower install --save restangular ``` ![](https://1608391883-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MU31qUdgJWnjhqnXmr2%2Fsync%2F599fcccd263fbba900826f03ab160d61745d8ebc.jpeg?generation=1613901901326208\&alt=media) 在项目路由配置文件引入restangular ![](https://1608391883-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MU31qUdgJWnjhqnXmr2%2Fsync%2Fdf45c8b556331d5bae5682563e6d8a818237a231.jpeg?generation=1613901899898816\&alt=media) 在模块路由引入restangular ![](https://1608391883-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MU31qUdgJWnjhqnXmr2%2Fsync%2Fec68919f979fada4aa32ebb5a01e4d39731c2c3f.jpeg?generation=1613901900950899\&alt=media) 在页面路由引入restangular ![](https://1608391883-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MU31qUdgJWnjhqnXmr2%2Fsync%2F257231b18ca701c9c2577bc85ea440355455b775.jpeg?generation=1613901900310385\&alt=media) ## 3 常见问题及处理 ### 3.1 模块加载失败 * 报错提示：路由配置出现问题 ![](https://1608391883-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MU31qUdgJWnjhqnXmr2%2Fsync%2Fe012d1eeac632af00dfe8b4ab522d900c00612c5.jpeg?generation=1613901899988198\&alt=media) ![](https://1608391883-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MU31qUdgJWnjhqnXmr2%2Fsync%2Fffa523188617648e1bff56400228dac56ca57313.jpeg?generation=1613901901228512\&alt=media) * 处理方法：页面路由需配置为模块的路由 ![](https://1608391883-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MU31qUdgJWnjhqnXmr2%2Fsync%2F3889258fd7a43f688af40727efb5608070a8a846.jpeg?generation=1613901899911585\&alt=media) ### 3.2 Sass安装失败报错 * 报错提示：项目无法启动,报错提示如下图 ![](https://1608391883-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MU31qUdgJWnjhqnXmr2%2Fsync%2F801ae75a81f93b87053be0357eedeed38ad81f95.png?generation=1613901900663272\&alt=media) ![](https://1608391883-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MU31qUdgJWnjhqnXmr2%2Fsync%2Fb6135c9179c08d5ba9738b239324e702a2327104.png?generation=1613901900054945\&alt=media) * 处理方法1：此问题需安装node-sass ``` npm install node-sass ``` [解决方法链接](http://blog.csdn.net/u010116861/article/details/51886550) * 处理方法2：此问题需查看node版本(过高或过低均会影响Sass安装 建议node-6.X.X版本) ### 3.3 bower、gulp命令不是内部或外部可识别的命令 * npm安装bower、gulp成功，但bower install、gulp serve却提示命令不是内部或外部可识别的命令 * 处理方法：全局安装bower、gulp ``` npm install bower -g npm install gulp -g ``` ### 3.4 配置restangular失败 * 报错提示： ![](https://1608391883-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MU31qUdgJWnjhqnXmr2%2Fsync%2F4f2aab34604b346d7b8be42eed3e6b9bffd9dedb.jpeg?generation=1613901901520051\&alt=media) * 处理方法：模块路由也需要注入restangular ![](https://1608391883-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MU31qUdgJWnjhqnXmr2%2Fsync%2Fec68919f979fada4aa32ebb5a01e4d39731c2c3f.jpeg?generation=1613901900950899\&alt=media) ### 3.5 表格查询后出现空白效果(客户体验不好) * 报错提示： ![](https://1608391883-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MU31qUdgJWnjhqnXmr2%2Fsync%2F6ff008d5468dcf0b1d0d74c9dc9c7bca6f6d1f4c.jpeg?generation=1613901901432927\&alt=media) ![](https://1608391883-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MU31qUdgJWnjhqnXmr2%2Fsync%2F60723b6b020caebc0bae94654d74b444f109d90c.jpeg?generation=1613901900847861\&alt=media) * 问题分析： 单页显示数据量过大 导致翻页后页面渲染位置不正确 ![](https://1608391883-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MU31qUdgJWnjhqnXmr2%2Fsync%2F42d2121ec7a2c00e370421816622bc321e7eb3a6.png?generation=1613901906277378\&alt=media) * 处理方法：删除`ms-scroll` ![](https://1608391883-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MU31qUdgJWnjhqnXmr2%2Fsync%2F539f012073f76f62a5b4a8cc82f2fb0a9e37c584.jpeg?generation=1613901899948122\&alt=media) ![](https://1608391883-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MU31qUdgJWnjhqnXmr2%2Fsync%2F01c316017a1b84dd13cb6c210ab9fdc543f5adf3.jpeg?generation=1613901906918890\&alt=media) ## 4 最佳实践 ### 4.1 service注入 在项目中创建service文件 ![](https://1608391883-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MU31qUdgJWnjhqnXmr2%2Fsync%2F65e1c262ab10d6471d0f754d578be293244469eb.jpeg?generation=1613901900248492\&alt=media) 在调用公共方法的controller注入service ![](https://1608391883-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MU31qUdgJWnjhqnXmr2%2Fsync%2F7b422f55e8b4f2d07127a17e43be7428092d1206.jpeg?generation=1613901900855820\&alt=media) 在controller中调用service的方法 ![](https://1608391883-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MU31qUdgJWnjhqnXmr2%2Fsync%2Fd7cfc61377679a30a285aa6778cdf4b2cacead1e.jpeg?generation=1613901901534520\&alt=media) * 注意:此样例service中引入了locals因此需要在项目中声明locals ![](https://1608391883-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MU31qUdgJWnjhqnXmr2%2Fsync%2F73b98f264dfa50411c6018b23d860e864862557f.jpeg?generation=1613901900731148\&alt=media) > 若不引人项目会报错 ### 4.2 datepicker汉化 * 原组件样式： ![](https://1608391883-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MU31qUdgJWnjhqnXmr2%2Fsync%2F7c6505605a0ac1604c6961f8f4d0f99aebdbc754.jpeg?generation=1613901900903615\&alt=media) * 修改后组件样式： ![](https://1608391883-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MU31qUdgJWnjhqnXmr2%2Fsync%2F934b738f04481d8fc9ba275f7352b3a4d354b1cb.jpeg?generation=1613901901240001\&alt=media) * 处理方法： ![](https://1608391883-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MU31qUdgJWnjhqnXmr2%2Fsync%2F01e72a3f0c2acefcc581b8d8acc1c9b8d08fb6c5.jpeg?generation=1613901899955782\&alt=media) ![](https://1608391883-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MU31qUdgJWnjhqnXmr2%2Fsync%2Fefc8a9d3e7db93e963a1c1d29bd419b2183987cf.jpeg?generation=1613901901089474\&alt=media) ``` /** * 时间格式化 * @param date */ $mdDateLocaleProvider.months = ['一月', '二月', '三月','四月','五月','六月','七月','八月','九月','十月','十一月','十二月']; $mdDateLocaleProvider.shortMonths = $mdDateLocaleProvider.months; $mdDateLocaleProvider.days = ['星期日','星期一', '星期二', '星期三','星期四','星期五','星期六']; $mdDateLocaleProvider.shortDays = ['日','一', '二', '三','四','五','六']; $mdDateLocaleProvider.monthHeaderFormatter = function(date) { return date.getFullYear() + ' ' + $mdDateLocaleProvider.shortMonths[date.getMonth()]; }; $mdDateLocaleProvider.formatDate = function(date) { return date? moment(date).format('YYYY-MM-DD') : ''; }; ``` ### 4.3 登录用户名密码存储于cookies * 页面样式： ![](https://1608391883-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MU31qUdgJWnjhqnXmr2%2Fsync%2F8b1f5e39b0d1a25255d7c2b6ba85f16d13971b45.jpeg?generation=1613901900758958\&alt=media) * cookies存储位置： ![](https://1608391883-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MU31qUdgJWnjhqnXmr2%2Fsync%2F73e14c2112b3f8a561acbcc5235802a5237ad021.jpeg?generation=1613901900944221\&alt=media) * 处理方法： HTML： ![](https://1608391883-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MU31qUdgJWnjhqnXmr2%2Fsync%2F67574dcaef28123dc84acefc5bc9bdddc53a40d4.jpeg?generation=1613901900635315\&alt=media) JS： ![](https://1608391883-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MU31qUdgJWnjhqnXmr2%2Fsync%2F36b5d70b5a5d33f5ed5e8a2bdd724d7ccb073422.jpeg?generation=1613901900718706\&alt=media) ![](https://1608391883-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MU31qUdgJWnjhqnXmr2%2Fsync%2F92b1f9af12287cc0024b8b81e5fbcc066e4c539b.jpeg?generation=1613901900654368\&alt=media) * 核心代码 ``` /** * 存储cookie */ if(vm.isRemember){ vm.setCookie('user',vm.form.loginId,7); //保存帐号到cookie，有效期7天 vm.setCookie('pwd',vm.form.password,7); //保存密码到cookie，有效期7天 }else{ vm.setCookie('user',"",-1); //清除cookie vm.setCookie('pwd',"",-1); //清除cookie } ``` ## 5 其他常用命令提示 ### 5.1 引入ui-grid组件，为解决打包部署后框架文字变为韩文问题，在部署脚本写了替换css的命令。 ### 5.2 切换分支命令(开发分支：dev) ``` git checkout -b dev git branch --set-upstream dev remotes/origin/dev ``` ### 5.3 安装插件： * 查看插件是否存在于bower库 ``` bower search [插件名称] ``` * 安装插件并存储于项目依赖 ``` bower install [插件名称] --save bower install [插件名称] -S ``` * 安装插件并存储于开发依赖 ``` bower install [插件名称] --save-dev bower install [插件名称] -D ``` ### 5.4 打包项目： ``` gulp build 打包 ``` ## 6 代码结构 ``` vm.setSearchParams = function(resetFlag){ var deferred = $q.deferred(); $q.all([1, 2]).then(function(values){ vm.search.filters = { 'table': { 'column': { 'in': values[0] } } } }, function(err){ }); Restangular().then(function(res){ deferred.resolve(res.data); }, function(err){ deferred.reject(); }); return deferred.promise; }; vm.search = function(){ vm.setFilters().then(function(data){ vm.process(data); }, function(err){ console.log(err); }); Restangular().then(function(res){ vm.process(data); }) }; vm.process = function(data){ }; ``` ``` vm.item = {}; vm.loadItem = function(id){ Restangular().then(function(res){ vm.item = res.data; }) }; vm.clearBeforeUpdate = function(){ }; vm.updateItem = function(){ vm.clearBeforeUpdate(); Restangular().post() }; vm.columnOnChange = function(value){ }; ```