vux使用教程

发布于 / web前端 / 1 条评论/ 最后更新:17-12-04

官网地址:vux-移动端UI组件库

在Vue2.0脚手架中使用vux教程:

(1)vue init webpack 你的项目名
(2)cnpm i
(3)cnpm i vux –save

这时候可以在package.json里可以看到vux的版本好,但是 npm run dev是会报错的,还需要继续配置

(4)安装vux-loader(这里官网没有介绍。但是不装就会报错)
cnpm i vux-loader –save
(5)安装less-loader(用于正确编译less, 否则会出现 ‘ Cannot GET / ‘ )
cnpm i less less-loader -D
(6)最后一步,在webpack.base.conf.js中进行配置

这是我配置的源码,供参考:

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

function resolve (dir) {
  return path.join(__dirname, '..', dir)
}
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: {
  '@': resolve('src'),
  }
  },
  module: {
  rules: [
  {
  test: /\.vue$/,
  loader: 'vue-loader',
  options: vueLoaderConfig
  },
  {
  test: /\.js$/,
  loader: 'babel-loader',
  include: [resolve('src'), resolve('test')]
  },
  {
  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]')
  }
  }
  ]
  },
  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']
})

配置完,如何使用?

(1)在main.js中引用:

import { AlertPlugin, ToastPlugin } from 'vux'
Vue.use(AlertPlugin)
Vue.use(ToastPlugin)

(2)也可以在组件中使用:

<template>
  <div id="app">
  <XHeader>vux</XHeader>
  <group>
  <x-textarea title="标题" v-model="value"></x-textarea>
  </group>
  </div>
</template>

<script>
import { XHeader, XTextarea ,Group } from 'vux'
export default {
  components: {
  XHeader,
  XTextarea,
  Group
  // 需要什么import引入然后加入组件的components里就好了
  },
  data(){
  return{
  title:'vux',
  value:''
  }
  }
}
</script>
<style>
  *{
  margin: 0;
  padding: 0;
  }
</style>

就到这里吧

注:原创文章,禁止转载,谢谢!!!

转载原创文章请注明,转载自: Hero-x » vux使用教程
  1. avatar

    头像美的呀~