vue項目中安裝和使用vux組件

yvonne 發布于2019-08-26 10:15 / 803人閱讀

摘要：是一款基于構建的移動組件庫使用安裝安裝必須配合使用安裝用以正確編譯源碼，否則會出現安裝以正確進行語言文件讀取在文件進行配置將代碼賦值給變量在里加入完整的內容中添加

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輪播組件

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

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