A 創(chuàng)建項目:1 vue init webpack wyc2 cd wyc3 npm run devB 下載模塊npm install axios --save 請求數(shù)據(jù)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,實現(xiàn)頁面自適應(yīng)npm install lib-flexible --savenpm install px2rem-loader --saveC 項目架構(gòu)搭建:api 文件夾 --api.js 封裝請求路徑--request.js 封裝請求數(shù)據(jù)函數(shù)--checkReg.js 封裝正則表達(dá)式base文件夾 封裝基礎(chǔ)組件--banner 輪播圖--loading 預(yù)加載--scroll 滾動列表--tabbar 切換功能components 封裝業(yè)務(wù)組件功能common封裝靜態(tài)資源文件夾--images文件夾--js文件夾--dom.js dom節(jié)點操作.js--jsonp.js jsonp請求數(shù)據(jù)功能stylus文件夾 --樣式base.stylus 基礎(chǔ)樣式,比如body ,html等基本樣式hanshu.stylus 封裝基礎(chǔ)的樣式函數(shù)index.stylus 樣式的入口文件reset.stylus 初始化文件variable.stylus 樣式基礎(chǔ)變量得文件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'//引入單機(jī)延時模塊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//處理單機(jī)延時問題fastclick.attach(document.body)//實現(xiàn)圖片懶加載功能Vue.use(VueLazyLoader,{loading:require('@/common/images/default.png')})===================================命名:refreshData() 為下拉刷新,重新請求數(shù)據(jù)函數(shù)upRequestData() 上拉加載數(shù)據(jù),實現(xiàn)分頁加載功能====================================================//實現(xiàn)頁面跳轉(zhuǎn):方法1:router/index.js 注冊路由,比如:{path:'/detail',name:'Detail',component:Detail, meta: {// 路由層級，數(shù)值越大層級越深，//以此決定轉(zhuǎn)場動畫的前進(jìn)和后退 大于前進(jìn)，小于后退index: 2,showFooter: false}}//在需要的頁面實現(xiàn)跳轉(zhuǎn),可以攜帶參數(shù)this.$router.push({path:'/detail?id='+22})//再detail頁面獲取數(shù)據(jù)id:let that=this;let id=that.$route.query.id;//方法2:==========================================================//底部導(dǎo)航,進(jìn)入詳情頁面之后,不希望顯示//可以在/router/index.js中 路由中設(shè)置層級//和是否顯示得值,即meta;例如:{path:'/detail',name:'Detail',component:Detail, meta: {// 路由層級，數(shù)值越大層級越深，//以此決定轉(zhuǎn)場動畫的前進(jìn)和后退 //大于前進(jìn)，小于后退index: 2,//是否顯示底部導(dǎo)航showFooter: false}}然后在App.vue設(shè)置:========================================================== fastclick得使用,main.js:import fastclick from'fastclick'fastclick.attach(document.body)如果發(fā)生沖突時候,在沖突項目上添加: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,或者用靜態(tài)得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的轉(zhuǎn)化功能npm i postcss-pxtorem --sav-dev根目錄下會生成postcssrc.js,對其進(jìn)行更改:"postcss-pxtorem":{"rootValue":75,"propList":["@/components"]}3其實,此刻已經(jīng)可以使用了,但是有的會有問題,比如使用得代碼編輯工具并沒有設(shè)置rem與px轉(zhuǎn)換比例為75;或者width:750px轉(zhuǎn)化為rem之后不能實現(xiàn)寬度為100%占滿,此時,可以將index.html中進(jìn)行更改如下:將更改為:即可//處理跨域,設(shè)置代理:對config下的index.js進(jìn)行設(shè)置;proxyTable:{}更改為需要得模式,比如: proxyTable: { '/api':{ target: 'http://wx.wyc.cn', changeOrigin: true, pathRewrite: {'^/api': '/'} } },//設(shè)置路徑得方式:build文件夾下得webpack.dev.conf.js中找到:alias,設(shè)置路由 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)====================================================