vue项目安装vux的步骤

前端小白，初次使用vue脚手架做demo，做个记录

1、首先是安装vue

npm install vue --save

（npm可以安装淘宝镜像）

npm install --registry=https://registry.npm.taobao.org

2、安装vue-cli

cnpm install vue-cli -g

3、下载模板

vue init webpack my-project

由于网络禁止访问git，这一步怎么都走不通，于是下载了webpack模板，使用本地安装

在同一目录下，打开cmd，或git bash，执行本地安装（假设下载模板是 webpack-develop）

vue init ./webpack-develop my-project

4.先运行是否走的通

cd my-project

cnpm install

cnpm run dev

5、上面走通后，在此基础上安装vux

cnpm install vux --save

6、安装vux-loader

cnpm install vux-loader --save-dev

7、安装less-loader

cnpm install less less-loader --save-dev

8.在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啦！】

9、最后在resolve:{

extensions:['.js', '.vue', '.json', '.less']}里加入".less"

10、再次运行，看是否走的通

cnpm run dev

至此vux安装完成了。

接下来测试一下vux，在App.vue的template中加入以下标签：

   <loading :show="show" :text=“text”></loading>

    <alert v-model="showAlert" :title="'Are you ok？'">{{ 'yeah,I am fine' }}</alert>

   在data中赋值测试：（实际show和showAlert均在需用时赋值为true，默认false）

data () {

    return () {

    show: true,

    text: '努力加载中，请稍后...',

    showAlert: true

    }

}

对整个过程简单记录，有大神能指导再好不过了

   

   

作者：还有谁叫李狗蛋

链接：https://www.jianshu.com/p/930d9bb22736

來源：简书

著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。