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

時間 2020-05-10

標籤簡簡單單 vue4 vue cie@3.x cie debug 調試 shttp 简体版

原文原文鏈接

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

系列：零基礎搭建先後端分離項目

提示：本篇圖片較多，因此篇幅較長。前端

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

vue-cli@3.x 建立項目

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

咱們先建立一個文件夾"Vue"，而後在"Vue"裏面建立建立兩個文件夾"VueCli"和"VueUi",那第一個咱們用命令建立，另外一個咱們用界面建立。webpack

安裝ios

執行命令npm install vue -g與npm install -g @vue/cli-service-global，Vue與Vue-cli都全局安裝。在終端執行Vue -v，就查看Vue的版本。
git
命令建立github
- 執行vue create cliproject
  在項目根目錄文件夾，執行上述命令，會出現下面的圖片，有兩個選項，第一個就是默認了，直接建立項目，咱們選擇第二個，進行定製化，下移，肯定。
  
  web
- 接着咱們上下移，按空格鍵，選擇，按肯定鍵vuex
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項目。
界面建立
- 執行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

瀏覽器(Chrome)

瀏覽器要安裝插件（vue-devtools），你們能夠去這邊博客進行下載：http://www.javashuo.com/article/p-tdxawezd-gu.html
安裝完後以後，就能夠在瀏覽器的插件看到，記得要把插件的「容許訪問文件網址」的權限打開
在引用的vue.js等不是壓縮的，按起F12便會出現一個vue的選項，能夠在窗口查看修改data，vuex，event

enter description here

編輯器(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請求

vue-resource

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

安裝

一樣的道理，你能夠直接引用<script src="https://cdn.jsdelivr.net/npm/vue-resource@1.5.1"> </script>也能夠npm install vue-resource
初始化

可是最重要的是要將插件引用到Vue裏面，在main.js裏面引用。
- 引用
```
import VueResource from 'vue-resource'
Vue.use(VueResource)
```

用法

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)
   })

axios/vue-axios

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

安裝
一樣道理，能夠引用JS，也可使用npm install --save axios vue-axios，將二者都引用起來。
初始化
- 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)
```

用法

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)
})

**如何選擇呢?**vue更新到2.0以後，做者就宣告再也不對vue-resource更新，而是推薦的axios，因此你懂得！

跨域問題:
咱們在開發的過程當中，可能會去請求不一樣服務器上的接口，因此咱們會經歷到跨域的問題。因爲vue-cli3.x將全部的配置(Vue配置，WebPack配置等)所有集成在vue.config.js上，因此之前與如今不太同樣，可是配置節點，內容是同樣的。那下面提供2個連接，針對之前與如今:
- 之前：http://www.javashuo.com/article/p-higsdlsz-kt.html
- 如今：https://segmentfault.com/a/1190000014474361?utm_source=channel-hottest

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

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