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

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

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

在前面几篇文章我们讲了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的版本。

  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

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

  3. 界面创建

    • 执行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的选项,可以在窗口查看修改datavuexevent

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

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

简简单单的Vue4(vue-cie@3.x,vue’Debug[调试],vue‘sHttp)的更多相关文章

  1. webstrom Debug 调试vue项目

    第一种,使用vue插件 下载插件:https://chrome.google.com/web... 这样直接run一个vue项目,你就会看见插件标亮了 打开调试模式,你就会看见最后有个vue标记,打开 ...

  2. JS组件系列——又一款MVVM组件:Vue(二:构建自己的Vue组件)

    前言:转眼距离上篇 JS组件系列——又一款MVVM组件:Vue(一:30分钟搞定前端增删改查) 已有好几个月了,今天打算将它捡起来,发现好久不用,Vue相关技术点都生疏不少.经过这几个月的时间,Vue ...

  3. 前端MVC Vue2学习总结(二)——Vue的实例、生命周期与Vue脚手架(vue-cli)

    一.Vue的实例 1.1.创建一个 Vue 的实例 每个 Vue 应用都是通过 Vue 函数创建一个新的 Vue 实例开始的: var vm = new Vue({ // 选项 }) 虽然没有完全遵循 ...

  4. Vue01 Vue介绍、Vue使用、Vue实例的创建、数据绑定、Vue实例的生命周期、差值与表达式、指令与事件、语法糖

    1 Vue介绍 1.1 官方介绍 vue是一个简单小巧的渐进式的技术栈,它提供了Web开发中常用的高级功能:视图和数据的解耦.组件的服用.路由.状态管理.虚拟DOM 说明:简单小巧 -> 压缩后 ...

  5. 前端笔记之Vue(一)初识SPA和Vue&webpack配置和vue安装&指令

    一.单页面应用(SPA) 1.1 C/S到B/S页面架构的转变 C/S:客户端/服务器(Client/Server)架构的软件. C/S 软件的特点: ① 从window桌面双击打开 ② 更新的时候会 ...

  6. Vue.js 2.x笔记:路由Vue Router(6)

    1. Vue Router简介与安装 1.1 Vue Router简介 Vue Router 是 Vue.js 官方的路由管理器.它和 Vue.js 的核心深度集成,构建单页面应用. Vue Rout ...

  7. chrome调试vue.js的插件:vue.js devtools

    1.什么是vue.js devtools? vue.js devtools是chrome的一款插件,用来调试vue的一款神器. 2.为什么下载vue.js devtools? 由于vue是数据驱动的, ...

  8. [vue]mvc模式和mvvm模式及vue学习思路(废弃)

    好久不写东西了,感觉收生疏了, 学习使用以思路为主, 记录笔记为辅作用. v-if: http://www.cnblogs.com/iiiiiher/p/9025532.html v-show tem ...

  9. Vue学习【第一篇】:Vue初识与指令

    什么是Vue 什么是Vue Vue.js是一个渐进式JavaScript框架它是构建用户界面的JavaScript框架(让它自动生成js,css,html等) 渐进式:vue从小到控制页面中的一个变量 ...

随机推荐

  1. selenium+python+eclipse 实现 “问卷星”网站,登录与检查登录示例!

    1.使用selenium+python+eclipse实现的登录"问卷星",问卷星访问地址:https://www.sojump.com/ 2.实现步骤:1)进入链接---首页-- ...

  2. python的知识统计笔记

    python的发展

  3. ToB蓝海的台阶-PaaS,SaaS技术详解

    前言 随着大量SaaS公司进入市场,我们看到颠覆性的软件服务以各种方式进入企业流程-从营销工具到支付系统.随着SaaS帮助优化业务流程,实现更流畅和自动化的运营,风险投资公司首先潜入池中寻找最优秀和最 ...

  4. typeof和instansof的区别

    typeof typeof 是一个一元运算,放在一个运算数之前,运算数可以是任意类型. 它返回值是一个字符串,该字符串说明运算数的类型.(typeof 运算符返回一个用来表示表达式的数据类型的字符串. ...

  5. Java进阶篇 设计模式之十四 ----- 总结篇

    前言 本篇是讲述之前学习设计模式的一个总结篇,其目的是为了对这些设计模式的进行一个提炼总结,能够通过查看看此篇就可以理解一些设计模式的核心思想. 设计模式简介 什么是设计模式 设计模式是一套被反复使用 ...

  6. for in 和 for of 的区别

    1.for...in 循环:只能获得对象的键名,不能获得键值 for...of 循环:允许遍历获得键值 var arr = ['red', 'green', 'blue'] for(let item ...

  7. Java安全(权限)框架 - Shiro 功能讲解 架构分析

    Java安全(权限)框架 - Shiro 功能讲解 架构分析 作者 : Stanley 罗昊 [转载请注明出处和署名,谢谢!] 简述Shiro Shiro出自公司Apache(阿帕奇),是java的一 ...

  8. Gradle中的闭包

    Gradle是基于Groovy的DSL基础上的构建工具,Gradle中的闭包,其原型上实际上即Groovy中闭包.而在表现形式上,其实,Gradle更多的是以约定和基于约定基础上的配置去展现.但本质上 ...

  9. 5.App Inventor 2编程实例--指南针

    本视频来自:https://www.17coding.net 的  国庆特辑——指南针 共3个视频. 注意: 项目名字要使用英文. 项目完成后可以选择“打包APK”—“ 打包APK并下载到电脑”,然后 ...

  10. 「工具」Aquarelo - 来自意大利的色阶管理工具

    Aquarelo是一款小而美的色阶管理工具,由意大利团队开发,包含三个核心功能,可用于色彩管理.色彩搭配等场景. ## 相关参数 * 操作系统:macOS* 工具官网:[Aquarelo for Ma ...