成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專(zhuān)欄INFORMATION COLUMN

vux的使用

terasum / 1588人閱讀

摘要：是可以結(jié)合使用的一個(gè)微信端組件庫(kù)，我通常用它來(lái)做簡(jiǎn)單的提示框動(dòng)畫(huà)之類(lèi)的功能。我主要就記錄一下的安裝和大概使用方法。在使用過(guò)程中沒(méi)什么坑，安裝的時(shí)候坑比較多。

vux是可以結(jié)合vue使用的一個(gè)微信端組件庫(kù)，我通常用它來(lái)做簡(jiǎn)單的提示框、loading動(dòng)畫(huà)、confirm之類(lèi)的功能。vux里面有很多很實(shí)用的功能，詳細(xì)的可以去看官方文檔。
我主要就記錄一下vux的安裝和大概使用方法。

安裝：

//安裝vux
npm install vux --save

//vux是基于vux-loader的，所以必須要安裝這個(gè)，否則會(huì)報(bào)一大堆錯(cuò)
npm install vux-loader --save-dev

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

//這個(gè)我看別人的教程里面裝了，我沒(méi)裝，也沒(méi)報(bào)錯(cuò)，先記錄在這里，如果以后報(bào)錯(cuò)的話(huà)可以把這個(gè)安裝上試試
npm install yaml-loader --save-dev

所有的安裝完成之后，需要進(jìn)行一波配置：

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

//官網(wǎng)上是這樣寫(xiě)的
const vuxLoader = require("vux-loader")
const webpackConfig = originalConfig 
// 原來(lái)的 module.exports 代碼賦值給變量 webpackConfig

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

具體的實(shí)例代碼如下：

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 中
參考官網(wǎng)提供的方法引入你所需要的組件，就可以愉快地使用它啦！

//我一般是用plugin的方式引入，先引入，再u(mài)se
import {AlertPlugin,LoadingPlugin,ConfirmPlugin,ToastPlugin} from "vux";

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

接下來(lái)在html代碼中使用：

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

注意：使用的方法可以參考官方文檔，寫(xiě)的很清楚。在使用過(guò)程中沒(méi)什么坑，安裝的時(shí)候坑比較多。如果報(bào)錯(cuò)了，就看一下報(bào)錯(cuò)信息是不是提示有什么該裝的東西沒(méi)裝，再安裝一下就可以了。

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/94325.html

相關(guān)文章

  • vux入門(mén)

    摘要：它是主要用于移動(dòng)端的基于和的組件庫(kù)?？瓷献髡叩拿枋龊馨詺?。一種愛(ài)用不用的感覺(jué)。的端的框架有等。使用預(yù)處理工具是不影響開(kāi)發(fā)者使用等。局部注冊(cè)全局注冊(cè)在中引用的的組件后其下的子組件都可不用注冊(cè)組件直接使用。使用起來(lái)很簡(jiǎn)單。 vux vux讀作[v’ju:z]。它是主要用于移動(dòng)端的基于weui和vue的ui組件庫(kù)。 看git上作者的描述很霸氣。一種愛(ài)用不用的感覺(jué)。的pc端vue的ui框架有...

    happyfish 評(píng)論0 收藏0

  • 在vue中安裝使用vux

    摘要：最近因?yàn)榈墓ぷ鞯脑蛟谂?，從后端弄到前端之前一直用，現(xiàn)在第一次接觸感覺(jué)還挺有意思的，就是自己太菜了，這個(gè)腦子呀。。。。不太夠用。。。。。比如對(duì)自帶樣式的修改。。今天就記錄一下的安裝使用吧。。。。。。最近因?yàn)榈墓ぷ鞯脑蛟谂獀ue，從后端弄到前端之前一直用js，現(xiàn)在第一次接觸vue感覺(jué)還挺有意思的，就是自己太菜了，這個(gè)腦子呀。。。。不太夠用。。。。。頁(yè)面設(shè)計(jì)用了一個(gè)叫vux的東西，vux可以提...

    番茄西紅柿 評(píng)論0 收藏0

  • vue-cli 3.x配置使用vux

    摘要：在中配置使用寫(xiě)在前面正常按照下面給定的配置，因官方更新過(guò)更新過(guò)，導(dǎo)致的加載錯(cuò)誤。題后說(shuō)明本人文中所提到的僅代表本人個(gè)人使用感受，并不能說(shuō)明事物實(shí)際屬性，大家僅在乎配置相關(guān)即可。作為非大團(tuán)隊(duì)維護(hù)的組件庫(kù)，是一款非常優(yōu)秀的基于的組件庫(kù)。 在vue-cli3.x中配置使用VUX 寫(xiě)在前面 正常按照下面給定的配置，因官方更新過(guò)vue/cli3.x更新過(guò)vue-loader，導(dǎo)致的加載錯(cuò)誤。之前...

    KitorinZero 評(píng)論0 收藏0

  • vue項(xiàng)目中安裝和使用vux組件

    摘要：是一款基于構(gòu)建的移動(dòng)組件庫(kù)使用安裝安裝必須配合使用安裝用以正確編譯源碼，否則會(huì)出現(xiàn)安裝以正確進(jìn)行語(yǔ)言文件讀取在文件進(jìn)行配置將代碼賦值給變量在里加入完整的內(nèi)容中添加 vux是一款基于Vue構(gòu)建的移動(dòng)UI組件庫(kù)（https://doc.vux.li/zh-CN/） 1.使用npm安裝vuxnpm install vux --saveshowImg(https://segmentfault....

    yvonne 評(píng)論0 收藏0

  • webpack+vue+vux+express+lowdb實(shí)踐

    摘要：花了一天時(shí)間，做了一套加班報(bào)名系統(tǒng)，前端基于，后端基于。如果需求對(duì)視覺(jué)要求不高，還是非常推薦把引進(jìn)到項(xiàng)目中的。提供了各種各樣的組件，基本上拿來(lái)就能用。需要注意的是，讀寫(xiě)文件默認(rèn)都是同步的，將的寫(xiě)配置成異步寫(xiě)入能極大的提升性能。 花了一天時(shí)間，做了一套加班報(bào)名系統(tǒng)，前端基于webpack+vue+vux，后端基于express+lowdb。以前在項(xiàng)目中也都接觸過(guò)webpack+vue，第...

    awesome23 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<