zoukankan      html  css  js  c++  java
  • nuxt中使用vant框架

    1、新建插件文件

    在 plugins 目录添加 vant.js 插件文件,用来引用 Vant 组件:

    vant.js

    import Vue from 'vue'
    import Vant from 'vant';
    import 'vant/lib/vant-css/index.css'
    
    Vue.use(Vant)
    

      

    2、注册插件

    在 nuxt.config.js 文件里注册插件:

    nuxt.config.js

    ...
    plugins: [{src: '~plugins/vant', ssr: true}],
    ...
    

      

    注意: ssr(服务器端运行) 要设置为 true,否则浏览器出现 no match 的警告。

    3、使用 Vant 标签

    在 page 文件中直接使用标签:

    index.vue

    <template>
      <van-row>
        <van-button size="large">来点我呀</van-button>
      </van-row>
    </template>
    
    <script>
      export default {
      }
    </script>
    

      

    发现运行出错

    vant/lib/vant-css/index.css in ./plugins/vant.js,默认将它当成模块了,

    解决方法:将plugins/vant.js中的import 'vant/lib/vant-css/index.css'删除掉,然后在nuxt.config.js中使用全局样式

    css: [
    'vant/lib/index.css'
    ],
    

      




  • 相关阅读:
    4.23上机练习
    4.17java作业
    4.16java作业
    leetcode 189
    leetcode 172
    leetcode 171
    leetcode 169
    win10内网外网智能访问
    leetcode 168
    leetcode 165
  • 原文地址:https://www.cnblogs.com/wntd/p/13536579.html
Copyright © 2011-2022 走看看