在vue-cli引入vux后 使用报错

Question

build/webpack.base.conf.js代码如下

var path = require('path')
var utils = require('./utils')
var config = require('../config')
var vueLoaderConfig = require('./vue-loader.conf')
var vuxLoader = require('vux-loader')
function resolve (dir) {
  return path.join(__dirname, '..', dir)
}

const originalConfig = {
  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'],
    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: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
        loader: 'url-loader',
        options: {
          limit: 10000,
          name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
        }
      }
    ]
  }
}
const webpackConfig = originalConfig // 原来的 module.exports 代码赋值给变量 webpackConfig

module.exports = vuxLoader.merge(webpackConfig, {
  plugins: ['vux-ui']
})

引入组件的页面 components/vuxc

<template>
  <div>
    <group>
      <cell title="title" value="value"></cell>
    </group>
  </div>
<**加粗文字**/template>

<script>
  import { Group, Cell } from 'vux'

  export default {
    components: {
      Group,
      Cell
    }
  }
</script>

webpack.base.config.js配置后vue-cli可正常解析 但在页面中引用组件时 在运行就报错了 如下

vux loader和 vux 第一次用cnpm装，报错后我又用npm重装一次，
2次的命令 后面都有带--save，为什么还是缺少依赖，急!

Answer 1

除了安装
npm install css-loader vue-style-loader --save
引用less文件需要 在style 标签中加入 lang="less" ,很重要
<style lang="less">
@import '~vux/src/styles/reset.less';
</style>

Answer 2

你的Package.json里面有css-loader和vue-style-loader吗

Answer 3

没有安装css-loader和vue-style-loader

运行：cnpm install --save-dev css-loader vue-style-loader

提示不是很明显了吗。。。

Answer 4

vux你按照官网的上文档写了之后,还需要将less安装一下才可以的,一般不是css-loader和vue-style-loader的问题.

Answer 5

你在main.js里面引用VUX的哪些独立插件，这个写法是需要js-parser支持的，你注意看官网的说明，单独安装很容易漏东西

如果是全新的项目，建议用vux的全家桶工具来构建，就不会错。

npm install vue-cli -g // 如果还没安装
vue init airyland/vux2 projectPath

cd projectPath
npm install --registry=https://registry.npm.taobao.org
npm run dev

其中：vue init airyland/vux2 你的项目路径，就可以了。

Answer 6

感觉好多回答者都在敷衍还是没看题目，css-loader和vue-style-loader都是项目初始化的时候顺带一起安装了的。
楼主试试安装下less和less-loader再看看启动还有没有报错，我也遇到这个问题，装了一下less后面就好了。

Answer 7

从vue-cli 引入vux css-loader和vue-style-loader 基本都不会缺。
出现楼主问题，一般是package.json 里，没有less 和 less-loader。

        "less": "^2.7.2",
        "less-loader": "^2.2.3"

然后就是webpack.base.conf里，看官网就知道了。

module.exports = vuxLoader.merge(webpackConfig, {
    plugins: ['vux-ui', 'progress-bar', 'duplicate-style']
})

最后，.vue文件的style='less'

Answer 8

自己手动引入 vux 配置完之后。最后需要 安装依赖到package.json 。 执行 npm install --save-dev less 问题会得到解决！ 注意它是工具 所以安装在 package.json 里的 devDependencies 下才可以