zoukankan      html  css  js  c++  java
  • 如何在你的Vue项目配置vux

    做移动端项目的话vue现在是首要的选择,足够轻便,文档足够全,当然用的人多,项目中遇到的坑别人可能也遇到过,解决起来也比较方便,至于在开发中做需要的移动端组件库,个人比较推崇vux。 
      其实项目里组件库可以结合起来使用,因为不管是vux,Mint-ui,Muse-ui等等各有各有的优势,今天就只分享下vue项目中如何配置vux。 
      1.项目里安装vux 
      npm install vux --save 
      2.安装vux-loader(vux2必须结合vux-loader使用,本文也只是介绍vux2的配置) 
      npm install vux-loader --save-dev 
      3.安装less-loader 
      npm install less less-loader --save-dev 
      安装完成记得在webpack.base.conf.js里做如下配置,在extensions里加入less
    
    resolve: {
        extensions: ['.js', '.vue', '.json', 'less'],
        alias: {
          'vue$': 'vue/dist/vue.esm.js',
          '@': resolve('src'),
        }
      }
    
      
    
      4.安装yaml-loader 
      npm install yaml-loader --save-dev 
      最后一步在build/webpack.base.conf.js文件里将原来的module.exports的代码赋值给一个新的变量webpackConfig,整个文件如下:
    
    'use strict'
    const path = require('path')
    const utils = require('./utils')
    const config = require('../config')
    const vuxLoader = require('vux-loader')
    const vueLoaderConfig = require('./vue-loader.conf')
    
    function resolve (dir) {
      return path.join(__dirname, '..', dir)
    }
    
    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: [
          {
            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]')
            }
          }
        ]
      }
    }
    
    module.exports = vuxLoader.merge(webpackConfig, {
      plugins: ['vux-ui']
    })
    
      我们不需要在main.js里引入,而是在我们需要用到组件库的组件里面通过
    
    import { XHeader, Tabbar } from 'vux'
    
    export default {
      components: {
          XHeader,
          Tabbar
          // 需要什么import引入然后加入组件的components里就好了
        }
    }
    
    
    转自:如何在你的Vue项目配置vux
    http://blog.csdn.net/zhanglong_web/article/details/78699022

     

  • 相关阅读:
    Java学习二十九天
    Java学习二十八天
    47. Permutations II 全排列可重复版本
    46. Permutations 全排列,无重复
    subset ii 子集 有重复元素
    339. Nested List Weight Sum 339.嵌套列表权重总和
    251. Flatten 2D Vector 平铺二维矩阵
    217. Contains Duplicate数组重复元素
    209. Minimum Size Subarray Sum 结果大于等于目标的最小长度数组
    438. Find All Anagrams in a String 查找字符串中的所有Anagrams
  • 原文地址:https://www.cnblogs.com/sxz2008/p/8245194.html
Copyright © 2011-2022 走看看