A 創(chuàng)建項(xiàng)目:1 vue init webpack wyc2 cd wyc3 npm run devB 下載模塊npm install axios --save 請(qǐng)求數(shù)據(jù)npm install babel-polyfill 解析ES6npm install babel-runtime 解析ES6npm install better-scroll(^1.12.6版本) 頁面滾動(dòng),加載npm install fastclick 解決單擊延時(shí)npm install stylus 解析樣式npm install stylus-loader 解析樣式npm install vue-lazyload 圖片懶加載//下載flexible,實(shí)現(xiàn)頁面自適應(yīng)npm install lib-flexible --savenpm install px2rem-loader --saveC 項(xiàng)目架構(gòu)搭建:api 文件夾 --api.js 封裝請(qǐng)求路徑--request.js 封裝請(qǐng)求數(shù)據(jù)函數(shù)--checkReg.js 封裝正則表達(dá)式base文件夾 封裝基礎(chǔ)組件--banner 輪播圖--loading 預(yù)加載--scroll 滾動(dòng)列表--tabbar 切換功能components 封裝業(yè)務(wù)組件功能common封裝靜態(tài)資源文件夾--images文件夾--js文件夾--dom.js dom節(jié)點(diǎn)操作.js--jsonp.js jsonp請(qǐng)求數(shù)據(jù)功能stylus文件夾 --樣式base.stylus 基礎(chǔ)樣式,比如body ,html等基本樣式hanshu.stylus 封裝基礎(chǔ)的樣式函數(shù)index.stylus 樣式的入口文件reset.stylus 初始化文件variable.stylus 樣式基礎(chǔ)變量得文件router 文件夾 路由文件夾index.js 路由文件App.vue 整體項(xiàng)目得頁面文件main.js 整體項(xiàng)目得入口文件=======================================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ī)延時(shí)模塊import fastclick from'fastclick'//引入圖片懶加載模塊import VueLazyLoader from'vue-lazyload'//引入樣式模塊import '@/common/stylus/index.styl'//引入滾動(dòng)模塊import BScroll from 'better-scroll';//掛在滾動(dòng)模塊Vue.prototype.$BScroll = BScroll;Vue.config.productionTip = false//處理單機(jī)延時(shí)問題fastclick.attach(document.body)//實(shí)現(xiàn)圖片懶加載功能Vue.use(VueLazyLoader,{loading:require('@/common/images/default.png')})===================================命名:refreshData() 為下拉刷新,重新請(qǐng)求數(shù)據(jù)函數(shù)upRequestData() 上拉加載數(shù)據(jù),實(shí)現(xiàn)分頁加載功能====================================================//實(shí)現(xiàn)頁面跳轉(zhuǎn):方法1:router/index.js 注冊(cè)路由,比如:{path:'/detail',name:'Detail',component:Detail, meta: {// 路由層級(jí),數(shù)值越大層級(jí)越深货裹,//以此決定轉(zhuǎn)場動(dòng)畫的前進(jìn)和后退 大于前進(jìn)铛漓,小于后退index: 2,showFooter: false}}//在需要的頁面實(shí)現(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è)置層級(jí)//和是否顯示得值,即meta;例如:{path:'/detail',name:'Detail',component:Detail, meta: {// 路由層級(jí),數(shù)值越大層級(jí)越深,//以此決定轉(zhuǎn)場動(dòng)畫的前進(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ā)生沖突時(shí)候,在沖突項(xiàng)目上添加:class="needs"==========================================================vue-lazyload得使,main.js:import VueLazyLoader from'vue-lazyload'Vue.use(VueLazyLoader,{loading:require('@/common/images/default.png')})==========================================在vue cli搭建的項(xiàng)目中,對(duì)rem或者說是對(duì)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根目錄下會(huì)生成postcssrc.js,對(duì)其進(jìn)行更改:"postcss-pxtorem":{"rootValue":75,"propList":["@/components"]}3其實(shí),此刻已經(jīng)可以使用了,但是有的會(huì)有問題,比如使用得代碼編輯工具并沒有設(shè)置rem與px轉(zhuǎn)換比例為75;或者width:750px轉(zhuǎn)化為rem之后不能實(shí)現(xiàn)寬度為100%占滿,此時(shí),可以將index.html中進(jìn)行更改如下:將更改為:即可//處理跨域,設(shè)置代理:對(duì)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)====================================================
Vue cli搭建項(xiàng)目的一些總結(jié)
最后編輯于 :
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
- 文/潘曉璐 我一進(jìn)店門兰粉,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人顶瞳,你說我怎么就攤上這事玖姑。” “怎么了慨菱?”我有些...
- 文/不壞的土叔 我叫張陵焰络,是天一觀的道長。 經(jīng)常有香客問我符喝,道長闪彼,這世上最難降的妖魔是什么? 我笑而不...
- 正文 為了忘掉前任协饲,我火速辦了婚禮备蚓,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘囱稽。我一直安慰自己郊尝,他們只是感情好,可當(dāng)我...
- 文/花漫 我一把揭開白布战惊。 她就那樣靜靜地躺著流昏,像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上况凉,一...
- 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢(mèng)啊……” “哼嫂丙!你這毒婦竟也來了娘赴?” 一聲冷哼從身側(cè)響起,我...
- 序言:老撾萬榮一對(duì)情侶失蹤跟啤,失蹤者是張志新(化名)和其女友劉穎诽表,沒想到半個(gè)月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體隅肥,經(jīng)...
- 正文 獨(dú)居荒郊野嶺守林人離奇死亡竿奏,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
- 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了腥放。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片议双。...
- 正文 年R本政府宣布宗雇,位于F島的核電站,受9級(jí)特大地震影響莹规,放射性物質(zhì)發(fā)生泄漏赔蒲。R本人自食惡果不足惜,卻給世界環(huán)境...
- 文/蒙蒙 一良漱、第九天 我趴在偏房一處隱蔽的房頂上張望舞虱。 院中可真熱鬧,春花似錦母市、人聲如沸矾兜。這莊子的主人今日做“春日...
- 文/蒼蘭香墨 我抬頭看了看天上的太陽椅寺。三九已至浑槽,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間返帕,已是汗流浹背桐玻。 一陣腳步聲響...
- 正文 我出身青樓,卻偏偏與公主長得像链韭,于是被迫代替她去往敵國和親偏竟。 傳聞我的和親對(duì)象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
推薦閱讀更多精彩內(nèi)容
- Vue-Music 一| 前期工作 1.項(xiàng)目初始化 npm install -g vue-cli vue init...
- vue去哪網(wǎng)跟學(xué)筆記 記錄學(xué)習(xí)點(diǎn)滴 1. 初始化項(xiàng)目 1.1 手機(jī)顯示配適 minimum-scale=1.0,m...
- 1 Webpack 1.1 概念簡介 1.1.1 WebPack是什么 1梧油、一個(gè)打包工具 2、一個(gè)模塊加載工具 3...
- 這段時(shí)間在處理一些挺難攪的事情,而在有些情景狀況出現(xiàn)的時(shí)候量淌,我會(huì)對(duì)所發(fā)生的事骗村,與這事有關(guān)的人產(chǎn)生許多自己的...
- 你的每一分付出與收獲,實(shí)際上背地里都被明碼標(biāo)價(jià)呀枢,包括此刻不自律的你胚股,你的惰性帶給你的安逸,最后會(huì)把“代價(jià)”一點(diǎn)點(diǎn)堆...