vux页面转换html,Vue 初学者使用 Vux 前端开发框架 - 文章教程

我刚开始使用 Vux 的时候，入门就卡住了，一直安装不成功，看了官方的安装文档完全是懵逼的，一步一步的按照步骤操作居然不成功，最后还是百度了下才成功。

安装 Vux

<1>. 在项目里安装vux

npm install vux --save

<2>. 安装vux-loader (这个vux文档中没有明文跟你说要安装的啦)

npm install vux-loader --save-dev

<3>. 安装less-loader (这个是用以正确编译less源码，否则会出现 ‘ Cannot GET / ‘，自己看package.json，如果安装了，就不用装啦！)

npm install less less-loader --save-dev

<4>. 安装yaml-loader (不用装啦)

npm install yaml-loader --save-dev

<5>. 在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

<6>. 最后别忘了，在 resolve: {} 里加入.less。

extensions: ['.js', '.vue', '.json','.less']

到这里就安装完成了，先运行一下看看是否有报错的。

使用 Vux 组件

在某个页面的 script 内，引入组件

import { Loading, Alert} from 'vux'

还要在 components 写上：

components: {Loading, Alert}

基本上算是组件的通用使用方法。

如果你要全局引入组件，在 main.js 加入：

import { Loading, Alert} from 'vux'

Vue.component('loading', Loading)

这样就不用每个页面都引入组件。