前端框架文档 v3.14

前端框架说明手册（内部培训材料）1准备1.1基础知识详见vue2官网，准备已经下载好的Node.js安装包（按照不同的系统，下载不同的安装文件），安装后使用node-v/npm-v查看node和npm的版本，如果npm版本低于3.4建议安装最新版本的node.js运行环境。Step2:解压项目模板文件Step3:进入client文件夹，解压已准备好的node_modules文件到当前目录Step4：npminstallStep5：npmrundev1.2.2外网环境Step1:下载Node.js安装包（按照不同的系统，下载不同的安装文件），安装后使用node-v/npm-v查看node和npm的版本，如果npm版本低于3.4建议安装最新版本的node.js运行环境。Step2:(1)在cmd中进入项目client文件夹，(2)执行命令：npmconfigsetregistry(3)执行命令npmconfiglist观察下载源是否更换为国内镜像源（加快下载速度）(4)执行npminstall等待所有包安装完成(5)如果单个的包需要安装，请执行npminstallpackageName--saveStep3:npmrundev1.2项目结构介绍开发人员主要关注的目录：src、static、services下的moduleServices.js、router.config.js其中，build:Config:src是开发的主要目录。static是项目静态文件的放置目录、moduleServices.js主要是配置服务,router.config.js配置路由.2入门2.1Helloworld（标题模块没有子模块的情况下）一开始，页面是空的：如图以编写helloworld为例，分为以下几个步骤：2.1.1创建当前模块的文件夹在src/modules目录下创建模块文件夹，之后属于该模块的组件文件都在此目录下建立，方便管理，比如我们创建测试模块2.1.2配置模块服务client/src/services/moduleService.js中配置服务，在页面创建测试标题模块，配置模块服务详细请参考（参考2.3），配置服务的时候只需要严格按照格式来增加数据，配置模块在格式如下代码为：v1arstr={'functions':{'function':[{'id':'100000010000','name':'测试','type':'folder','description':'测试','url':'/test'}]}}页面效果为：2.1.3在模块中添加组件在刚才我们创建的test目录下面我们新建一个vue组件文件，取名为hello.vue2.1.4编写hello.vue组件，代码如下：2.1.5挂载组件将hello.vue挂载在测试模块下面（参考2.2）第一步：导入组件，如：第二步：配置路由常量到此，页面效果如图：2.2完整开发流程(标题模块+子模块)一开始，页面依然是空的：如图仍以编写helloworld为例，分为以下几个步骤：2.2.1创建当前模块的文件夹在src/modules目录下创建模块文件夹，之后属于该模块的组件文件都在此目录下建立，方便管理，比如我们创建测试模块2.2.2创建当前模块的主入口文件index.vue(名字随意)主入口文件用于展示当前一级模块（即标题模块）下的二级模块、三级模块等等2.2.3编写主入口文件index.vue(名字随意)templateslider-layoutmount='/test'/slider-layout/templatescriptimportSliderLayoutfrom'../../ui/sliderlayout.vue'exportdefault{name:'test',components:{SliderLayout}}/scriptstylescoped/style此处SliderLayout为封装好的一个菜单组件，注意mount属性，后面的取值为挂载的路径。2.2.4在test目录下创建todolist.vueTodolist即将作为测试模块下的第一个子模块中的内容2.2.5编写todolist.vueTodolist组件实现了列表渲染的功能，里面的数据都由vue-resource发起http请求获得，对于展示数据的时候实现了分页的功能代码如下：templatedivclass=todolistulliv-for=subdataindataspanspanclass=title姓名：/span{{subdata.UserName}}/spanspanspanclass=title编号：/span{{subdata.Age}}/span/li/ulel-buttonsize=smallv-for=indexinpageArr@click=request(index){{index}}/el-button/div/templatescriptexportdefault{name:'todolist',data(){return{data:null,maxPage:null,pageArr:[],pageSize:7,url:'}},computed:{pageNums:function(){vari=1while(i=this.maxPage){this.pageArr.push(i)i=i+1console.log(this.pageArr)returnthis.pageArr}}},methods:{request:function(index){this.$http.get(this.url,{params:{pageSize:this.pageSize,pageIndex:index}}).then(function(response){this.data=response.data.Usersconsole.log(response)this.maxPage=response.data.TotalPage})}},mounted(){this.$http.get(this.url,{params:{pageSize:this.pageSize,pageIndex:1}}).then(function(response){this.data=response.data.Usersconsole.log(response)this.maxPage=response.data.TotalPagevari=1while(i=this.maxPage){this.pageArr.push(i)i++}console.log(this.pageArr)})}}/scriptstylescopedli{list-style:none;display:flex;}lispan{flex:1}ul{margin-bottom:20px;}.todolist{padding:20px;border:1pxsolid#ddd;margin:20px10%;}.title{font-weight:bold;margin-right:5px;}/style关于vue-resource请求后台数据的方法以及请求成功后的数据处理请参照2.10章节2.2.6配置模块服务配置文件为：client/src/services/moduleService.js代码如下：varstr={'functions':{'function':[{'id':'100000020000','name':'测试','type':'folder','description':'测试','url':'/test','functions':{'function':[{'id':'100000020100','name':'demo',//将测试模块下的第一个子模块取名为demo'type':'folder','description':'demo','url':'/test/todolist'//路径必须为该模块对应的组件路径}]}}]}}2.2.7配置路由vartodolist=resolve=require(['./modules/test/todolist'],resolve)varindex=resolve=require(['./modules/test/index.vue'],resolve)constroutes=[{path:'/test',component:index,//子模块的路由配置在children下面children:[{path:'test',component:test}]}]每个组件都需要导入之后才能配置在路由常量里面此时只有同时配置好服务和路由之后才能得到最后的效果，如下图：2.3基本路由在client/src/router.config.js中配置路由，配置路由的目的在于清楚当前模块所在的路径。配置路由分为以下三个步骤：1.导入所有依赖，如下：ImportVuefrom‘vue’;importVueRouter，from'vue-router’;2.导入组件，（此文件中用到的所有组件都需经过导入组件这一步）如下：varhome=resolve=require(['./modules/home.vue'],resolve)3.配置路由常量，如下：constroutes=[{path:'/home',component:home}]4.在有子模块的情况下，配置路由为：constroutes=[{path:'/test',component:testModule,/*加入children*/children:[/*加入oneModule依然需要经过第二步导入才可以被引用*/{path:'one',component:oneModule},{path:'/',redirect:'one'}]}以上三步就表示home.vue这个组件的路由归属于path为’/home’的模块注意：路由常量routes中component属性后面的组件，都需要经过第二步的导入组件才能生效2.4模块在client/src/services/moduleService.js中配置服务，配置服务的目的在于渲染出标题模块以及标题模块下面的子模块。配置服务只有一个步骤：1.添加或删除模块只需操作str中的json数据即可，最好不要改动文件中的其他内容如：varstr={'functions':{'function':[{'id':'100000020000','name':'组织机构','type':'folder','description':'组织机构',//一级模块'url':'/organization','functions':{'function':[{'id':'100000020100','name':'管理',//二级模块'type':'folder','description':'管理','url':'/organization/management','functions':{'function':[{'id':'100000020101','name':'管理1-1',//三级模块'type':'folder','description':'管理1-1','url':'/organization/management'},{'id':'100000020102','name':'功能2-2','type':'folder','description':'功能2-2