A 创建项目:1 vue init webpack wyc2 cd wyc3 npm run devB 下载模块npm install axios --save 请求数据npm install babel-polyfill 解析ES6npm install babel-runtime 解析ES6npm install better-scroll(^1.12.6版本) 页面滚动,加载npm install fastclick 解决单击延时npm install stylus 解析样式npm install stylus-loader 解析样式npm install vue-lazyload 图片懒加载//下载flexible,实现页面自适应npm install lib-flexible --savenpm install px2rem-loader --saveC 项目架构搭建:api 文件夹 --api.js 封装请求路径--request.js 封装请求数据函数--checkReg.js 封装正则表达式base文件夹 封装基础组件--banner 轮播图--loading 预加载--scroll 滚动列表--tabbar 切换功能components 封装业务组件功能common封装静态资源文件夹--images文件夹--js文件夹--dom.js dom节点操作.js--jsonp.js jsonp请求数据功能stylus文件夹 --样式base.stylus 基础样式,比如body ,html等基本样式hanshu.stylus 封装基础的样式函数index.stylus 样式的入口文件reset.stylus 初始化文件variable.stylus 样式基础变量得文件router 文件夹 路由文件夹index.js 路由文件App.vue 整体项目得页面文件main.js 整体项目得入口文件=======================================main.js 入口文件中引入模块://最先引入babel-polyfill ,解析ES6;import 'babel-polyfill'import Vue from 'vue'import App from './App'//引入路由功能import router from './router'//引入异步加载模块功能import Axios from 'axios'//引入单机延时模块import fastclick from'fastclick'//引入图片懒加载模块import VueLazyLoader from'vue-lazyload'//引入样式模块import '@/common/stylus/index.styl'//引入滚动模块import BScroll from 'better-scroll';//挂在滚动模块Vue.prototype.$BScroll = BScroll;Vue.config.productionTip = false//处理单机延时问题fastclick.attach(document.body)//实现图片懒加载功能Vue.use(VueLazyLoader,{loading:require('@/common/images/default.png')})===================================命名:refreshData() 为下拉刷新,重新请求数据函数upRequestData() 上拉加载数据,实现分页加载功能====================================================//实现页面跳转:方法1:router/index.js 注册路由,比如:{path:'/detail',name:'Detail',component:Detail, meta: {// 路由层级，数值越大层级越深，//以此决定转场动画的前进和后退 大于前进，小于后退index: 2,showFooter: false}}//在需要的页面实现跳转,可以携带参数this.$router.push({path:'/detail?id='+22})//再detail页面获取数据id:let that=this;let id=that.$route.query.id;//方法2:==========================================================//底部导航,进入详情页面之后,不希望显示//可以在/router/index.js中 路由中设置层级//和是否显示得值,即meta;例如:{path:'/detail',name:'Detail',component:Detail, meta: {// 路由层级，数值越大层级越深，//以此决定转场动画的前进和后退 //大于前进，小于后退index: 2,//是否显示底部导航showFooter: false}}然后在App.vue设置:========================================================== fastclick得使用,main.js:import fastclick from'fastclick'fastclick.attach(document.body)如果发生冲突时候,在冲突项目上添加:class="needs"==========================================================vue-lazyload得使,main.js:import VueLazyLoader from'vue-lazyload'Vue.use(VueLazyLoader,{loading:require('@/common/images/default.png')})==========================================在vue cli搭建的项目中,对rem或者说是对flexible的使用:1下载flexible,或者用静态得flexible.js也行下载方法如下:npm install lib-flexible --save在main.js中引入该模块,引入方法如下:A import 'lib-flexible'B 这是我常用的方法:将flexible提前下载好,放在common中,然后再main.js中:import flexible from'@/common/js/flexible.js'2 下载模块,用以处理rem与px的转化功能npm i postcss-pxtorem --sav-dev根目录下会生成postcssrc.js,对其进行更改:"postcss-pxtorem":{"rootValue":75,"propList":["@/components"]}3其实,此刻已经可以使用了,但是有的会有问题,比如使用得代码编辑工具并没有设置rem与px转换比例为75;或者width:750px转化为rem之后不能实现宽度为100%占满,此时,可以将index.html中进行更改如下:将更改为:即可//处理跨域,设置代理:对config下的index.js进行设置;proxyTable:{}更改为需要得模式,比如: proxyTable: { '/api':{ target: 'http://wx.wyc.cn', changeOrigin: true, pathRewrite: {'^/api': '/'} } },//设置路径得方式:build文件夹下得webpack.dev.conf.js中找到:alias,设置路由 resolve: { extensions: ['.js', '.vue', '.json'], alias: { 'vue$': 'vue/dist/vue.esm.js', '@': resolve('src'), 'common':resolve('src/common') } }, ======================================================//利用map 处理serieslet series=res.data.seriesVo; let arr=[]; var myMap= new Map(); console.log(res.data.seriesVo) series.forEach(function(item,index){ if(arr.indexOf(item.firmName)==-1) arr.push(item.firmName) }) arr.forEach(function(item,index){ let a = []; series.forEach(function(it,idx){ if (item == it.firmName) { a.push(it); // console.log(a) myMap.set(item,a) } }) }) console.log(myMap) that.setData({ mySeries:myMap }) console.log(that.data.mySeries)====================================================
