vue中引用vux

官网看不懂,网上搜了下,以备不时之需

这是官网说明文档,看不懂的啊。

Vux使用教程:

1,在项目里安装vux

  cnpm install vux --save

2,在项目里安装vux-loader(这个vux文档中没有明文跟你说要安装的啦)

  cnpm install vux-loader --save-dev

3,在项目里安装less-loader(这个是用以正确编译less源码,否则会出现 ' Cannot GET / ',自己看package.json,如果安装了,就不用装啦!)

  npm install less less-loader --save-dev

4,在项目里面的build/webpack.base.conf.js中配置

  const vuxLoader = require('vux-loader');                    //新怎

  const webpackConfig = originalConfig;                     //originalConfig就是原来的 module.exports出去的代码,把它整个赋值给变量 webpackConfig

  module.exports = vuxLoader.merge(webpackConfig, { plugins: ['vux-ui'] });      //在最后加多一句,这里就是引用插件vux啦!

5,最后别忘了

  在resolve: {extensions: ['.js', '.vue', '.json','.less']里加入.less。  

以上为安装和配置方法,接下来我们该运行(npm run dev)整个项目了,看有没有什么报错,若果没有,就可以在项目中引用vux的组件了

  在templete中写个标签

<loading :show="show1" :text="text1"></loading>
<alert v-model="show" :title="'测试组件?'"> {{ '看看行不行' }}</alert>

  show1、show跟text1是变量,前者控制是否出现Loading、Alert,后者控制Loading显示内容。

  在script内,引入组件

import { Loading,Alert} from 'vux';

  还要在components写上

components: {
    Loading,
    Alert
}

根据文档说,这是以插件形式调用,像我这种小白....算了算了

.

原文地址:https://www.cnblogs.com/tanxiang6690/p/9042208.html