简简单单的Vue4（vue-cie@3.x,vue’Debug[调试]，vue‘sHttp）

既然选择了远方，便只顾风雨兼程！ __HANS许

系列：零基础搭建前后端分离项目

提示：本篇图片较多，所以篇幅较长。

在前面几篇文章我们讲了Vue的基本内容，语法，组件，插件等等。但例子却是是以平常样式那样引用JS来创建，那接下来我们就是Node的环境来创建项目。

vue-cli@3.x 创建项目

cli(command-line interface)命令行界面,它通常不支持鼠标，用户通过键盘输入指令，计算机接收到指令后，予以执行。

我们先创建一个文件夹"Vue"，然后在"Vue"里面创建创建两个文件夹"VueCli"和"VueUi",那第一个我们用命令创建，另一个我们用界面创建。

安装

执行命令npm install vue -g与npm install -g @vue/cli-service-global，Vue与Vue-cli都全局安装。在终端执行Vue -v，就查看Vue的版本。
命令创建
- 执行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项目。
界面创建
- 执行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），大家可以去这边博客进行下载：https://segmentfault.com/a/1190000009682735
安装完后之后，就可以在浏览器的插件看到，记得要把插件的“允许访问文件网址”的权限打开
在引用的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个链接，针对以前与现在:
- 以前：https://blog.csdn.net/my_csdn2018/article/details/82909989
- 现在：https://segmentfault.com/a/1190000014474361?utm_source=channel-hottest

特别强调配置完跨域，F12看请求的时候，上面的链接还是原来的链接，但是内部已经绑定转到你配置的地址上去了。

感言：终于把零基础搭建前后端分离项目写完了。前端的知识还有很多很多，要学的还有很多很多。后面也可能用实际的项目还讲讲自己遇到的坑，怎么解决的。那这个系列就这了，下个系列在再见。