vue项目中安装和使用vux组件

yvonne 发布于2019-08-26 10:15 / 808人阅读

摘要：是一款基于构建的移动组件库使用安装安装必须配合使用安装用以正确编译源码，否则会出现安装以正确进行语言文件读取在文件进行配置将代码赋值给变量在里加入完整的内容中添加

vux是一款基于Vue构建的移动UI组件库（https://doc.vux.li/zh-CN/）

1.使用npm安装vux
npm install vux --save

2.安装vux-loader（vux2必须配合vux-loader使用）
npm install vux-loader --save-dev

3.安装less-loader（用以正确编译less源码，否则会出现 " Cannot GET / "）
npm install less less-loader --save-dev

4.安装yaml-loader (以正确进行语言文件读取)
npm install yaml-loader --save-dev

  "devDependencies": {
    ...
    "less-loader": "^5.0.0",
    "yaml-loader": "^0.5.0"
    ...
  }

5.在build/webpack.base.conf.js 文件进行配置

const vuxLoader = require("vux-loader")
//将module.exports代码赋值给变量const webpackConfig
module.exports = vuxLoader.merge(webpackConfig, { plugins: ["vux-ui"] })

在resolve: {
    extensions: [".js", ".vue", ".json", "less"],
    ...
  },里加入.less

完整的webpack.base.conf.js内容：

"use strict"
const path = require("path")
const utils = require("./utils")
const config = require("../config")
const vueLoaderConfig = require("./vue-loader.conf")
const vuxLoader = require("vux-loader")

function resolve (dir) {
  return path.join(__dirname, "..", dir)
}

const createLintingRule = () => ({
  // test: /.(js|vue)$/,
  // loader: "eslint-loader",
  // enforce: "pre",
  // include: [resolve("src"), resolve("test")],
  // options: {
  //   formatter: require("eslint-friendly-formatter"),
  //   emitWarning: !config.dev.showEslintErrorsInOverlay
  // }
})

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", "less"],
    alias: {
      "vue$": "vue/dist/vue.esm.js",
      "@": resolve("src"),
    }
  },
  module: {
    rules: [
      ...(config.dev.useEslint ? [createLintingRule()] : []),
      {
        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: /.less$/,
        loader: "style-loader!css-loader!less-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"]})

6.main.js中添加全局引用

import {ToastPlugin,LoadingPlugin} from "vux"
Vue.use(ToastPlugin)
Vue.use(LoadingPlugin)

组件中局部引用

7.index.vue中使用

若在安装过程中报错：
*!!vue-style-loader!css-loader?{"sourceMap":true}!../../../../vue-loader
可参考https://blog.csdn.net/genius_...

云服务器 GPU云服务器 vue组件 vue组件开发 vue父子组件通讯 vue轮播组件

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

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

在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
webpack+vue+vux+express+lowdb实践

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

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

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

happyfish 2019-08-23 12:01 评论0 收藏0
vue 使用lib-flexable，px2rem 进行移动端适配但是引入的第三方UI组件 vu

摘要：最近在写移动端项目就想用，来进行适配把转换成但是也用到了第三方组件库把这个引入发现一个问题就是的组件都缩小了在网上找不到答案最后在一个开发群里找到了解决的方法目前的处理方法是将组件中转化为，避免被转成在中中配置以下代码自定义的全局最近在写移动端项目,就想用lib-flexable，px2rem来进行适配,把px转换成rem但是也用到了第三方UI组件库vux,把这个引入发现一个问题就是...

Kyxy 2019-08-02 11:53 评论0 收藏0