簡簡單單的Vue4（vue-cie@3.x,vue’Debug[調試]，vue‘sHttp）

既然選擇了遠方，便只顧風雨兼程！ __HANS許

系列：零基礎搭建前后端分離項目

 

• • • • • 系列：零基礎搭建前后端分離項目
        • vue-cli@3.x 創建項目
        • Vue的Debug（調試）
        • Vue的Http請求

 

提示：本篇圖片較多，所以篇幅較長。

在前面幾篇文章我們講了Vue的基本內容，語法，組件，插件等等。但例子卻是是以平常樣式那樣引用JS來創建，那接下來我們就是Node的環境來創建項目。

vue-cli@3.x 創建項目

cli(command-line interface)命令行界面,它通常不支持鼠標，用戶通過鍵盤輸入指令，計算機接收到指令后，予以執行。

我們先創建一個文件夾"Vue"，然后在"Vue"里面創建創建兩個文件夾"VueCli"和"VueUi",那第一個我們用命令創建，另一個我們用界面創建。

0. 安裝

   執行命令npm install vue -g與npm install -g @vue/cli-service-global，Vue與Vue-cli都全局安裝。在終端執行Vue -v，就查看Vue的版本。
   

1. 命令創建

   • 執行vue create cliproject
     在項目根目錄文件夾，執行上述命令，會出現下面的圖片，有兩個選項，第一個就是默認了，直接創建項目，我們選擇第二個，進行定制化，下移，確定。
     
     

   • 接着我們上下移，按空格鍵，選擇，按確定鍵

    

   
   

   enter description here

    

   • 然后接下來就一頓選擇，按確定則是默認

    

   
   

   enter description here

    

    

   
   

   enter description here

    

    

   
   

   enter description here

    

    

   
   

   enter description here

    

    

   
   

   enter description here

    

    

   
   

   enter description here

    

    

   
   

   enter description here

    

   • 最后我們創建了項目

    

   
   

   enter description here

    

    

   
   

   enter description here

    

   這樣我們就創建了一個Vue項目。

2. 界面創建

   • 執行vue ui
     

   • 接着訪問http://localhost:8000/，可以看到如下界面
     

   • 我們可以指定一個目錄，創建Vue項目

    

   
   

   enter description here

    

    

   
   

   enter description here

    

    

   
   

   enter description here

    

    

   
   

   enter description here

    

    

   
   

   enter description here

    

    

   
   

   enter description here

    

   我們可以在UI這邊可視化添加插件，添加依賴，配置項目，運行任務

   • 插件

    

   
   

   enter description here

    

   • 依賴

    

   
   

   enter description here

    

   • 配置

    

   
   

   enter description here

    

   • 任務

    

   
   

   enter description here

    

如果項目熟悉，用第一種方式去創建項目更快，若是新手可以使用第二種，第二種會避免較少的錯誤。

最終效果：

 

enter description here

 

Vue的Debug（調試）

作為開發人員，我們肯定要學會調試的。，官方說明：https://cn.vuejs.org/v2/cookbook/debugging-in-vscode.html

1. 瀏覽器(Chrome)

瀏覽器要安裝插件（vue-devtools），大家可以去這邊博客進行下載：https://segmentfault.com/a/1190000009682735
安裝完后之后，就可以在瀏覽器的插件看到，記得要把插件的“允許訪問文件網址”的權限打開
在引用的vue.js等不是壓縮的，按起F12便會出現一個vue的選項，可以在窗口查看修改data，vuex，event

 

enter description here

 

2. 編輯器(VsCode)

• 在編輯器上的調試按鈕，添加新的調試配置
  

• 講以下的代碼覆蓋到調試配置文件

  {
    "version": "0.2.0",
    "configurations": [
      {
        "type": "chrome",
        "request": "launch",
        "name": "vuejs: chrome",
        "url": "http://localhost:8080",
        "webRoot": "${workspaceFolder}/src",
        "breakOnLoad": true,
        "sourceMapPathOverrides": {
          "webpack:///src/*": "${webRoot}/*"
        }
      },
      {
        "type": "firefox",
        "request": "launch",
        "name": "vuejs: firefox",
        "url": "http://localhost:8080",
        "webRoot": "${workspaceFolder}/src",
        "pathMappings": [{ "url": "webpack:///src/", "path": "${webRoot}/" }]
      }
    ]
  }
  

