简简单单的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看请求的时候，上面的链接还是原来的链接，但是内部已经绑定转到你配置的地址上去了。

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