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安裝