vue项目中怎么引入weui及在vue中weui的简单使用

最新推荐文章于 2024-05-21 09:51:46 发布

hsany330

最新推荐文章于 2024-05-21 09:51:46 发布

阅读量7.2k

点赞数 1

原文链接：https://blog.csdn.net/rainbow8300/article/details/88018542

版权

方案一：main.js中引入
（1）、安装weui.js weui样式

npm install weui.js weui -S

（2）、引入weui.js weui样式

import Vue from 'vue'
import weui from 'weui.js'
import 'weui'
Vue.prototype.$weui = weui

（3）、项目中就可以用weui的样式以及组件了，用法如下：

this.$weui.dialog({
  title: '提示',
  content: '是否领取礼品',
  buttons: [{
    label: '取消',
    type: 'default',
    onClick: () => {
      alert('您已取消领取礼品！')
    }
  }, {
    label: '确定',
    type: 'primary',
    onClick: () => {
      alert('您已确定领取礼品！')
    }
  }]
})

方案二：index.html中引入
（1）下载资源weui.min.js，weui.min.css
（2）在index.html中引入weui.min.js，weui.min.css

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>hhhhh</title>
    <link rel="stylesheet" href="./static/css/weui.min.css">
  </head>
  <body>
    <div id="app"></div>
    <!-- built files will be auto injected -->
    <script src='./static/js/weui.min.js'></script>
  </body>
</html>

（3）在webpack.base.conf.js中配置externals

module.exports = {
  context: path.resolve(__dirname, '../'),
  entry: {
    app: './src/main.js'
  },
  // 配置完该选项，webpack在打包的时候 将不再把weui的相关资源打包进app.css和vendor.js
  externals: {
    'weui': 'weui',
    'weui.js': 'weui.js'
  },
  ....
}

（4）在项目中就可以用weui.组件名

weui.loading() 
// 打包时会报错，因为没有引入，你用还不存在的对象当然会报错，
// 不过打包后的项目是可以正常使用的，如下图

不过打包后的项目里是正常的
要想在项目中不报错，可以先在main.js里引入一下

import Vue from 'vue'
//这里引入不引入其实也没有关系，只是如果不引入，代码上还是会报错的
import weui from 'weui.js' 
// import 'weui' 不用再引入weui的样式了
Vue.prototype.$weui = weui
// 以上就可以在项目中使用
this.$weui.loading()

（5）要注意的是，如果引入的外部资源在本地（weui.min.js，weui.min.css在本地）打包后生成的文件夹里没有该文件，需要将这两个文件根据自己写的路径放到对应的文件夹里，如果用的cdn，那正常打包就OK了
————————————————
版权声明：本文为CSDN博主「rainbow8300」的原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/rainbow8300/article/details/88018542

hsany330

关注

1
点赞
踩
7

收藏

觉得还不错? 一键收藏
1
评论
vue项目中怎么引入weui及在vue中weui的简单使用

方案一：main.js中引入（1）、安装weui.js weui样式npm install weui.js weui -S（2）、引入weui.js weui样式import Vue from 'vue'import weui from 'weui.js'import 'weui'Vue.prototype.$weui = weui（3）、项目中就可以用weui...
复制链接

扫一扫