vue-cli项目引入vux步骤及遇到的坑

vue-cli项目创建成功之后,开始引入vux

  • 1.安装vux
npm install vux --save
  • 2.安装vux-loader
npm install vux-loader --save-dev
  • 3.安装less
npm install less --save-dev
  • 4.安装less-loader
npm install less-loader --save-dev
  • 5.安装vue-loader
npm install vue-loader --save-dev
  • 6.安装yaml-loader
npm install yaml-loader --save-dev
  • 7.在vue.config.js中进行相关配置,如果没有vue.config.js则在很目录创建此文件
module.exports = {
    configureWebpack: config => {
        require('vux-loader').merge(config, {
            options: {},
            plugins: [{
                name: 'vux-ui' 
            },
            {
                name: 'duplicate-style'
            },
            { 
                name: 'less-theme', 
                path: 'src/style/theme-expand.less'
            }
            ]
        })
    }
}
  • 8.配置build/webpack.base.conf.js参考vux官网
    在build/webpack.base.conf.js最后添加
const vuxLoader = require('vux-loader')
const webpackConfig = originalConfig // 原来的 module.exports 代码赋值给变量 webpackConfig

module.exports = vuxLoader.merge(webpackConfig, {
  plugins: ['vux-ui']
})
  • 9.安装vuex-i18n(如果没安装会报错,项目无法运行)
npm install vuex-i18n

现在可以正常运行项目了

你可能感兴趣的:(vue,vux,vue,vue.js,js)