VUX 安装

安装

https://blog.csdn.net/Honnyee/article/details/82181620

VUX 在 vue-cli 3 的安装特别恶心，官方并没有给具体文档，导致我这个小白晕头转向，找了好久才找到并安装成功，这里分享上面文章链接，写的很好，基本上可以让你安装并且使用了，然后以下是我的个人总结。

1，vue-cli 3 的安装

npm install -g @vue/cli

2，vue-cli 3 创建项目

vue create my-project

然后就是一堆项目配置选择，此处分享文章

https://www.jianshu.com/p/8105d6c16d80

哎呀，简书真是个好东西，哈哈，然后就是坑人的 VUX 安装和配置了，至于过程此处省略一万字，开玩笑的。

安装指令：

# 项目里安装 vux
npm install vux -save
# 安装 vux-loader (必须装)
npm install vux-loader 
# 安装 less-loader
npm install less less-loader --save-dev
# 安装 yaml-loader (以正确进行语言文件读取)
npm install yaml-loader --save-dev

配置 VUX

# 手动指定 vue-loader 的版本来解决加载问题
npm install vue-loader@14.2.2 -D

因为 vue-cli 3 取消了 webpack 配置文件夹，所以只能在根目录下创建一个 vue.config.js 文件来配置这个 vue-loader ,以下是我的配置，基本上可以运行 VUX 了

module.exports = {
    // 基本路径
    publicPath: "/",
    // vux 相关配置,使用vux-ui
    configureWebpack: config => {
        vuxLoader.merge(config, {
            options: {},
            plugins: ['vux-ui']
        })
    },
    devServer: {
        port: 8081
    },
    css: undefined,
    lintOnSave: false,
    outputDir: undefined,
    assetsDir: undefined,
    runtimeCompiler: true, //包含运行时编译器的 Vue 构建版本
    productionSourceMap: false,
    parallel: undefined
}

然后我们就可以在项目中调用一下 VUX 测试一下是否就可用。

<template>
    <div id="app">
        <x-header></x-header>
    </div>
</template>

<style scope lang="less">
</style>

<script>
import {XHeader} from 'vux'

export default {
    components: {
        XHeader
    }
}
</script>

到这里 VUX 基本安装和使用就完事了，哎呀，找到一个能一步到位真的是不容易，希望此文能帮到和我一样掉坑里的小伙伴，886。