安装
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。