vue_常用组件install

一、安装font-awesome

安装：
cnpm install font-awesome --save
引入main.js：
import 'font-awesome/css/font-awesome.min.css'

npm地址 

二、安装layer

安装：
npm install vue-layer
引入main.js:
import layer from 'vue-layer'
import 'vue-layer/lib/vue-layer.css';
Vue.prototype.$layer = layer(Vue, {
    msgtime: 3,//目前只有一项，即msg方法的默认消失时间，单位：秒
});
调用：
this.$layer.alert("找不到对象！");

npm地址

三、安装vue-scroller

安装：
npm install vue-scroller -d
引入：
import VueScroller from "vue-scroller"
Vue.use(VueScroller);
调用：
 <scroller :on-refresh="refresh" :on-infinite="infinite" ref="my_scroller" >
<scroller>

 methods: {
    /**
     * 下拉刷新
     */
    refresh() {
      console.log("refresh");
      this.pageNumber = 1;
      this.getOrderList(this.selectTabIndex);
    },

    /**
     * 上拉获取
     */
    infinite(done) {
      this.pageNumber++;
      console.log("infinite");
      this.getOrderList(this.selectTabIndex, done);
    },
    /**
     * 左右滑动设置初始值
     */
    setInitParas(){
      this.pageNumber = 1;
      this.setloadingshow();
      this.items=[]
      this.$refs.my_scroller.finishInfinite(false);
    },
 /**
     * 获取台账列表参数信息
     */
    getOrderParams(index) {
      //index为1表示已验货,0表示未验货 2
      let dbconsignee_phone = localStorage.getItem("dbconsignee_phone");
      var searchData = {
        dbordernumber: "", //提货单号
        dbconsignee_phone: dbconsignee_phone, //手机号码
        acceptance_status: index,
        pageSize:5, //一页多少数
        pageNumber: this.pageNumber, //页码
        order: "",
        sort: ""
      };
      return searchData;
    },

    setloadingshow() {
      this.$vux.loading.show({
        text: "加载中"
      });
    },

    /**
     * 获取台账列表信息
     */
    getOrderList(index, done) {
      const that = this;
      this.selectTabIndex = index;
      const searchData = this.getOrderParams(this.selectTabIndex);
      const params = {
        url: "/receiver/bill/order/datalist",
        reqparams: {
          cmdData: JSON.stringify(searchData)
        },
        onSuccess(data) {
          that.$vux.loading.hide();
          const billJson = JSON.parse(data);
          const newOrderItem = that.formatterOrderData(billJson.rows);
          if (newOrderItem.length > 0) {
            that.items = that.items.concat(newOrderItem);
          }
          if(typeof(done)=="function"){
            done();
          }
          that.$refs.my_scroller.finishPullToRefresh();
          if ( that.pageNumber >= billJson.pageCount ||billJson.pageCount == 0 ) {
            that.$refs.my_scroller.finishInfinite(true);
          }
        }
      };
      http.getData(params);
    },
 }

npm地址

四、webpack

在全局下安装：npm  install  webpack  -g            
安装指定版本：npm  install  webpack@<version>   -g 
例如：npm install  webpack@3.4.1  -g

在全局下删除 ：npm  uninstall  webpack  -g
最好将项目目录下的node-modules一起删除，否则会有残留文件影响下一次的结果。

 

 五、安装vant

npm i vant -S

 

 六、安装less

npm install less less-loader --save-dev

接下来找到bulid目录下的webpack.base.conf.js并打开，找到module下的rules写下

{
 
test: /\.less$/,
 
loader: "style-loader!css-loader!less-loader"
 
}

 

常用less安装