Vue.js前端框架的深度解析与总结

关于vue.js的一些总结：

A 创建项目: 1 vue init webpack wyc 2 cd wyc 3 npm run dev

B 下载模块 npm install axios --save 请求数据 npm install babel-polyfill 解析ES6 npm install babel-runtime 解析ES6 npm 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 --save npm install px2rem-loader --save

C项目架构搭建: 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设置: <tab-bar v-show="$route.meta.showFooter"></tab-bar>

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中进行更改如下:

将<meta name="viewport" content="width=device-width,initial-scale=1.0">更改为:

<meta name="viewport" content="width=750, maximum-scale=1.0, user-scalable=no">即可

//处理跨域,设置代理: 对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 处理series let 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)

格式有点乱，整理半天，请原谅