h5 自适应 链接分享 持久化

一、自适应

1、cnpm install amfe-flexible postcss-px2rem -S

amfe-flexible：配置rem等于多少px。

postcss-px2rem：将页面上写的px转化为rem。

2.main.js引入

import "amfe-flexible";

3.parkage.json配置

"postcss": {

        "plugins": {

                "autoprefixer": {}, "

                postcss-px2rem": { "remUnit": 设计稿的十分之一}

         }

}

4.如果 报错 Error: No PostCSS Config found in…

在项目根目录新建postcss.config.js文件，并对postcss进行配置：

module.exports = {

        plugins: {

                'autoprefixer': {browsers: 'last 5 version'}

        }

}

二、插件

ul组件

Vant Weapp - 轻量、可靠的小程序 UI 组件库轻量、可靠的小程序 UI 组件库https://vant-contrib.gitee.io/vant-weapp/#/quickstart

分享链接

一、安装插件

npm install vue-clipboard2 --save

二、全局引入

import VueClipboard from 'vue-clipboard2'

Vue.use(VueClipboard)

三、使用

 this.$copyText(window.location.href)

          .then(() => {

             alert（“成功”）

            })

            .catch(() => {

               alert（“失败”）

            });

VueX数据持久化

一、安装 

npm install vuex-persistedstate --save

二、使用

vuex引入

import createPersistedState from "vuex-persistedstate"

vuex plugins添加

localstorage存储

plugins: [createPersistedState()]

sessionStorage 存储

plugins: [createPersistedState({ storage: window.sessionStorage })]

解决苹果缩放问题

main

import MetaInfo from 'vue-meta-info';
Vue.use(MetaInfo);

页面  一个就狗了

metaInfo: {
    meta: [
        { name:'viewport', content: 'width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no'}
    ]
},