开发者在Windows操作系统下使用这些Linux环境里的工具称为使用WAMP，也称为WAMP架构架构设计是人们对一个结构内的元素及元素间关系的一种主观映射的产物比如，Intel的IA-32架构，也称为“x86”架构，是一种设计规范本文我们将接着上篇Vue前端架构学习（一）来完成配置eslint、babel、postcss，希望能帮助到大家。一、配置eslint我们采用eslint--init的方式来创建eslintrc.js。对了，前提我们需要全局安装eslint：npmi-geslint。安装完全局eslint以后，我们在项目根目录使用eslint--init，我选择自定义的方式来规定eslint规则：?vue-constructgit:(master)?eslint--init?HowwouldyouliketoconfigureESLint?Answerquestionsaboutyourstyle?AreyouusingECMAScript6features?Yes?AreyouusingES6modules?Yes?Wherewillyourcoderun?Browser,Node?DoyouuseCommonJS?Yes?DoyouuseJSX?No?Whatstyleofindentationdoyouuse?Spaces?Whatquotesdoyouuseforstrings?Single?Whatlineendingsdoyouuse?Unix?Doyourequiresemicolons?No?Whatformatdoyouwantyourconfigfiletobein?(Usearrowkeys)?JavaScript当然，你可以按照自己喜欢，选择自己想要的方式，比如HowwouldyouliketoconfigureESLint?这个问题的时候，可以选择popular的规则，有Google、standard等规则，选择你想要的就好。我po下我的配置吧：//创建这个文件的话，本王推荐用eslint--init创建module.exports={env{browsertrue,nodetrue},///为了让eslint支持es7或更高的语法parser'babel-eslint'extendseslint:recommendedparserOptions{sourceTypemodule},plugins[///支持*.vuelinthtml],//rules{indent[error2],linebreak-style[errorunix],quotes[errorsingle],semi[errornever],///offor0-turntheruleoff//warnor1-turntheruleonasawarning(doesn’taffectexitcode)//erroror2-turntheruleonasanerror(exitcodeis1whentriggered)'no-debugger'process.env.NODE_ENV==='production'?2:0,'no-console'0,}};二、配置babel创建.babelrc文件，直接上配置：{presets[[env{targets{browsers[>1%last2versionsie>=10]},modulesfalse,useBuiltInstrue}]],plugins[transform-object-rest-spreadsyntax-dynamic-import]}配合webpack配置：{test:/.js$/,include:[resolve('app')],use:['babel-loader''eslint-loader']},我们使用的是babel-preset-env，我们知道，babel只是转译了高级语法，比如lambda，class，async等，并不会支持高级的api，所以需要babel-polyfill的帮忙。方便的是，我们只需要useBuiltInstrue，然后npm安装babel-polyfill，再在webpack配置中的entry带上babel-polyfill就好了。babel-preset-env的优点：通过targets来决定支持到那个哪些版本的语法就够了，不会过渡转译，可控性强通过useBuiltIns来支持babel-polyfill的按需加载，而不是一口气把整个包打入，因为其实我们只用到了很小一部分transform-object-rest-spread是为了支持consta={name:kitty,age:7};constb={.a}这种es7语法。syntax-dynamic-import是为了支持constHome=()=>import('/views/home')这种语法，达到按需分割、加载的目的。三、配置postcss创建postcss.config.js文件，上配置：module.exports={plugins:[require('autoprefixer')],//配置autoprefixbrowsers:[>1%last2versionsie>=10]}总结这篇不多，就做了三件事，eslint、babel、postcss。前面的话本文将对前端架构遗漏的知识点进行补充说明，包括文档输出、系统分解、组件提取和发布优化这四个部分文档输出1、在多人协作过程中会存在一些问题:a、文档制定的写作要求比较高,要有结构化,逻辑清晰,写得好,写得快,还要注意排版才能适合他人阅读;b、系统比较复杂文档篇幅会很长,达到几百页以上难以花过长时间通篇阅读,照成很多细节一带而过;c、规范能够满足需求不一定符合开发逻辑,制定者需要与开发人员协商;d、既要满足需求又要满足开发者的阅读;e、措词的歧义性,个人理解上有差异,丢三落四,内容不完整,出现错别字等等;2、在后续工作与复用方面，也会存在问题:a、难以形成最终版本的规范,后续需要不断修改再修改,修改会给后续人员带来额外的开销;b、如果需求发生变化需要重新设计规范,软件的体系结构也需要大大小小的修改;c、规范的重用性与制定者的设计水平息息相关;d、复用后的文档同样难免会出现丢三落四,内容遗漏,涵盖原有设计未被修改或未删除等问题;系统分解在实际开发中，对系统进行分解的难点和需要考虑的问题如下:1、分解的主要难点在于怎么拆分,拆分的是否合理;2、各个业务功能都有联系,从哪里进行拆分?3、拆分的模块可不可以再拆分?4、分解的粒度是否合理,每个模块都有各自的细分,拆分到模块级别还是类级别?5、分解容易造成过渡分解或过早分解,增加成本还会带来风险;6、拆分的模块是否可以复用?7、分解后是否能够很好的集成?8、保证对交互稿做到100%的分解,并且不允许漏掉任何一个模块,稍有疏漏就会对后续开发造成影响;9、如何按照时间规定内完成分解,否则整体进度要延期;组件提取根据交互提取通用组件，需要进行以下操作1、把交互稿按照层次划分，提取相似的部分；2、再进一步划分，提取更小的组件；3、确保每个组件相对独立，和其它组件没有重复的地方；4、拆出来的组件尽可能简单，可以被重用；5、例如按钮，图标，分页，导航，菜单，列表，轮播图等等；6、将这些组件组合起来能够还原交互稿；发布优化项目发布时，需要进行以下优化1、文件缓存。配置超长时间的本地缓存，节省带宽，提高性能；采用内容摘要作为缓存更新依据，实现精确的缓存控制，同时实现资源的非覆盖式发布，保证平滑升级2、静态资源CDN部署，优化网络请求响应3、资源合并与优化。文件合并，模块化会导致HTTP请求大量增加；图片优化，包括图片压缩和雪碧图合并（貌似现在都流行用iconfont实现这块）等本文我们主要和大家分享Vue前端架构学习（一），这是一篇从零开始做Vue前端架构的分享，希望能帮助到大家。想想也已经做过不少架构的项目了，有基于vue，基于react，基于thinkPHP，基于laravel的。做多了，也就对现有的架构有各种想法，有好的，有坏的，总之，用起来还是不爽。vue-cli虽然可以很快地构建并使用，尤其是vue-cliv3.0，把webpack都封进@vue/cli的sdk里了，用起来更加干净、简洁。好了，介绍完毕，接下来，我就从零开始，一步一步建起前后端完全分离的前端架构了。步骤由于要介绍的很多，全写在一篇里，有些太长了。所以，我会分为：创建开发环境下的webpack配置文件配置eslint、babel、postcss创建项目文件、目录架构通过koa实现本地数据接口模拟创建发布环境下的webpack配置文件创建测试环境下的webpack配置文件、以及测试用例（TODO）自动初始化构建项目（TODO）这七篇来分别介绍。开发一、初始化项目创建项目文件夹我们就叫vue-construct吧初始化gitgitinit初始化npmnpminit创建项目文件为了能让webpack跑起来，而不是一口气只讲配置而不运行一下，那样未免有些空洞，所以我们先创建一点项目文件和目录。在这之前我们先安装两个包：vue、vue-router，npmi-Svuevue-router。我们将项目代码相关文件都放在名为app的文件夹下。我先都创建完，然后一个个介绍。├──app│├──app.vue│├──common││├──img││├──js││└──scss│├──index.html│├──index.js│├──router││└──index.js│└──views│└──home│└──index.vue├──.gitignore├──package-lock.json├──package.json└──webpack.config.jsnode_modules的话就忽略了。文件/文件夹用途app.vue作为vue的主文件common里面放公共的代码index.html页面模板文件index.js项目主入口文件router放vue对应的router文件views放视图文件.gitignore忽略node_module咱们暂且不关系这些文件里的具体代码是什么，等webpack配置完再说。二、配置webpack.config.js安装一系列的包：为了webpack的运行，需要安装webpackwebpack-dev-server为了处理vue单页文件，安装：vue-loader为了处理scss文件并从js中抽离，安装：node-sassstyle-loadercss-loadersass-loadervue-style-loaderpostcsspostcss-loaderautoprefixerextract-text-webpack-plugin为了处理图片和字体文件，安装：file-loaderurl-loader为了支持高级语法-babel，安装：babelbabel-loaderbabel-plugin-syntax-dynamic-importbabel-plugin-transform-object-rest-spreadbabel-polyfillbabel-preset-env为了验证代码格式-eslint，安装：eslinteslint-loadereslint-plugin-htmlbabel-eslint配置webpack.config.js文件constwebpack=require('webpack')constpath=require('path')constHtmlWebpackPlugin=require('html-webpack-plugin')constFriendlyErrorsPlugin=require('friendly-errors-webpack-plugin')//为了抽离出两份CSS，创建两份ExtractTextPlugin//base作为基础的css，基本不变，所以，可以抽离出来充分利用浏览器缓存//app作为迭代的css，会经常改变constisProduction=process.env.NODE_ENV==='production'constExtractTextPlugin=require('extract-text-webpack-plugin')constextractBaseCSS=newExtractTextPlugin({filename:'static/css/base.[chunkhash:8].css'allChunks:true,disable:!isProduction//开发环境下不抽离css})constextractAppCSS=newExtractTextPlugin({filename:'static/css/app.[chunkhash:8].css'allChunks:true,disable:!isProduction//开发环境下不抽离css})//减少路径书写functionresolve(dir){returnpath.join(__dirname,dir)}//网站图标配置constfavicon=resolve('favicon.ico')//__dirname:总是返回被执行的js所在文件夹的绝对路径//__filename:总是返回被执行的js的绝对路径//process.cwd():总是返回运行node命令时所在的文件夹的绝对路径constconfig={//sourcemap模式devtool:'cheap-module-eval-source-map'//入口entry:{app:['babel-polyfill'//这里是配合babel-present-env导入的动态babel-polyfill,因此npm需dev依赖resolve('app/index.js')]},//输出output:{path:resolve('dev'),filename:'index.bundle.js'},resolve:{//扩展名，比如import'app.vue'扩展后只需要写成import'app'就可以了extensions:['js''vue''scss''css'],//取路径别名，方便在业务代码中importalias:{api:resolve('app/api/'),common:resolve('app/common/'),views:resolve('app/views/'),components:resolve('app/components/'),componentsBase:resolve('app/componentsBase/'),directives:resolve('app/directives/'),filters:resolve('app/filters/'),mixins:resolve('app/mixins/')}},//loaders处理module:{rules:[{test:/.js$/,include:[resolve('app')],loader:['babel-loader''eslint-loader']},{test:/.vue$/,exclude:/node_modules/,loader:'vue-loader'options:{extractCSS:true,loaders:{scss:extractAppCSS.extract({fallback:'vue-style-loader'use:[{loader:'css-loader'options:{sourceMap:true}},{loader:'postcss-loader'options:{sourceMap:true}},{loader:'sass-loader'options:{sourceMap:true}}]})}}},{test:/.(css|scss)$/,use:extractBaseCSS.extract({fallback:'style-loader'use:[{loader:'css-loader'options:{sourceMap:true}},{loader:'postcss-loader'options:{sourceMap:true}},{loader:'sass-loader'options:{sourceMap:true}}]})},{test:/.(png|jpe?g|gif|svg|ico)(?*)?$/,loader:'url-loader'options:{limit:8192,name:isProduction?'static/img/[name].[hash:8].[ext]':'static/img/[name].[ext]'}},{test:/.(woff2?|eot|ttf|otf)(?*)?$/,loader:'url-loader'options:{limit:8192,name:isProduction?'static/font/[name].[hash:8].[ext]':'static/font/[name].[ext]'}}]},plugins:[//html模板插件newHtmlWebpackPlugin({favicon,filename:'index.html'template:resolve('app/index.html')}),//抽离出cssextractBaseCSS,extractAppCSS,//热替换插件newwebpack.HotModuleReplacementPlugin(),//更友好地输出错误信息newFriendlyErrorsPlugin()],devServer:{proxy:{//凡是`/api`开头的http请求，都会被代理到localhost:7777上，由koa提供mock数据。//koa代码在./mock目录中，启动命令为npmrunmock。'/api'{target:''//如果说联调了，将地址换成后端环境的地址就哦了secure:false}},host:'0.0.0.0'port:'9999'disableHostCheck:true,//为了手机可以访问contentBase:resolve('dev'),//本地服务器所加载的页面所在的目录//historyApiFallback:true,//为了SPA应用服务inline:true,//实时刷新hot:true//使用热加载插件HotModuleReplacementPlugin}}module.exports={config:config,extractBaseCSS:extractBaseCSS,extractAppCSS:extractAppCSS}总结这一篇主要就做了三件事：创建简单的项目结构安装了这篇，以及之后要用到npm包配置开发环境的Webpack