@ys930126 2018-04-26T17:09:12.000000Z 字数 3360 阅读 86

51交付VueJs 前端开发须知

Vue 51交付 Dev

一.写在前面

1.最终确稿使用 Element-ui + Vue.js

不用Angular和React的原因,Vue js 的学习曲线不如其他陡峭
不用 Iview-UI 的原因，element 的github Star 比较多
不再额外引入bootStrap的原因：为了符合前端代码规范和视觉统一，在开发中不建议再额外引入第三方样式库
使用 Git 进行源代码管理，用 码云 Gitee 托管代码 (地址见下方准备工作)

2.主要架构参考使用开源框架 vue-element-admin

https://github.com/PanJiaChen/vue-element-admin
github Star 9K
（原定使用 Admin-LTE + Vue.js 自建前端架构，后决定采用市场成熟框架）
框架文档
https://panjiachen.github.io/vue-element-admin-site/#/zh-cn/README

3. 技术栈

环境 node.js npm
基于 ES2015+、vue、vuex、vue-router and element-ui
编辑器推荐使用 VS Code
请求接口基于 axios
页面动画使用animate
网页进度条使用 NProgress
状态储存使用 Vuex 本地缓存使用 LocalStonge Cookies
富文本编辑器采用 quill-editor

使用 npm 安装 cnpm install vue-quill-editor
main.js 中引入
import VueQuillEditor from 'vue-quill-editor'
Vue.use(VueQuillEditor)

4.规定

1.路由根据角色后端返回与左侧导航合并
2.视图、接口单独使用js文件封装
（随着业务的迭代，模块还会会越来越多。
所以这里建议根据业务模块来划分 views，并且将views 和 api 两个模块一一对应，从而方便维护）

5.准备工作

安装 Node.js 、npm淘宝镜像，安装 git 版本控制工具
从gitee 服务器获取代码
将本地Git SSH 公钥与远端关联
git 地址： https://gitee.com/yksgit/51jf_vue.git

6.文件目录

7.使用注意

针对需要使用Excel下载插件报错的处理，
安装一下三个依赖包：
cnpm install -S file-saver
cnpm install -S xlsx
cnpm install -D script-loader

8.布局

Views中外层使用 class="app-container"
将整体内容padding:20px

二.重要模块介绍

1.登录

登录处理流程
1.登录页面键入用户名和密码点击登录按钮触发 (Vuex)store登录事件
（拿到 Token 用户基础信息和服务地市列表）
2.登录成功后获取用户能操作的服务地市显示到页面地市选择
（根据服务地市列表，将Token带入所选服务地市域名执行二次登录）
3.用户选择服务地市点击确定执行服务地市的登录操作
（用户已在指定服务地市登录成功）
4.通过用户的Token在后台服务器拉去可操作的导航数据
（用户可操作的菜单列表将在左侧显示，同时注册路由）
5.完成所有登录流程

三.后端返回接口要求

1.认证服务器返回

response{
data :{
    token:'ThisIsTokenKey',
    userInfo:{userName:'张三'，Mobile:'18822825555',...}
    TargetServer:[{TargetName:'广东电信',TaegetCode:'GD',...}]
}
}

2.导航接口要求（权限&路由）

Tips:需要注意以下几点
path：父节点提供父目录名称，子节点只需提供子目录名称，无需在子节点填写绝对路由
path 名称必须和component 中完全吻合
path 父目录添加斜杠 /
示例：

response {
data :{
         {
        title: '分配管理',
        icon: 'fa-bell-o',
        name: 'Participant',
        path: '/Participant/My',
        children: [{
          path: '/Participant/My',
          title: '我分配的',
          name: 'ParticipantMy',
          keepAlive: true,
          component: 'participant/myparticipant/index'
        },
        {
          path: '/Participant/Task',
          title: '任务分配',
          name: 'ParticipantTask',
          keepAlive: true,
          component: 'participant/par_user_task/index'
        }
        ]
      }
    }
}

四.组件调用

1.datagrid

2.flowList

3.sideBar

五.附言

1.git 从无到有

1.安装 git
2.本地注册git -global 你的用户名和邮箱
3.生成 SSH 命令 ssh-keygen -t rsa -C "1131392397@qq.com"
4.在你想要建立项目的地方新建一个根目录文件夹如 ProjectFile
5.文件夹内右键点击 git Bash Here 打开命令窗口
6.窗口内键入 git init 初始化git
7.键入 git remote add origin git@github.com:ys930126/51jf_vue.git 获取远程版本文件
此时已经完成本地与远程服务器的版本库连接
git 常用操作
1. 添加全部更改 git add . 注意最后面有个点
2. 签入全部更改 git commit -m "这里务必填写更改的内容消息"
3. 将更改Push到云端 git push origin master 如果远端服务器被自定义名称 origin 改成你自定义的名称
4. 从远端服务器获取更改 git pull origin master

2.Eslint VSCode 配置

在使用编辑器开发的时候，务必使用EsLint插件来检查代码规范
使用前在VSCode 中增加如下配置

{
     // 以下是按照ESLint格式化代码
     "vetur.format.defaultFormatter.js": "vscode-typescript",
     "javascript.format.insertSpaceBeforeFunctionParenthesis": true,
     "editor.quickSuggestions": {
       "strings": true
     },
     "editor.tabSize": 2,
     "eslint.validate": [
       "javascript",
       "javascriptreact",
       "html",
       "vue",
       {
         "language": "html",
         "autoFix": true
       }
     ],
     // "files.autoSave": "onFocusChange",
     // "vetur.validation.template": false,
     // // 防止格式化代码后单引号变双引号
     // "prettier.singleQuote": true,
     "files.autoSave": "afterDelay",
     "files.autoSaveDelay": 1500,
     // "git.confirmSync": false
     // 配置是否从更新通道接收自动更新。更改后需要重启。
     "update.channel": "none",
     "git.ignoreMissingGitWarning": true,
    "eslint.autoFixOnSave": true,
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    {
      "language": "html",
      "autoFix": true
    },
    {
      "language": "vue",
      "autoFix": true
    }
  ]
}