简简单单的Vue4(vue-cie@3.x,vue’Debug[调试]…

2019-01-21 02:38:45来源:博客园 阅读 ()

新老客户大回馈,云服务器低至5折

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

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

 

          • 系列:零基础搭建前后端分离项目
          • vue-cli@3.x 创建项目
          • Vue的Debug(调试)
          • Vue的Http请求

 

提示:本篇图片较多,所以篇幅较长。

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

vue-cli@3.x 创建项目

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

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

  1. 安装

    执行命令npm install vue -gnpm install -g @vue/cli-service-global,Vue与Vue-cli都全局安装。在终端执行Vue -v,就查看Vue的版本。
    enter description here

  2. 命令创建

    • 执行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

     

     

    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

     

     

    enter description here
    enter description here

     

    这样我们就创建了一个Vue项目。

  3. 界面创建

    • 执行vue ui
      enter description here

    • 接着访问http://localhost:8000/,可以看到如下界面
      enter description here

    • 我们可以指定一个目录,创建Vue项目

     

    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

     

     

    enter description here
    enter description here

     

    我们可以在UI这边可视化添加插件,添加依赖,配置项目,运行任务

    • 插件

     

    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的Debug(调试)

作为开发人员,我们肯定要学会调试的。,官方说明:https://cn.vuejs.org/v2/cookbook/debugging-in-vscode.html

  1. 浏览器(Chrome)

浏览器要安装插件(vue-devtools),大家可以去这边博客进行下载:https://segmentfault.com/a/1190000009682735
安装完后之后,就可以在浏览器的插件看到,记得要把插件的“允许访问文件网址”的权限打开
在引用的vue.js等不是压缩的,按起F12便会出现一个vue的选项,可以在窗口查看修改datavuexevent

 

enter description here
enter description here

 

  1. 编辑器(VsCode)
  • 在编辑器上的调试按钮,添加新的调试配置
    enter description here

  • 讲以下的代码覆盖到调试配置文件

    {
      "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
enter description here

 

  • 然后F5运行,便可以调试到代码了

 

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

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


原文链接:https://www.cnblogs.com/xuhuale/p/10287015.html
如有疑问请与原作者联系

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:Ajax提交用FormData()上传文件

下一篇:wordcloud2.js