精华内容
下载资源
问答
  • vue项目使用weui
    千次阅读
    2018-11-29 16:17:35

    注:项目使用vue cli脚手架,最新版脚手架创建项目参考这里

    一、安装weui

    安装weui js文件和css文件:

    cnpm i weui.js weui --S

    二、将文件引入项目中

    在main.js中添加如下代码:

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

    三、页面中使用

    具体可以查看这个文档有详细说明,这里列举两个例子

    1.使用提示弹窗:

    this.$weui.alert('图形验证码不能为空!')

    2.使用loading,常用的情况是发起请求之前loading,然后请求结束后hide:

    let loading = this.$weui.loading()
    
    setTimeout(() => {
      loading.hide()
    }, 1500)

    第三次发文章,如有雷同纯属巧合,如有错误请指出,原创文章如需转载请标明出处。笔芯笔芯❤️

    更多相关内容
  • vue_weui 项目设置 npm install 编译和热重装以进行开发 npm run serve 编译并最小化生产 npm run build 整理和修复文件 npm run lint 自定义配置 请参阅。
  • 方案一: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' ...(3)、项目中就可以用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
     

    <!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

    展开全文
  • vue2目录示范了如何使用Vue 2和Weui Design Vue 2建造Weui示例页面,包含如下功能: 基于Weui Design Vue建造 基于vue-router的单页面应用 技术栈:Vue2,Weui Design Vue 2,Vue Cli,Vue Router vue2Ts vue2目录...
  • (已弃用)vue-weui感谢对vue-weui的支持,由于在vue-weui最后提交之后,vueweui都进行了偏移幅度的更新,且我没有更多的时间和能量来跟进,所以此项目逐步将不再维护,如果有需要可以使用其他相关库,再次感谢。...
  • Vue3中如何使用WeUI

    千次阅读 2021-11-18 12:05:59
    之前在网上找了找,发现没有一篇文章是介绍Vue3中如何使用WeUI的。都是介绍Vue2中的使用方法,并不适用Vue3。所以在这里给大家简单介绍一下,目的是节省大家的时间 1. 安装weui.js weui样式 npm install weui.js ...

    之前在网上找了找,发现没有一篇文章是介绍Vue3中如何使用WeUI的。都是介绍Vue2中的使用方法,并不适用Vue3。所以在这里给大家简单介绍一下,目的是节省大家的时间

    1. 安装weui.js weui样式

    npm install weui.js weui -S
    

    2. 在main.js文件中添加以下代码

    import { createApp } from 'vue'
    import store from '@/store'
    import weui from 'weui.js'
    import 'weui'
    import App from '@/App.vue'
    import router from '@/router'
    const app = createApp(App)
    app.config.globalProperties.$weui = weui
    app.use(store).use(router).mount('#app')
    

    3.在项目中用法如下

    this.$weui.alert("服务器错误");
    
    this.$weui.topTips('请输入账号密码')
    

    其他组件用法可以参考WeUI.JS中文文档 https://www.kancloud.cn/ywfwj2008/weuijs/274297

    展开全文
  • vue.js里想用weui的picker,也引入了weui.js,为什么报错weui is not defined?import weuiJs from '../weui-js/weui.js'export default {methods: {checkPicker: function () {weui.picker([{label: '飞机票',value...

    vue.js里想用weui的picker,也引入了weui.js,为什么报错weui is not defined?

    import weuiJs from '../weui-js/weui.js'

    export default {

    methods: {

    checkPicker: function () {

    weui.picker([{

    label: '飞机票',

    value: 0

    }, {

    label: '火车票',

    value: 1

    }, {

    label: '的士票',

    value: 2

    },{

    label: '公交票 (disabled)',

    disabled: true,

    value: 3

    }, {

    label: '其他',

    value: 4

    }], {

    onChange: function (result) {

    console.log(result);

    },

    onConfirm: function (result) {

    console.log(result);

    }

    });

    }

    }

    }

    展开全文
  • 最近在使用 vue2.0开发微信公众号网页 其中涉及到 选择图片,图片的压缩上传, 预览, 删除等操作。项目整体UI框架使用的是 issue由于之前写PC端后台系统时, 采用的 Element UI框架 Upload组件 来上传...
  • we-vue, 使用 Vue2.x + weui1.x 开发的组件
  • vue+weui 手机端项目

    千次阅读 2020-05-07 22:25:10
    vue+weui 手机端项目 俩个地址 https://weui.io/ https://github.com/Tencent/weui/wiki?tdsourcetag=s_pctim_aiomsg 用脚手架创建vue项目 再visCode中安装 ESLint 插件 (这个不是每次都安装,安装一次就行,他是...
  • 最近在使用 vue2.0开发微信公众号网页 其中涉及到 选择图片, 图片的压缩上传, 预览, 删除等操作。项目整体UI框架使用的是 vux, 但可惜的是 vux 并没有提供 图片上传组件, 理由见 issue由于之前写PC端后台...
  • 针对上一篇文章,再兑weui提示框封装处理,2种形式,一种带转圈图形,一种不带转圈图形。 引入weui和vuex npm install weui.js weui -S npm install vuex --save tips.js(代码如下) import weui from 'weui.js' ...
  • 使用Vue2封装,为微信Web服务量身设计(Work with WeUI 0.4.0+) 特点 使用Vue封装了WeUI的所有组件 通过npm安装,可以一次引入所有组件,也可选择只引入需要的组件 不带一行css,与WeUI样式完全解绑,可以方便地...
  • weui vue_基于VueWeUI的移动Web UI组件

    千次阅读 2020-07-19 11:31:39
    weui vueMobile web UI Components based on Vue and WeUI. Be Cool with Vue & WeUI. 基于VueWeUI的移动Web UI组件。 对VueWeUI保持冷静。 对VueWeUI保持冷静。 (Be Cool with Vue and WeUI.) Vux = ...
  • 使用weui—loading组件 1.npm安装npm weui --save npm weui --save 2.mian.js引入 import "weui";//引入weui插件 import weui from ...Vue.prototype.$weui = weui; 3在项目使用 methods: { go() { v...
  • WeVue,不止是Vue.js + weui! we-vue是一套基于Vue.js的移动关闭组件库,结合weui官方样式库,封装了一系列组件,适合微信公众号等移动端开发。 特性 35+个组件 进行全面的单元测试 详细的在线文档和示例 支持打字...
  • vue2.0使用weui.js的uploader组件上传图片(兼容移动端) sufaith 4 个月前 最近在使用 vue2.0开发微信公众号网页 其中涉及到 选择图片, 图片的压缩上传, 预览, 删除等操作。 项目整体UI框架使用的...
  • Mobile web UI based on Vue and Weui 基于VueWeUI的移动Web视觉库.zip,Mobile UI Components based on Vue & WeUI
  • VUWE是一款基于微信WeUI所开发的,专用于Vue2的组件库
  • vue写小程序,使用mpvue框架重写WeUI。 相关说明 该仓库是基于mpvue mpvue构建WeUI ,是一个demo库,没有实现组件化,目前已实现组件化,支持npm安装。 前言 今天早上打开电脑,像往常一样浏览一下github ,看到了...
  • div class="weui-cells weui-cells_form" id="uploader"> <div class="weui-cell"> <div class="weui-cell__bd"> <div class="weui-uploader"> <div class="weui-upl
  • we-vue, 使用 Vue2.x weui1.x 开发的组件
  • Vux:基于 VueWeUI 移动端 UI 组件
  • 最近使用 weui 里面的 datepicker 组件的时候遇到了一个问题: 弹出来 选择年月日的框之后,直接点击导航上的“返回” 按钮,picker 选框不消失,也就是弹出框不消失 weui.datePicker({ start: 1900, // 从...
  • 针对 Vue 框架移植的 We UI 框架的适配,让 mobile开发过程成为一种享受
  • Vue项目vant的使用

    2021-10-08 17:12:17
    官方文档 Vant - Mobile UI Components built on Vue 安装 npm i vant -S npm i babel-plugin-import -D //这是一个插件 按需引入时必须要引入 全局导入main.js import Vant from 'vant'; import 'vant/lib/...
  • 一个临时的Vue.js移动UI组件库。 是的,VUX仍然有很多问题,虽然还远远不能完美,但是一直都在解决这些问题。 如果您正在使用它而感觉有一些问题,则不妨打开一个问题并提供反馈。 我们很乐意为您解决问题的详细说明...
  • # vue-cli项目引用 #在webpack.base.conf.js添加loader { test: /vuxx.src. *? js$/, loader: ' babel ' } #使用组件 < cell xss=removed></cell> < /group > < /div > < /template > < ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 4,237
精华内容 1,694
关键字:

vue项目使用weui