打造开箱即用的 Vue 移动端框架

小杜杜
1,368 阅读1分钟

这是我参与「掘金日新计划 · 4 月更文挑战」的第28天，点击查看活动详情

大家好，我叫小杜杜，在之前讲过一个有关React的移动端配置，所以今天就用Vue配置一下移动端，有关React的移动端配置可以看看：打造开箱即用的 react 移动端框架

这些配置可以自行选择配置，接下来我们一起看看：

1.移动端弹性布局适配方案(lib-flexiblle)

lib-flexible:是淘宝团队总结出来的移动端弹性布局适配方案

原理是通过js实时的检测屏幕的大小并改变html标签的字体大小，再结合rem的特性来完成页面的自适应

执行命令 npm i lib-flexible --save

配置：在main.js 里引入 lib-flexible,如：

image.png

2.路由和vuex

这两个插件直接安装就好：

    vue add router
    npm i vuex --save

3. 安装sass

安装插件：

    npm install --save-dev sass-loader@6.0.6
    npm install --save-dev node-sass

注：高版本sass会无法运行

配置：在build文件下的webpack.base.conf.js的rules里添加配置

module: {
    rules: [
        //...默认及其他
        {
            test: /\.scss$/,
            loaders: ["style", "css", "sass"]
        }
    ]
}

然后在.vue文件中修改style标签：<style lang="scss">即可

4.全局配置sass

目的：全局引入sass文件之后可以在每个文件中使用

安装插件：npm install --save-dev sass-resources-loader

配置： 在build 中的utils.js中 cssLoaders的return 中的scss修改

scss: generateLoaders('sass').concat(
    {
        loader: 'sass-resources-loader',
        options: {
                //这里按照你的文件路径填写
                resources: path.resolve(__dirname,'../src/assets/css/common.scss')
        }

    }
)

如：

image.png

在path.resolve()中的路径是引用sass的公用路径名

在这个路径名配置，像这样就可以全局使用了 image.png

5.自动删除生产环境的console.log和debugger

安装插件：npm install uglifyjs-webpack-plugin --save

安装：在webpack.prod.conf.js 在new UglifyJsPlugin中写，如下

image.png

6.解决打包生成的url使用相对地址找不到路径的问题

安装插件：npm install extract-text-webpack-plugin --save-dev

配置：在build中utils.js中配置，p: '../../', 即可

image.png

7.添加Vuex缓存，使状态持久化

vuex-persistedstate：使用浏览器的本地存储（ local storage ）对状态（ state ）进行持久化。这意味着刷新页面或关闭标签页都不会删除你的数据。

安装插件：npm install vuex-persistedstate --save-dev

配置：在store.js中引入：

    import createPersistedState from 'vuex-persistedstate'

    //默认是localStorage，如果是sessionStorage需要更改
    plugins: [createPersistedState()]

    //会话缓存
    plugins: [createPersistedState(
        { storage: window.sessionStorage }
    )]

image.png

8.将px自动转化为rem

大家都知道，在 PC 端中， css 是以 px 为单位，而在移动端中 是以 rem 为单位，如果做移动端，要进行 px 转化为 rem， 那么就会很麻烦，这是就需要一个插件 自动将其转化

安装插件：npm i px2rem-loader --save-dev

配置：在build中的units.js中加入，在exports.cssLoaders

const px2remLoader = {
    loader: 'px2rem-loader',
    options:{
        remUnit: 75
    }
}

注：remUnit 选项意思是 1rem=多少像素，结合 lib-flexible 的方案，我们将 px2remLoader 的 options.remUnit 设置成设计稿宽度的 1/10，这里我们假设设计稿宽为 750px

image.png

并在generateLoaders中配置px2remLoader 在loaders中:

const loaders = options.usePostCSS ? [cssLoader,px2remLoader, postcssLoader] : [cssLoader, px2remLoader]

image.png

这里有个问题： 就是在开发的时候也会转化成rem，开发和打包都是rem了，所以这里usePostCSS 的false不能设置应该

const loaders = options.usePostCSS ? [cssLoader,px2remLoader, postcssLoader] : [cssLoader]

image.png 这时还要配置下webpack.dev.conf.js的usePostCSS改为false

    module: {
        rules: utils.styleLoaders({ sourceMap: config.dev.cssSourceMap, usePostCSS: false })
    }

这样就可以了,

image.png

9.移动端点击延迟300毫秒

安装插件：npm install fastclick --save

配置，在main.js中

    const FastClick = require('fastclick')
    FastClick.attach(document.body) //去掉点击延迟300毫秒

image.png

问题在ios下某些输入框内难以拉起输入框

解决：在main.js中

    FastClick.prototype.focus = function (targetElement) {

        let length;

        //兼容处理:在iOS7中，有一些元素（如date、datetime、month等）在setSelectionRange会出现TypeError
        //这是因为这些元素并没有selectionStart和selectionEnd的整型数字属性，所以一旦引用就会报错，因此排除这些属性才使用setSelectionRange方法
        if (deviceIsIOS && targetElement.setSelectionRange && targetElement.type.indexOf('date') !== 0 && targetElement.type !== 'time' && targetElement.type !== 'month' && targetElement.type !== 'email') {
            length = targetElement.value.length;
            targetElement.setSelectionRange(length, length);

            /*修复bug ios 11.3不弹出键盘，这里加上聚焦代码，让其强制聚焦弹出键盘*/
            targetElement.focus();
        } else {
            targetElement.focus();
        }
    };

10.移动端调试工具

安装插件：npm install vconsole --save

配置：在main.js中引入

    import Vconsole from "vconsole" //调试工具
    const vConsole = new Vconsole();
    
    Vue.use(vConsole);

image.png

注意：在这里可以判断环境选择是否添加控制台

11.移动端屏幕可以放大

在index.html中加入

<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">

12.引入JQ

安装插件：npm install jquery --save-dev

配置：在build中webpack.prod.conf.js中下的webpackConfig的plugins中加入

    new webpack.ProvidePlugin({
        $: "jquery",
        jQuery: "jquery",
        "window.jQuery": "jquery"
    })

image.png

并且在main.js中配置

    import $ from 'jquery'
    window.jQuery = $;
    window.$ = $;

13.添加校验规则

安装插件：cnpm i async-validator -S

使用方式：import Validator from 'async-validator';

image.png

14.配置上面的icon图标

把图片放入static 起名即可

<link rel="icon" href="static/fire.ico" type="image/x-icon" />

image.png

15.不会自动刷新浏览器

运行cnpm run dev的时候不会自动刷新浏览器

解决:在package.json中的dev中加入 --hot

image.png

End

最后，大家可以自己配置下有关Vue的配置，可以自己进行配置一下，喜欢的点个赞👍吧～

avatar
文章
阅读
粉丝