@import"common";.test{background-image:url(~@img/test/bg.png);}本文主要讲述结合vue开发过程中实际业务的探索与实践。业务介绍以目标用户的孩子画像为基础，连接聚合京东现有体系的相关资源，建立共生关系的开放生态平台，覆盖家庭多维需求，陪伴孩子的成长。涵盖场景导购、精准推荐、专属权益等，为京东有孩家庭提供优质的购物体验。我们在项目开发中遇到的问题主要有以下三个：接口多：近90个数据接口，数据字段不规范、不统一、难以理解，接口开发经常延迟、频繁变更；交互复杂度：各种交互和State，而且一个状态是多用途的，展示给用户的是多个状态共同作用的结果，用户操作异步更新页面；快速上线：多版本同时规划，多版本并行开发。技术选型技术选型要对症下药。为了统一管理界面和数据，采用的框架必须有一个统一的数据中心，可以实现视图和逻辑的分离，用数据驱动视图，工程可以应对快速上线，以及方便后期维护。在学习成本上，Vue更易用，更轻量。结合Vuex管理状态，视图逻辑与数据耦合度低，项目结构清晰，Vue的扩展性也很好。Vue的核心技术主要有以下几点：声明式渲染：通过简洁的模板语法，声明式地将数据渲染到DOM中，DOM状态是数据状态的映射。组件系统：和大多数前端框架一样，将UI结构拆解成小的、可重用的组件树，然后像零件一样组装。Vue还有一个独特的特点，就是单文件组件。属于同一个组件的模板、脚本、样式都放在一个文件中，这样是不是很酷，这样你就不用同时为一个组件维护多个文件了。客户端路由：结合vue-router，vue可以实现一个SPA应用，主要是通过hash值来控制路由，路由可以传递状态参数给组件。状态管理：Vue的基本状态触发流程是用户行为导致状态改变，状态改变触发视图的更新。结合Vuex，可以管理全局数据。项目详解项目结构项目开发将分为以下几个方面进行讲解：开发辅助、路由、组件化、mixins、常量管理、数据中心、环境兼容性、滚动行为。依赖项目的开发使用Webpack，结合ESLint、Babel等进行开发编译打包。Webpack的基本配置就不详细说了。在基本配置的基础上，进一步分为开发环境和生产环境的配置：//开发配置module.exports=merge(base,{plugins:[newwebpack.HotModuleReplacementPlugin(),newwebpack.NoErrorsPlugin(),newwebpack.DefinePlugin({'process.env.NODE_ENV':JSON.stringify(process.env.NODE_ENV||'development')}),newHtmlWebpackPlugin({filename:'index.html',template:'../index.html'})]})//产品配置module.exports=merge.smart(base,{module:{loaders:[{test:/\.s[a|c]ss$/,loader:ExtractTextPlugin.提取（{fallbackLoader：“样式加载器”，加载器：'css！sass'}）}]}，插件：[newExtractTextPlugin（'style.css'），newwebpack.DefinePlugin（{'process.env.NODE_ENV'：JSON.stringify(process.env.NODE_ENV||'production')}),newwebpack.optimize.CommonsChunkPlugin({name:'vendor',filename:'vendor.js'}),newwebpack.LoaderOptionsPlugin(loadersConf),newwebpack.optimize.UglifyJsPlugin({compress:{warnings:false}})]})开发环境，使用ex按和webpack-dev-中间件构建开发服务器：constexpress=rerequire（'express'）constwebpackDevMiddleware=require（'webpack-dev-middleware'）constwebpack=require（'webpack'）constconf=require（'./webpack.dev.conf'）constapp=express（）constport=process.env.PORT||8080conf.entry.app=['webpack-hot-middleware/client',conf.entry.app]constcompiler=webpack(conf)app.use(webpackDevMiddleware(编译器,{publicPath:conf.output.publicPath,stats:{colors:true,chunks:false}}))app.use(require('webpack-hot-middleware')(compiler))app.listen(port,()=>{console.log(`serverstartedatlocalhost:${port}`)})路由一个路由子项如下：{name:'index',path:'/index',meta:{title:'companionspace',pv:50,profiles:true,visitor:true,verify(){returntrue}},components:{default:Index2,navbar:Navbar}}其中，configuration中的meta包含页面（view）的配置信息：title：页面的标题pv：用于记录页面PVprofiles：用于判断是否需要孩子进入该页面visitor：是否支持访客访问verify：如果支持游客访问，可选额外发布验证问题：在ios中，单页应用切换视图时不能使用页面title更新解决：切换路由时，用iframe加载空页面触发title更新，如下图constiframeLoad=(src)=>{letiframe=document.createElement('iframe')iframe.style.display='none'iframe.src=srcdocument.body.appendChild(iframe)iframe.addEventListener('load',function(){setTimeout(function(){iframe.remove()},0)})路由中需要处理的东西比较多。在router.beforeEach中处理页面传入的参数，请求登录状态、文件数据等基本接口，上报PV，在router.afterEach中处理一些比较小的东西。下面介绍项目中的单文件组件。以下是经过特殊编辑的单文件组件代码：
