技术选型:

前端

• Vue全家桶
• 基于 panjiacheng 的项目 vue-element-admin项目打造
• 开发者会 html, css, js, vue就行

服务端

• Node (不要小瞧js写服务端的能力)
• 基于蚂蚁金服的 Egg.js 企业级框架
• 开发者了解 node 生态 及 koa框架大致原理就可

所以环境及软件

环境

• node.js 环境安装 详细请Google一下 随便搜了偏文章 (opens new window)
• cnpm全局安装淘宝镜像, 避免某些插件被墙

设计软件

widows 使用 axure , mac sketch

编辑器

• 只推荐 vscode编辑器

• 在安装相应插件ctrl+shift+x

• Chinese (Simplified) Language Pack for Visual Studio Code

• Vetur, Vue2 Snippets

• Path Intellisense, JavaScript (ES6) code snippets, HTML Snippets, HTML CSS Support , Highlight Matching Tag, ESLint, Beautify, Auto Rename Tag, Auto Close Tag

• 配置编辑器自动保存格式化 ctrl + ,或者编辑

{
    "vetur.format.defaultFormatter.html": "js-beautify-html",
    "vetur.format.defaultFormatter.js": "vscode-typ=script",
    "vetur.format.defaultFormatterOptions": {
        "js-beautify-html": {
            "wrap_attributes": "auto"
        },
        "prettyhtml": {
            "printWidth": 100,
            "singleQuote": false,
            "wrapAttributes": false,
            "sortAttributes": false
        }
    },
    "[html]": {
        "editor.defaultFormatter": "vscode.html-language-features"
    },
    "git.autofetch": true,
    "editor.codeActionsOnSave": {
        "source.fixAll.eslint": true,
    },
    "search.exclude": { //配置在搜索中排除的文件和文件夹的 glob 模式。已经继承 #files.exclude# 设置的所有 glob 模式。可在此处阅读有关 glob 模式的详细信息。
        "**/node_modules": true,
        "**/bower_components": true,
        "**/dist": true
    },
    // "eslint.autoFixOnSave": true, //开启或关闭“自动修复”功能。
    "eslint.options": { //eslint options对象，提供从命令行执行时通常传递给eslint的arg
        "extensions": [
            ".js",
            ".vue"
        ]
    },
    "eslint.validate": [ //应该由ESLint验证的语言数组
        "javascript",
        {
            "language": "vue",
            "autoFix": true
        },
        "html",
        "vue"
    ],
    "[vue]": {
        "editor.defaultFormatter": "octref.vetur"
    },
    "[javascript]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    }
}

产品设计

window 使用 axure 毫无疑问的

resource.rp (opens new window)

前端 展示页面

会html css js 就不扯了

前端 中后台

github 搜一下 vue-element-admin clone下来就好了

后端

初始化egg.js项目

看文档 (opens new window)