移动端vue项目构建（二）配置环境 vue-router路由 VUX ui框架 axios请求等等~~

首先说一下，此项目的配置环境插件，由于是移动端因此有一部分考虑的都是移动端 ：

路由 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

---

 

 

还有好几个下次再写~~~~