vux是能夠結合vue使用的一個微信端組件庫,我一般用它來作簡單的提示框、loading動畫、confirm之類的功能。vux裏面有不少很實用的功能,詳細的能夠去看官方文檔。
我主要就記錄一下vux的安裝和大概使用方法。css
安裝:html
//安裝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
全部的安裝完成以後,須要進行一波配置:vue
在 build/webpack.base.conf.js 中:node
//官網上是這樣寫的 const vuxLoader = require('vux-loader') const webpackConfig = originalConfig // 原來的 module.exports 代碼賦值給變量 webpackConfig module.exports = vuxLoader.merge(webpackConfig, { plugins: ['vux-ui'] })
具體的實例代碼以下:webpack
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 中
參考官網提供的方法引入你所須要的組件,就能夠愉快地使用它啦!web
//我通常是用plugin的方式引入,先引入,再use import {AlertPlugin,LoadingPlugin,ConfirmPlugin,ToastPlugin} from 'vux'; Vue.use(AlertPlugin); Vue.use(LoadingPlugin); Vue.use(ConfirmPlugin); Vue.use(ToastPlugin);
接下來在html代碼中使用:npm
this.$vux.alert.show({ title: "提示", content: "哈哈哈" })
注意:使用的方法能夠參考官方文檔,寫的很清楚。在使用過程當中沒什麼坑,安裝的時候坑比較多。若是報錯了,就看一下報錯信息是否是提示有什麼該裝的東西沒裝,再安裝一下就能夠了。json