技术选型:
前端
- Vue全家桶
- 基于 panjiacheng 的项目
vue-element-admin项目打造 - 开发者会 html, css, js, vue就行
服务端
- Node (不要小瞧js写服务端的能力)
- 基于蚂蚁金服的
Egg.js企业级框架 - 开发者了解 node 生态 及 koa框架大致原理就可
所以环境及软件
环境
- node.js 环境安装 详细请
Google一下 随便搜了偏文章 cnpm全局安装淘宝镜像, 避免某些插件被墙
设计软件
widows 使用 axure , mac sketch
编辑器
只推荐
vscode编辑器在安装相应插件
ctrl+shift+xChinese (Simplified) Language Pack for Visual Studio CodeVetur, Vue2 SnippetsPath Intellisense, JavaScript (ES6) code snippets, HTML Snippets, HTML CSS Support , Highlight Matching Tag, ESLint, Beautify, Auto Rename Tag, Auto Close Tag配置编辑器自动保存格式化
ctrl + ,或者编辑
json
{
"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 毫无疑问的

前端 展示页面
会html css js 就不扯了
前端 中后台
github 搜一下 vue-element-admin clone下来就好了
后端
初始化egg.js项目
