对于非专业前端开发(我是专业Android开发…),mint-ui总是让我感觉有点cao-dan,所以再放弃之后,朋友立马给我推荐了vux: https://doc.vux.li/zh-CN/
看了下效果:https://vux.li/demos/v2/?x-page=v2-doc-home#/demo ;还真是可观。
vux2必须配合vux-loader使用:npm install vux-loader --save-dev
;
安装vux:npm install vux --save
。
在这里如果安装不上可以用淘宝镜像,cnpm代替npm执行以上命令。如果你cnpm不被识别,骚年请继续:npm install -g cnpm --registry=https://registry.npm.taobao.org
,
想知道这是干嘛的,可以去了解:http://npm.taobao.org/
。
安装完毕后,在build/webpack.base.conf.js
文件里参照下面进行配置:
const vuxLoader = require('vux-loader')
const webpackConfig = originalConfig // 原来的 module.exports 代码赋值给变量 webpackConfig
module.exports = vuxLoader.merge(webpackConfig, {
plugins: ['vux-ui']
})
其中上面的originalConfig 就是该文件原始的module.exports
即:
module.exports = {
context: path.resolve(__dirname, '../'),
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
},
······
把上面的module.exports改写成originalConfig,如下图
运行时,如果报**less…**错误,继续安装:
npm install less less-loader --save-dev //同理,cnpm代替npm
到此,算是完全的引入vux了,小试牛刀:
<template>
<div>
<group title="Default">
<x-input title="message" placeholder="I'm placeholder" v-model="value"></x-input>
<span style="margin-left: 15px;" >value: {{value}}</span>
<br>
</group>
</div>
</template>
<script>
import { XInput, Group} from 'vux'
export default {
data () {
return {
value:'test',
}
},
components: {
Group,
XInput
}
}
</script>
如果需要使用,vux自带的theme.less,可以参考我的下一篇:https://blog.csdn.net/julystroy/article/details/85280509