• Vue项目结合vux使用


    引入vux

    1.直接安装或者更新:
    npm install vux --save
    或者使用 yarn
    yarn add vux // 安装
    yarn upgrade vux // 更新
    2.vux2必须配合vux-loader使用, 请在build/webpack.base.conf.js里参照如下代码进行配置:
    const vuxLoader = require('vux-loader')
    const webpackConfig = originalConfig // 原来的 module.exports 代码赋值给变量 webpackConfig
    
    module.exports = vuxLoader.merge(webpackConfig, {
      plugins: ['vux-ui']
    })
    3.resolve加上.less
    

    全部文件如下

    '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 = {
        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'] })
    
    

    测试是否引入成功

    <template>
      <div class="hello">
        <h1>{{ msg }}</h1>
        <x-header>This is the page title.</x-header>
      </div>
    </template>
    
    <script>
    import { XHeader } from 'vux'
    export default {
      components: {
        XHeader
      },
      name: 'HelloWorld',
      data () {
        return {
          msg: 'Welcome to Your Vue.js App'
        }
      }
    }
    </script>
    
    <style scoped>
    
    </style>
    
  • 相关阅读:
    oracle 查询 当前最大时间的value的值
    Visual Studio《加载此属性页时出错》的解决办法
    (转) 关于在IE6下 无法跳转问题
    LINQ TO XML 个人的一些心得1
    CSS实现单行、多行文本溢出显示省略号(…)
    html 图像映射(一个图像多个连接)
    JS页面跳转大全
    首行负缩进达到内容对齐的目的
    HTML图片死活不显示
    JS高级. 06 缓存、分析解决递归斐波那契数列、jQuery缓存、沙箱、函数的四种调用方式、call和apply修改函数调用方法
  • 原文地址:https://www.cnblogs.com/lml-lml/p/9680056.html
Copyright © 2020-2023  润新知