一、自适应
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'} ] },