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的样式以及组件了,用法如下:
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

<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>hhhhhtitle>
    <link rel="stylesheet" href="./static/css/weui.min.css">
  head>
  <body>
    <div id="app">div>
    
    <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() 
// 打包时会报错,因为没有引入,你用还不存在的对象当然会报错,
// 不过打包后的项目是可以正常使用的,如下图

在这里插入图片描述vue项目中怎么引入weui及在vue中weui的简单使用_第1张图片
不过打包后的项目里是正常的
要想在项目中不报错,可以先在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了~

你可能感兴趣的:(vue)