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' } 
　　]，
  },
  ...
}