• 設置斷點

 

enter description here

 

• 然后F5運行，便可以調試到代碼了

 

enter description here

 

個人而言，我比較喜歡第一種調試方式，vue-devtools可以做到我們在調試工具改數據，頁面立馬響應。邊切有很好的可視化效果。還有一點就是配合“熱更新”可以做到一個很好的調試效果。

Vue的Http請求

1. vue-resource

vue-resource提供了使用XMLHttpRequest或JSONP 發出Web請求和處理響應的服務。
也就是可以進行服務端請求

1. 安裝

   同樣的道理，你可以直接引用<script src="https://cdn.jsdelivr.net/npm/vue-resource@1.5.1"> </script>也可以npm install vue-resource

2. 初始化

   但是最重要的是要將插件引用到Vue里面，在main.js里面引用。

   • 引用

   import VueResource from 'vue-resource'
   Vue.use(VueResource)
   

3. 用法

    this.$http.get('url').then(res=>{
        console.log(res.data)
      },res=>{
         alert(res.data)
      })
      
   
   this.$http.post('url', {foo: 'bar'}).then(res=>{
        console.log(res.data)
      },res=>{
         alert(res.data)
      })
   

   更多用法：https://github.com/pagekit/vue-resource

4. axios/vue-axios

Axios 是一個基於 promise 的 HTTP 庫，可以用在瀏覽器和 node.js 中。
用於將axios集成到vuejs的插件
所以兩者都是可以進行Http請求的。

1. 安裝
   同樣道理，可以引用JS，也可以使用npm install --save axios vue-axios，將兩者都引用起來。

2. 初始化

   • axios
     單獨使用axios的情況，他是不支持Vue,use(axios),所以引用進來，我們可以創建vue的一個屬性給他，然后通過這個屬性調用。

   import axios from 'axios'
   Vue.prototype.$axios = axios
   

   • vue-axios
     vue-axios依托與axios，所以兩者都要引用過去。並且有個先后順序。

   import axios from 'axios'
   import VueAxios from 'vue-axios'
   Vue.use(VueAxios, axios)
   
   

3. 用法

   • axios

   this.$axios.get('url',params).then(res=>{
          alert(JSON.stringify(res.data))
       },res=>{
          alert(res.data)
       })
   

   更多用法：https://github.com/axios/axios

   • vue-axios

   Vue.axios.get(api).then((response) => {
     console.log(response.data)
   })
   
   this.axios.get(api).then((response) => {
     console.log(response.data)
   })
   
   this.$http.get(api).then((response) => {
     console.log(response.data)
   })
   

   更多用法：https://github.com/imcvampire/vue-axios

**如何選擇呢?**vue更新到2.0之后，作者就宣告不再對vue-resource更新，而是推薦的axios，所以你懂得！

跨域問題:
我們在開發的過程中，可能會去請求不同服務器上的接口，所以我們會經歷到跨域的問題。由於vue-cli3.x將所有的配置(Vue配置，WebPack配置等)全部集成在vue.config.js上，所以以前與現在不太一樣，但是配置節點，內容是一樣的。那下面提供2個鏈接，針對以前與現在:
- 以前：https://blog.csdn.net/my_csdn2018/article/details/82909989
- 現在：https://segmentfault.com/a/1190000014474361?utm_source=channel-hottest

特別強調配置完跨域，F12看請求的時候，上面的鏈接還是原來的鏈接，但是內部已經綁定轉到你配置的地址上去了。

感言：終於把零基礎搭建前后端分離項目寫完了。前端的知識還有很多很多，要學的還有很多很多。后面也可能用實際的項目還講講自己遇到的坑，怎么解決的。那這個系列就這了，下個系列在再見。