首先说一下,此项目的配置环境插件,因为是移动端所以有一部分考虑的都是移动端 :
路由 vue-router 路由
路由是vue项目中很重要的东西,构建的时候一路回车就是选好了。
Ui框架 vux
- Ui框架集成的是VUX
- Vux 基于WeUI和Vue(2.x)开发的移动端UI组件库,主要服务于微信页面
- 官网:https://vux.li/#/
ui库网上有什么多种,看你是什么开发环境选择什么样的,之前PC端的时候我选的是element 就是饿了么的ui框架,挺好用的,因为这次是微信公众号开发所以选了vux
样式
less
less less-loader可编译less源码
样式我选的less,也可以选sass 网上有很多教程搜一下就安装了
yaml-loader
如遇到语音文件,可进行语言文件读取
Fastclick
移动端点击延迟300秒处理
移动端存在点击延迟300s的问题,这个主要是处理这个问题
发送请求
vue更新到2.0之后,vue-resource不再更新,固项目选取axios发送请求。
可并发请求,拦截器处理也是用axios拦截器,下面有个简单的示例,详细使用方法见百度
axios使用方法
Eg:发送一个GET请求
axios.get(‘/user‘,{
params:{
ID:12345
}
})
.then(function(response){
console.log(response);
})
.catch(function(err){
console.log(err);
});
移动端页面自适应
移动端最重要的就是自适应了,有了这个方便很多
- px2remLoader用法
- 直接写px,编译后会直接转化成rem —- 除开下面两种情况,其他长度用这个
- 在px后面添加/no/,不会转化px,会原样输出。 — 一般border需用这个
- 在px后面添加/px/,会根据dpr的不同,生成三套代码。—- 一般字体需用这个
Eg:
.example{
width: 150px;
height: 64px; /*px*/
font-size: 28px; /*px*/
border: 1px solid #ddd; /*no*/
}
- *在组件中写单位直接写px 然后在浏览器中的检查就可以看到单位是rem
Vuex
集中式存储管理,中大型项目必用,重要!!!
瀑布流
Vue-waterfall
因为项目有需要所以就装了,就顺带说一下
先把meta标签写上移动端的视口
index.html入口页面 <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
以上都是介绍,这个项目里面都装了什么,目的是什么,以下就是一步一步的安装了~~
所有cnpm 的东西都是配置在package.json里面的,我们安装的依赖就在node_modules内。如果把node_modules删除,再npm install 的时候就是根据package.json里面有的去生成node_modules依赖包。
把这个文件夹开着,下载一个,看一下有没有下载成功。
1.vux
cnpm install vux --save
像这样都没提示,也没报错,说明就是正常的!然后看一下package.json里面有没有增加,如下图就是安装好了。
所以配置的用法,这篇文章不讲,下一篇讲,这篇只讲安装。
紧接着
在build/webpack.base.conf.js配置:
1.const vuxLoader = require(‘vux-loader‘)
2.把module.exports赋值变量 const webpackConfig ={里面代码不动}
3.把下面这段代码放在页面的最底部
module.exports = vuxLoader.merge(webpackConfig, {
plugins: [‘vux-ui‘, ‘progress-bar‘, ‘duplicate-style‘]
})
如图:
安装vux-loader
使用命令cnpm install vux-loader -D
2.less
cnpm install less less-loader --save-dev
3.yaml-loader
cnpm install yaml-loader --save-dev
4.去掉点击延迟300秒
cnpm install fastclick --save
在main.js里面配置
const FastClick = require(‘fastclick‘)
FastClick.attach(document.body) //去掉点击延迟300秒
5.axios
cnpm install axios --save
6.lib-flexible.js和rem实现移动端页面自适应
1.安装lib-flexible.js
cnpm install lib-flexible --save
2.在项目入口文件main.js中引入lib-flexible
import ‘lib-flexible‘
3.安装px2rem-loader
cnpm install px2rem-loader --save-dev
4.配置px2rem-loader
首先找到 build/utils.js文件,在utils.js中添加如下配置
const cssLoader = {
loader: ‘css-loader‘,
options: {
minimize: process.env.NODE_ENV === ‘production‘,
sourceMap: options.sourceMap,
importLoaders:2//在css-loader应用loader的数目,默认为0 ,如果不加@import外部的css文件将不能正常转换,不生效调大数字,必须重启
}
}
const px2remLoader = {
loader: ‘px2rem-loader‘,
options: {
remUnit: 75 //设计稿的1/10,假设设计稿是750px
}
}
找到generateLoaders方法,在函数里如下配置
这样基本配置就完成了,重启项目就可以使用lib-flexible+rem编写移动端页面了,直接写px,浏览器上查看会是rem
还有好几个下次再写~~~~