vueci移动端初探(lib-flexible + px2rem)

安装lib-flexible

cnpm i lib-flexible --save

安装px2rem

cnpm i px2rem-loader --save-dev

引入flexible
入口文件main.js中引入：

import 'lib-flexible/flexible.js'

配置px2rem
build/utils.js中：
增加红色部分

其他
1.对css中文字样式增加/* px */后缀，会编译出适应不同dpr的字号：

.text{
    font-size: 28px; /* px */
}
// 会被编译成如下：

    [data-dpr="1"] .text { // data-dpr是由flexible计算出来并加在html上的设备像素比
        font-size: 14px;
    }

    [data-dpr="2"] .text {
        font-size: 28px;
    }

    [data-dpr="3"] .text {
        font-size: 42px;
    }

2.对边框样式增加/* no */后缀，会保持原样:

.box{
    border: 1px solid #fff; /* no */
}
// 会被编译成如下：
.box{
    border: 1px solid #fff;
}

3.对不同dpr选择不同的图片
mixin.scss中：

// 背景图片
@mixin bg-image($url) {
    background-image: url($url + "@2x.png");
    @media (-webkit-min-device-pixel-ratio: 3), (min-device-pixel-ratio: 3) {
        background-image: url($url + "@3x.png");
    }
}

使用的是vuecli脚手架的注意点：

注意css背景图片的webpack配置，否则打包后会找不到图片：
修改build文件夹下的utils.js代码，如图所示：

一般vue移动端开发会有很多框架可以用，这里以mint-ui和echrts为例
安装：

cnpm i mint-ui -S
cnpm install echarts -S

在main.js中引入mint Ui的css 和 插件

import Mint from 'mint-ui'
Vue.use(Mint)
import 'mint-ui/lib/style.css'

按需引入echarts组件
局引入会将所有的echarts图表打包，导致体积过大，所以我觉得最好还是按需引入。

vue文件代码：

<template>
 <div class="container">

    
<mt-button>Click Me</mt-button>

    <div id="myChart" :style = "{width : '300px',height : '300px'}">

    </div>

     <div class="canvasWrapper" id="img-perv-div">
     </div>
 </div>
</template>

<script>

// 引入基本模板
let echarts = require('echarts/lib/echarts')
// 引入柱状图组件
require('echarts/lib/chart/bar')
// 引入提示框和titile组件
require('echarts/lib/component/tooltip')
require('echarts/lib/component/title')

export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  },
  mounted() {
      this.drawLine()
  },
  methods: {
      drawLine(){
          //   基于准备好的DOM，初始化echarts实例
          let myChart = echarts.init(document.getElementById('myChart'))
        //   绘制图表
        myChart.setOption({
            title : {text : 'ECharts 入门示例2'},
            tooltip : {},
            xAxis : {
                data : ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
            },
            yAxis : {},
            series : [{
                name : '销量',
                type : 'bar',
                data : [5, 20, 36, 10, 10, 20]
            }]
        })
      },
    

      /* 上传图片转base64 */
      changePic() {
        var dom = document.getElementById('img-perv-div')

        if(dom.hasChildNodes()){
            var imgObj = dom.getElementsByTagName('img')[0]
            imgObj.parentNode.removeChild(imgObj)
            // dom.removeChild('img'); 
        }
          //获取文件对象
        var file = event.target.files[0];

        //创建reader对象
        var reader = new FileReader();

        //读取完成后触发
        reader.onload = function(ev){
            //获取图片的url
            var _img_src = ev.target.result;
            console.log(_img_src)
            //添加预览图片到容器框
            var img  = document.createElement('img');
            img.setAttribute('src',_img_src);
            dom.appendChild(img);
            dom.className = 'canvasWrapper bgYellow'

            // 给元素动态绑定事件
            // $(document).on('click','.centent_input .del',function(){
            //     $(this).parent('.add-del').remove();
            // })
        }
        //获取到数据的url 图片将转成 base64 格式
        reader.readAsDataURL(file);
      }
  },
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
    .container{
        position: absolute;
        width: 100%;
        height: 100%;
        background: #cccccc;
        background: url('../../static/bg.jpeg') top center no-repeat;
        background-size: 100% auto;
    }
    .canvasWrapper{
        position: absolute;
        top: 330px;
        left: 75px;
        width: 570px;
        height: 380px;
        overflow: hidden;
    }
    .bgYellow{
        background: yellow;
    }
</style>

<style>
   img{
        display: block;
        width:100% !important;
        height: auto;
        position: absolute;
        top:50%;
        transform:translateY(-50%);
    }
</style>

这里之所以使用 require 而不是 import，是因为 require 可以直接从 node_modules 中查找，而 import 必须把路径写全

进行打包，打包之后出现一些css或js map文件，我们来调整下打包配置，删除这些map文件，重新打包

删除生成环境map文件的操作：
在config/index.js中把productionSourceMap改为false,

build: {
    // Template for index.html
    index: path.resolve(__dirname, '../dist/index.html'),

    // Paths
    assetsRoot: path.resolve(__dirname, '../dist'),
    assetsSubDirectory: 'static',
    assetsPublicPath: './',

    /**
     * Source Maps
     */

    productionSourceMap: false,
    // https://webpack.js.org/configuration/devtool/#production
    devtool: '#source-map',

打包命令如下：

npm run build

map文件终于没有了，但是vendor.08b725c4ec80798197af.js文件很大约568k，我们来处理下，使得该文件变小

有2种方法：

• 1、把不常改变的库放到index.html中，通过cdn引入
  然后找到build/webpack.base.conf.js文件，在 module.exports = { } 中添加以下代码

externals: {
    'vue': 'Vue',
    'vue-router': 'VueRouter',
    'element-ui': 'ELEMENT',
 },

这样webpack就不会把vue.js, vue-router, element-ui库打包了。声明一下，我把main.js中对mint-ui的引入删掉了，不然我发现打包后的app.css还是会把mint-ui的css打包进去，删掉后就没了。

• 2、vue路由的懒加载（具体作用，官网查看哦，这里就不多介绍了）。
• 3、按需引入第三方库组件，这里以mint-ui为例，前面是在main.js中全局引入，这里我们改变方法，进行按需引入
  按需引入除了安装mint-ui之外还需要安装 babel-plugin-component

cnpm install --save-dev babel-plugin-component

修改.babelrc文件

"plugins": ["transform-vue-jsx", "transform-runtime",["component",[{
      "libraryName" : "mint-ui",
      "style" : true
  }]]]

在main.js中引入项目需要的组件

本例子中引入 button组件用于实践效果

import { Button } from 'mint-ui'
Vue.component(Button.name,Button)

在页面中使用

<mt-button>Click Me</mt-button>

然后你打包就会发现vendor文件小了很多~从原来的568k变为了455k

在项目根目录，启动live-server之后

live-server

效果图如下：