文章目录如下：项目效果预览地址项目开源代码基于vue模块化开发后台系统-基于vue模块化开发后台系统准备工作-基于vue搭建项目vuemodule现代化开发后台系统-权限控制前言本文主要是为了学习。练习vue的操作。可能会有一些缺点。首先明确功能：要有权限控制，有session录音，不能使用第三方插件，自定义常用组件在开始编码之前，准备一些项目需要的工具。俗话说：工欲善其事，必先利其器。由于本文没有Mock.js后台支持，那么问题来了，如何模拟数据呢？打算一个一个写模拟的json数据吗？这里推荐使用mock.js来模拟数据。如果想更真实的实现跨域数据，可以使用easy-mock。看一下官方效果图（下图）。具体用法请看官方ESLint妈妈常说，要养成好习惯！所以~~代码规范必不可少。我使用eslint，它安装在最新版本的SublimeText中。如果你使用vue-cli来构建我们的项目，那么在初始化的时候，会提示是否安装standard和airbnb。lint规范（我选择第一种），如果当时没有选择项目，没关系，运行eslint--init（前提是你安装正确，否则请自行解决或谷歌），以及然后是.eslintrc.js文件，由于默认提供的规范太少，我自己加了一些，0表示关闭，1表示警告，2表示开启，如下"rules":{"no-alert":0,//禁止使用alertconfirm提示"no-array-constructor":2,//禁止使用数组构造函数"no-bitwise":0,//禁止使用位运算符"no-caller":1,//禁止使用arguments.caller或arguments.callee"no-catch-shadow":2,//禁止与外部作用域变量同名的catch子句参数"no-class-assign":2,//禁止给类赋值"no-cond-assign":2,//禁止在条件表达式中使用赋值语句"no-console":1,//禁止使用console"no-const"-assign":2,//禁止修改const声明的变量"no-constant-condition":2,//禁止在条件中使用常量表达式if(true)if(1)"no-continue":0,//禁止使用continue"no-control-regex":2,//禁止在正则表达式中使用Controlcharacter"no-debugger":2,//禁止使用debugger"no-delete-var":2,//不能对用var"no-div-regex"声明的变量使用删除运算符:1,//不能使用看起来像除法的正则表达式/=foo/"no-dupe-keys":2,//在重复键中arenotallowedwhencreatingobjectliterals{a:1,a:1}"no-dupe-args":2,//函数参数不能重复"no-duplicate-case":2,/caseinswitch标签不能repeated"no-else-return":0,//如果if语句中有return，后面不能跟else语句"no-empty":2,//block语句中的内容不能为空"no-empty-character-class":2,//正则表达式中[]的内容不能为空"no-empty-label":0,//禁止使用空标签"no-eq-null":2,//禁止对null使用==或!=运算符"no-eval":1,//禁止使用eval"no-ex-assign":2,//禁止赋值"no-extend-native”到catch语句中的异常参数:2,//禁止扩展原生对象“no-extra-bind”:2,//禁止不必要的函数绑定“no-extra-boolean-cast”:2,//禁止不必要的bool转换"no-extra-parens":1,//禁止不必要的括号"no-extra-semi":2,//禁止多余的冒号"no-fallthrough":1,//禁止开关穿透"no-floating-decimal":2,//禁止在浮点数中省略0.53."no-func-assign":2,//禁止重复函数声明"no-implicit-coercion":1,//禁止隐式转换"no-implied-eval":2,//禁止使用隐式eval"no-inline-comments":0,//禁止内联注释"no-inner-declarations":[2,"functions"],//禁止在块语句中使用声明（变量或函数）"no-invalid-regexp":2,//禁止无效的正则表达式"no-invalid-this":2,//禁止无效的this，只能在构造函数、类、对象字面量中使用"no-irregular-whitespace":2,//不能有不规则空格"no-iterator":2,//禁止使用__iterator__属性"no-label-var":2,//标签名不能与var变量声明同名"no-labels":0,//禁用标签声明"no-lone-blocks":2,//禁止不必要的嵌套块"no-lonely-if":0,//禁止insideelsestatement只有if语句"no-loop-func":1,//禁止在循环中使用函数（如果没有引用外部变量，不能形成闭包）"no-mixed-requires":[0,false],//声明类型不能bemixedwhendeclaring"no-mixed-spaces-and-tabs":[2,false],//禁止混合制表符和空格"linebreak-style":[0,"windows"],//换行样式"no-multi-spaces":1,//不能使用额外空格"no-multi-str":2,//字符串不能用\包裹"no-multiple-empty-lines":[1,{"max":2}],//空行最多不能超过2行"no-native-reassign":2,//Native对象不能被改写"no-negated-in-lhs":2,//在运算符中可以左边没有！"no-nested-ternary":0,//禁止使用嵌套三元操作"no-new":1,//禁止使用new构造实例后不赋值"no-new-func":1,//禁止使用newFunction"no-new-object":2,//禁止使用newObject()"no-new-require":2,//禁止使用newrequire"no-new-wrappers":2,//禁止使用使用new创建wrapper实例，newStringnewBooleannewNumber"no-obj-calls":2,//不能调用内置的全局对象，如Math()JSON()"no-octal":2,//禁止使用八进制数"no-octal-escape":2,//禁止使用八进制转义序列"no-param-reassign":0,//禁止参数重新赋值"no-path-concat":0,//节点__dirname或__filename不能用于路径拼接"no-plusplus":0,//禁止使用++,--"no-process-env":0,//禁止使用process.env"no-process-exit":0,//禁止使用process.exit()"no-proto":2,//禁止使用__proto__属性"no-redeclare":2,//prohibitrepeateddeclarationofvariables"no-regex-spaces":2,//禁止在正则表达式字面量中使用多个空格/foobar/"no-restricted-modules":0,//如果指定模块被禁用，会报错使用"no-return-assign"时报错:1,//返回语句中不能有赋值表达式"no-script-url":0,//不使用javascript:void(0)"no-self-compare":2,//不能比较自身"no-sequences":0,//逗号运算符是禁止的"no-shadow":1,//外层作用域的变量不能和a同名其包含范围内的变量或参数"no-shadow-restricted-names":2,//严格模式规定的受限标识符在声明"no-spaced-func"时不能作为变量名:2,//必须有调用函数时函数名和()之间不能有空格"no-sparse-arrays":2,//禁止稀疏数组,[1,,2]"no-sync":0,//nodejs禁止同步方法“无三元”：0,//不要使用三元运算符"no-trailing-spaces":1,//行尾后不要有空格"no-this-before-super":0,//不能在前面使用callingsuper()orsuper"no-throw-literal":2,//禁止抛出文字错误throw"error";"no-undef":1,//不能有未定义的变量"no-undef-init":0,//变量初始化时不能直接赋值给undefined"no-undefined":0,//未定义不能使用"no-unexpected-multiline":2,//避免多行表达式"no-underscore-dangle":0,//标识符不能以_开头或结尾"no-unneeded-ternary":0,//禁止不必要的嵌套varisYes=answer===1?真假;"no-unreachable":2,//不能有不可执行的代码"no-unused-expressions":2,//禁止无用的表达式"no-unused-vars":[1,{"vars":"all","args":"after-used"}],//不能有声明后未使用的变量或参数"no-use-before-define":2,//不能在未定义之前使用"no-useless-call":2,//禁用不必要的调用并应用"no-void":2,//禁用void运算符"no-var":0,//禁用var，将"no-warning-comments"替换为let和const:[1,{"terms":["todo","fixme","xxx"],"location":"start"}],//无警告注释"no-with":2,//禁用with"array-bracket-spacing":[2,"never"],//非空数组是否允许额外空格"arrow-parens":0,//箭头函数包含在括号中"arrow-spacing":0,//=>前/后方括号"accessor-pairs":0,//在对象中使用getter/setter"block-scoped-var":0,//在块语句中使用var"brace-style":[1,"1tbs"],//Bracestyle"callback-return":1,//避免多次调用回调"camelcase":1,//强制驼峰casenaming"comma-dangle":[2,"never"],//对象字面量项末尾不能有逗号"comma-spacing":0,//逗号前后的空格"comma-style":[2,"last"],//逗号样式，换行时行首或行尾"complexity":[0,11],//循环复杂度"computed-property-spacing":[0,"never"],//计算出的键名是否允许有"consistent-return":0,//"consistent-this"是否允许在return后省略:[2,"that"],//thisalias"constructor-super":0,//非派生类不能调用super，派生类必须调用super"curly":[2,"all"],//必须在if()中使用{}{}"default-case":2,//switch语句最后必须有一个默认的"dot-location":0,//对象访问器的位置，无论是行首还是行尾包装时"dot-notation":[0,{"allowKeywords":true}],//避免不必要的方括号"eol-last":0,//文件以单个换行符结尾"eqeqeq":2,//Mustusecongruence"func-names":0,//函数表达式必须有名字"func-style":[0,"declaration"],//函数风格，规定只有函数声明/函数表达式可以被使用“generator-star-spacing":0,//生成器函数前后的空格*"guard-for-in":0,//forin循环应该用if语句过滤"handle-callback-err":0,//nodejs处理错误"id-length":0,//变量名长度"indent":0,//缩进样式"init-declarations":0,//声明时必须赋初值"key-spacing":[0,{"beforeColon":false,"afterColon":true}],//对象字面量中冒号前后的空格"lines-around-comment":0,//行"max-"前后的注释depth":[0,4],//嵌套块深度"max-len":[0,80,4],//字符串的最大长度"max-nested-callbacks":[0,2],//回调嵌套深度"max-params":[0,3],//函数最多只能有3个参数"max-statements":[0,10],//最多有几个语句function"new-cap":2,//函数名第一行大写必须带new调用，第一行小写必须不带new调用"new-parens":2,//Parentsmustbeaddedwhennew"newline-after-var":2,//变量声明后是否需要空行"object-curly-spacing":[0,"never"],//是否允许不必要的空格大括号内"object-shorthand":0,//强制对象字面量缩写语法"one-var":0,//连续声明"operator-assignment":[0,"always"],//赋值运算符+=-=what"operator-linebreak":[2,"after"],//换行时运算符是在行尾还是行首"padded-blocks":0,//是否一个块语句中行首尾都需要空行"prefer-const":0,//const首选"prefer-spread":0,//首选扩展操作"prefer-reflect":0,//更喜欢Reflect的方式"quotes":[1,"single"],//引用类型``""''"quote-props":[2,"always"],//对象字面量中的属性名是否必须用单引号"radix":0,//parseInt必须指定第二个参数"id-match":0,//命名检测"require-yield":0,//生成器函数必须有yield"semi":[2,"always"],//语句在末尾强制使用分号"semi-spacing":[0,{"before":false,"after":true}],//分号前后的空格"sort-vars":0,//变量声明时排序"space-after-keywords":[0,"always"],//是否有空格关键字"space-before-blocks"之后:[0,"always"],//不换行开始的块{前面是否有空格"space-before-function-paren":[0,"always"],//函数定义括号前面要不要空格"space-in-parens":[0,"never"],//括号里要不要空格？"space-infix-ops":0,//是否要在中缀运算符周围留空格？space"space-return-throw-case":0,//returnthrowcase"space-unary-ops":[0,{"words":true,"nonwords":false}后面是否加空格],//一元运算符前后是否加空格"spaced-comment":0,//注释样式中是否加空格"strict":2,//使用严格模式"use-isnan":2,//比较时禁止使用NaN，只能使用isNaN()"valid-jsdoc":0,//jsdoc规则"valid-typeof":2,//必须使用合法的typeof值"vars-on-顶部”：0,//var必须放在作用域的顶部"wrap-iife":[2,"inside"],//立即执行函数表达式的括号样式"wrap-regex":0,//正则表达式literal量是用括号括起来的"yoda":[2,"never"]//禁止Yoda条件}axios.js上面已经讲过模拟数据了，所以为了更贴近实际，我们还需要获取数据，由于我们用的是vue，网上说axios.js是最匹配的。点击查看更多API。值得一提的是它有一个拦截器功能，可以清楚的记录上一个函数中的session。collocation://添加请求拦截器axios.interceptors.request.use(function(config){//在发送请求之前做一些事情returnconfig;},function(error){//为请求错误做一些事情returnPromise.reject(error);});//添加响应拦截器axios.interceptors.response.use(function(response){//处理响应数据returnresponse;},function(error){//处理响应做错事returnPromise.reject(error);});NPMnpm是JavaScript世界中的包管理工具，是Node.js平台默认的包管理工具。使用这个工具可以帮助我们管理下载和管理项目所需的包。中文网、官网具体使用方法这里不再赘述。WebpackWebpack是一个前端资源加载/打包工具。它会根据模块的依赖关系进行静态分析，然后根据指定的规则为这些模块生成相应的静态资源。这里就不多说了，自己在网上多多搜索就可以了。总结以上准备工作，不仅可以在vue项目中使用，也可以在其他项目中使用。不要觉得没用，磨刀不误砍柴工，掌握了以后换其他项目就可以飞走了开发后台系统-基于vue模块化开发后台系统搭建项目-权限控制
