搭建vue腳手架，包含Axios、qs、Element-UI、mock等插件的安裝配置

1.安裝node、vue這些最基礎最簡單的安裝的就一一省略過。

1.1 axios 安裝

1.2安裝 Element-Ui 插件

1.3 安裝 qs

1.4  安裝 Mock

 

 

2.新建一個vue工程，打開cmd cd到工程目錄下，或者在文件夾選中項目工程同時按住Ctrl+shift鍵，右擊選中的項目找到【在此處打開powershell窗口】，點擊打開

 

效果以下：

 

 執行命令： vue init webpack  

 

? Generate project in current directory? Yes  選擇Yes

 

? Project name (project2) 你的項目名稱

 

? Project description (A Vue.js project) 項目的描述

 

? Author (xxx<xxx@xx-xxxxx>) 做者

 

? Vue build (Use arrow keys)

> Runtime + Compiler: recommended for most users
Runtime-only: about 6KB lighter min+gzip, but templates (or any Vue-specific HTML) are ONLY allowed in .vue files - r
ender functions are required elsewhere

直接回車,

? Install vue-router? (Y/n)  是否要安裝路由，看我的狀況安裝，通常選擇安裝

? Use ESLint to lint your code? (Y/n)  是否用ESLint 檢測代碼，學習使用能夠選擇N，由於安裝以後對語法要求很是嚴格，可能發生沒必要要的警告或錯誤，真正項目開發時必定要開啓來。

? Set up unit tests (Y/n) 是否要安裝測試過程，因狀況而定。

? Setup e2e tests with Nightwatch? (Y/n) 因狀況而定。

接下來就是一直回車 ----》等待安裝完成

 

2.1 安裝 axios  axios具體怎麼用，語法是什麼請參考官方文檔：https://www.npmjs.com/package/axios  英文看不懂？？？不要緊！參考：https://www.kancloud.cn/yunye/axios/234845

 

執行命令：npm install --save axios   等待安裝完畢

vue  main.js配置 

   導入axios  ===>

import Axios from 'axios'

掛載到原型身上：

Vue.prototype.$axios=Axios;//異步組件掛載到原型
配置完成以後axios就已經安裝完成了。
如何使用？？？？

this.$axios.get("請求url地址").then((response)=>{
     console.log(response);//請求成功的數據
   }).catch((error)=> {
       console.log(error);//請求失敗的錯誤信息
   });

　　

使用如此簡單還在等什麼

2.2 安裝 Element-Ui 插件  Element-UI是作什麼的呢？？？它是一款前端UI框架，如何使用？？？請參考官方文檔：http://element-cn.eleme.io/#/zh-CN

執行命令：npm i element-ui -S  等待安裝完畢

   vue  main.js配置 

   導入element-ui===>

import Element from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(Element);

配置完成，就可使用了，使用方法參考文檔

2.3 安裝qs  qs 是個工具插件，axios post請求時要用到

 執行命令：npm install qs  等待安裝完畢

    vue  main.js配置 

   導入qs===>

import QS from 'qs'

以上三個插件安裝完畢，接下來就是終極配置了。

vue  main.js配置 

// 超時時間
Axios.defaults.timeout = 5000;
// http請求攔截器
Axios.interceptors.request.use(config => {
  if(config.method=='post'){
    config.data=QS.stringify(config.data);//防止post請求參數沒法傳到後臺  在這裏就用到了qs
  }
  let loading = Element.Loading.service({//使用element-ui的加載條組件
    fullscreen: true,
    text: '拼命加載中...',
  });
  return config
}, error => {
  let loading = Element.Loading.service({});
  loading.close();    //關閉加載前，記得從新定義實例
  return Promise.reject(error)
});
// http響應攔截器
Axios.interceptors.response.use(data => {
  let loading = Element.Loading.service({});
  loading.close();
  return data
}, error => {
  let loading = Element.Loading.service({
    fullscreen: true,
    text: '拼命加載中...',
  });
  loading.close();
  return Promise.reject(error)
});

　　

2.4 安裝 mock 插件，mock 插件是作什麼的？？？  請看官方文檔：http://mockjs.com/

命令安裝: npm install mockjs  等待安裝完畢

如何使用？？
在vue 工程下新建一個mock.js的文件，文件名名稱爲何要用mock?文件名如何命名無所謂本身喜歡就好。
mock.js裏面怎麼寫？請參考以下代碼：

//引入mockjs
const Mock = require('mockjs')
//使用mockjs模擬數據
Mock.mock('/api/data',{
  'foods|10-50': [{
    'name': "@ctitle(2,10)",
    "img": "@image('600x600',#b7ef7c)",
    "brief": "@csentence(1,50)",
    "price|0-20.0-2": 1,
    "num": 0,
    "minusFlag": true,
    "time": "@time",
    "peisongfei|0-100.0-2": 1,
    "limit|0-50": 1
  }]
});
Mock.setup({
  timeout: 2000//請求兩秒後才加載數據
});

　　

  語法請參考官方文檔

  在vue main.js 配置以下：

require('./mock')//此部分引入的是咱們所編寫的mockjs文檔    此處必定要加載進來，重要、重要、重要

接下來就能夠在其餘.vue頁面肆無忌憚的使用了。
如何使用？？ look

export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  },
  created(){
    this.$axios.get("/api/data").then((response)=>{
      console.log(response);
    }).catch((error)=> {
        console.log(error);
    });
  }
}

　　

　效果：

 

 

原文地址： http://www.javashuo.com/article/p-pzkrxozl-cp.html

本身認爲較爲實用，特此記錄。

愛生活，愛編程。