vue 自适应 Responsive 设计

使用阿里的 lib-flexible 及 vue-meta 库:

https://github.com/amfe/lib-flexible/

https://github.com/nuxt/vue-meta#meta-object

1.安装lib-flexible

在命令行中输入并运行:npm i lib-flexible --save

2.在项目入口文件main.js中引入lib-flexible

import 'lib-flexible'

这个时候我们可以npm run dev看一下,已经有了效果。

使用 vue-meta

npm install vue-meta --save

然后在要使用vue-meta的组件里使用:

import VueMeta from 'vue-meta'

Vue.use(VueMeta)
export default {
  data () {
    return {
      myTitle: '标题'
    }
  },
  metaInfo: {
    htmlAttrs: {
      lang: 'zh'
    },
    meta: [ 
    { charset: 'utf-8' }, 
    { name: 'viewport', content: 'width=device-width, initial-scale=1' } 
  ],
  },
  ...
}
原文地址:https://www.cnblogs.com/welhzh/p/10460092.html