vux的使用

terasum 發布于2019-08-22 16:24 / 1569人閱讀

摘要：是可以結合使用的一個微信端組件庫，我通常用它來做簡單的提示框動畫之類的功能。我主要就記錄一下的安裝和大概使用方法。在使用過程中沒什么坑，安裝的時候坑比較多。

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: "哈哈哈"
})

注意：使用的方法可以參考官方文檔，寫的很清楚。在使用過程中沒什么坑，安裝的時候坑比較多。如果報錯了，就看一下報錯信息是不是提示有什么該裝的東西沒裝，再安裝一下就可以了。

GPU云服務器云服務器 vux cdn vux 數組的使用字典的使用

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/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