vux的使用

terasum 发布于2019-08-22 16:24 / 1568人阅读

摘要：是可以结合使用的一个微信端组件库，我通常用它来做简单的提示框动画之类的功能。我主要就记录一下的安装和大概使用方法。在使用过程中没什么坑，安装的时候坑比较多。

vux是可以结合vue使用的一个微信端组件库，我通常用它来做简单的提示框、loading动画、confirm之类的功能。vux里面有很多很实用的功能，详细的可以去看官方文档。
我主要就记录一下vux的安装和大概使用方法。

安装：

//安装vux
npm install vux --save

//vux是基于vux-loader的，所以必须要安装这个，否则会报一大堆错
npm install vux-loader --save-dev

//安装less，vux使用的是less
npm install less less-loader --save-dev

//这个我看别人的教程里面装了，我没装，也没报错，先记录在这里，如果以后报错的话可以把这个安装上试试
npm install yaml-loader --save-dev

所有的安装完成之后，需要进行一波配置：

在 build/webpack.base.conf.js 中：

//官网上是这样写的
const vuxLoader = require("vux-loader")
const webpackConfig = originalConfig 
// 原来的 module.exports 代码赋值给变量 webpackConfig

module.exports = vuxLoader.merge(webpackConfig, {
  plugins: ["vux-ui"]
})

具体的实例代码如下：

const vuxLoader = require("vux-loader");
const webpackConfig = {
  context: path.resolve(__dirname, "../"),
  entry: {
    app: "./src/main.js"
  },
  output: {
    path: config.build.assetsRoot,
    filename: "[name].js",
    publicPath: process.env.NODE_ENV === "production"
      ? config.build.assetsPublicPath
      : config.dev.assetsPublicPath
  },
  resolve: {
    extensions: [".js", ".vue", ".json"],
    alias: {
      "vue$": "vue/dist/vue.esm.js",
      "@": resolve("src"),
    }
  },
  module: {
    rules: [
      {
        test: /.vue$/,
        loader: "vue-loader",
        options: vueLoaderConfig
      },
      {
        test: /.js$/,
        loader: "babel-loader",
        include: [resolve("src"), resolve("test"), resolve("node_modules/webpack-dev-server/client")]
      },
      {
        test: /.(png|jpe?g|gif|svg)(?.*)?$/,
        loader: "url-loader",
        options: {
          limit: 10000,
          name: utils.assetsPath("img/[name].[hash:7].[ext]")
        }
      },
      {
        test: /.(mp4|webm|ogg|mp3|wav|flac|aac)(?.*)?$/,
        loader: "url-loader",
        options: {
          limit: 10000,
          name: utils.assetsPath("media/[name].[hash:7].[ext]")
        }
      },
      {
        test: /.(woff2?|eot|ttf|otf)(?.*)?$/,
        loader: "url-loader",
        options: {
          limit: 10000,
          name: utils.assetsPath("fonts/[name].[hash:7].[ext]")
        }
      },
      {
        test: /.scss$/,
        include:"/src/",
        loader: "style-loader!css-loader!sass-loader",
      }
    ]
  },
  node: {
    // prevent webpack from injecting useless setImmediate polyfill because Vue
    // source contains it (although only uses it if it"s native).
    setImmediate: false,
    // prevent webpack from injecting mocks to Node native modules
    // that does not make sense for the client
    dgram: "empty",
    fs: "empty",
    net: "empty",
    tls: "empty",
    child_process: "empty"
  }
}
module.exports = vuxLoader.merge(webpackConfig, {
  plugins: ["vux-ui"]
})

在 main.js 中
参考官网提供的方法引入你所需要的组件，就可以愉快地使用它啦！

//我一般是用plugin的方式引入，先引入，再use
import {AlertPlugin,LoadingPlugin,ConfirmPlugin,ToastPlugin} from "vux";

Vue.use(AlertPlugin);
Vue.use(LoadingPlugin);
Vue.use(ConfirmPlugin);
Vue.use(ToastPlugin);

接下来在html代码中使用：

this.$vux.alert.show({
    title: "提示",
    content: "哈哈哈"
})

注意：使用的方法可以参考官方文档，写的很清楚。在使用过程中没什么坑，安装的时候坑比较多。如果报错了，就看一下报错信息是不是提示有什么该装的东西没装，再安装一下就可以了。

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/94325.html

vux入门

摘要：它是主要用于移动端的基于和的组件库。看上作者的描述很霸气。一种爱用不用的感觉。的端的框架有等。使用预处理工具是不影响开发者使用等。局部注册全局注册在中引用的的组件后其下的子组件都可不用注册组件直接使用。使用起来很简单。 vux vux读作[v’ju:z]。它是主要用于移动端的基于weui和vue的ui组件库。看git上作者的描述很霸气。一种爱用不用的感觉。的pc端vue的ui框架有...

happyfish 2019-08-23 12:01 评论0 收藏0
在vue中安装使用vux

摘要：最近因为的工作的原因在弄，从后端弄到前端之前一直用，现在第一次接触感觉还挺有意思的，就是自己太菜了，这个脑子呀。。。。不太够用。。。。。比如对自带样式的修改。。今天就记录一下的安装使用吧。。。。。。最近因为的工作的原因在弄vue，从后端弄到前端之前一直用js，现在第一次接触vue感觉还挺有意思的，就是自己太菜了，这个脑子呀。。。。不太够用。。。。。页面设计用了一个叫vux的东西，vux可以提...

番茄西红柿 2019-04-23 13:23 评论0 收藏0
vue-cli 3.x配置使用vux

摘要：在中配置使用写在前面正常按照下面给定的配置，因官方更新过更新过，导致的加载错误。题后说明本人文中所提到的仅代表本人个人使用感受，并不能说明事物实际属性，大家仅在乎配置相关即可。作为非大团队维护的组件库，是一款非常优秀的基于的组件库。在vue-cli3.x中配置使用VUX 写在前面正常按照下面给定的配置，因官方更新过vue/cli3.x更新过vue-loader，导致的加载错误。之前...

KitorinZero 2019-08-22 16:43 评论0 收藏0
vue项目中安装和使用vux组件

摘要：是一款基于构建的移动组件库使用安装安装必须配合使用安装用以正确编译源码，否则会出现安装以正确进行语言文件读取在文件进行配置将代码赋值给变量在里加入完整的内容中添加 vux是一款基于Vue构建的移动UI组件库（https://doc.vux.li/zh-CN/） 1.使用npm安装vuxnpm install vux --saveshowImg(https://segmentfault....

yvonne 2019-08-26 10:15 评论0 收藏0
webpack+vue+vux+express+lowdb实践

摘要：花了一天时间，做了一套加班报名系统，前端基于，后端基于。如果需求对视觉要求不高，还是非常推荐把引进到项目中的。提供了各种各样的组件，基本上拿来就能用。需要注意的是，读写文件默认都是同步的，将的写配置成异步写入能极大的提升性能。花了一天时间，做了一套加班报名系统，前端基于webpack+vue+vux，后端基于express+lowdb。以前在项目中也都接触过webpack+vue，第...

awesome23 2019-07-25 13:47 评论0 收藏0