本文共 4107 字，大约阅读时间需要 13 分钟。

吐槽

最近才开始学node.js，第一次接触这种开发模式， 和以前web开发不一样, 但幸好自己学了一些vue， 看起来没有那么吃力， 慢慢了解把~。

Element-UI是结合vue的UI框架

Element是一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组

件库。

Element-UI官方站点：http://element.eleme.io/#/zh-CN/component/installation

启动

项目目录下打开命令窗口：npm run dev（执行对js打包并启动项目）

执行的是package.json中的js package.json文件（文件中有执行动作和依赖管理）

.........."scripts": {    "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",    "start": "npm run dev",    "unit": "jest --config test/unit/jest.conf.js --coverage",    "e2e": "node test/e2e/runner.js",    "test": "npm run unit && npm run e2e",    "lint": "eslint --ext .js,.vue src test/unit test/e2e/specs",    "build": "node build/build.js"  },  .........

浏览器输入：http://localhost:11000

page_list.vue（前端示例页面）

目前这个前端页面分为三部分

1、视图（template）（包含了Vue与Element-UI的语法） 2、js 3、css

page_list.vue页面引用的js文件

public.js文件我就不展示了， 避免看起来冗杂， 了解一下结构可好。

cms.js

//将public.js导入到命名为http的变量中(ES6标准)import http from './../../../base/api/public'import querystring from 'querystring'//将sysConfig导入到命名为sysConfig的变量中(CommonJS规范)let sysConfig = require('@/../config/sysConfig')let apiUrl = sysConfig.xcApiUrlPre;//定义方法， 请求服务端的页面接口export const page_list = (page, size, params)=>{    //返回一个Promise对象    return http.requestQuickGet("http://127.0.0.1:31001/cms/page/list/" + page + "/" + size);}

页面路由（把page_list.vue页面添加到路由）

// 引入 module/home/page/home.vue路径 完整的html页面 里面有视图有style和js// @ 代表src文件目录下 在webpack.base.conf.js可找到@的配置————'@': resolve('src'),// Home是将导入的文件的命名为Home//导入首页模板import Home from '@/module/home/page/home.vue';//导入page_listimport page_list from '@/module/cms/page/page_list.vue';export default [{    //父模块    //设置页面访问路径 如果 path: '/aa'  浏览器输入 http://localhost:11000/#/aa    path: '/huang',    //套用的模板名（首页模板）    component: Home,    //网页显示的字段    name: 'CMS',    //是否隐藏该模块    hidden: false,    //子模块（列表）    children:[      {        //点击该模块后导向的url        path:'/cms/page/list',         //模块名        name:'页面列表1',        //套用的模板（page_list）        component:page_list,        hidden:false      },      {        path:'/cms/page/list2',         name:'页面列表2',        component:page_list,        hidden:false      }    ]    // ,    // redirect: '/home',    // children: [    //   {path: 'home', component: Home}    // ]  }/*,  {    path: '/login',    component: Login,    name: 'Login',    hidden: true  }*/]

这个总路由文件才是统筹每个模块的Path属性， 然后添加到路由中！

//设置路由文件import Vue from 'vue';import Router from 'vue-router';Vue.use(Router);// 定义路由配置let routes = []let concat = (router) => {  routes = routes.concat(router)}// // 导入路由规则import HomeRouter from '@/module/home/router'import CmsRouter from '@/module/cms/router'// 合并路由规则concat(HomeRouter)concat(CmsRouter)export default routes;

node.js前端开发请求响应流程总结

1、在浏览器输入前端url

2、前端框架vue.js根据url解析路由，根据路由找到page_list.vue页面 3、首先执行page_list.vue中的钩子方法 4、在钩子方法中调用query方法。 5、在query方法中调用cms.js中的page_list方法 6、cms.js中的page_list方法通过axios请求服务端接口 7、采用proxyTable解决跨域问题，node.js将请求转发到服务端(http://localhost:31001/cms/page/list) 8、服务端处理，将查询结果响应给前端 9、成功响应调用then方法，在then方法中处理响应结果，将查询结果赋值给数据模型中的total和list变量。 10、vue.js通过双向数据绑定将list数据渲染输出。

---

Command JS规范：

module.exports 导出，然后用require导入

ES6规范：

模块功能主要由两个命令构成：export和import，export_default。export命令用于规定模块的对外接口，import命令用于输入其他模块提供的功能。

现在一般采用ES6规范

ES6规范：

export语法： 输出函数和给输出函数起别名 错误写法以及纠正 import语法： 不能直接改写输入进来的接口， 但可以改变这个对象的属性 模块整体加载

由于ES6的import语法规范有点多， 我就只展示了些个人认为常用基础的， 大家可以去下面的

全面了解一下ES6的规范。

相关文章， 更好了解其中的语法以及不同的规范标准

（这几篇文章我看了都蛮好理解的， 对于新手的我来说帮助了很多，上面的教程也是从里面来的）

转载地址：http://mfern.baihongyu.com/