vue 自适应 Responsive 设计

• Z时代
• 2024-01-10
• 分类：综合

使用阿里的 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' } 
　　]，
  },
  ...
}

以上是 vue 自适应 Responsive 设计 的全部内容， 来源链接： utcz.com/z/378576.html