Vue debug 填坑

Vue debug 填坑

Vue 的提速

国内使用 vue-cli 生成目录很慢很慢,主要是网络的问题,在大量查阅文档之后,比较靠谱的方案是换 npm 的源!并且推荐 WebStorm 来生成工程,Git Bash 也可以,不过总是会卡住,还有 VSCode 存在插件崩的问题。


// 查看npm的源

npm config get registry

// 更换为淘宝的源

npm config set registry https://registry.npm.taobao.org

Vue 引入 Element

提高开发的效率很重要,饿了么开源团队开放了 element-ui 可以快速生成基于 Vue 的前端页面,具体使用参考 官方文档

下载 element-ui


npm i element-ui -S

引入 Element


// main.js

import  Vue  from  'vue'
import  ElementUI  from  'element-ui'
import  'element-ui/lib/theme-chalk/index.css'
import  App  from  './App.vue'

// 第三行的样式文件是需要单独引入的

Vue.use(ElementUI)

前后端分离开发

前后端混合开发会带来很多的问题,在开发的过程中修改的工程量很大,而且也可能会发生很多的错误。可以使用 Java、php、python 等写后端 api,通过前端调用后端的数据接口可以实现局部的数据更新提升用户体验。

使用 jQuery 实现 Ajax

引入 jQuery 使用 Ajax 调用接口是很常用的方法,举个单点登录的简单例子:


<!DOCTYPE  html>

<html>

<head>

<meta  charset="UTF-8">

<title>登录测试页面</title>

<head>

<body>

<form>

<label  for="username">用户名</label>

<input  type="text"  id="username">

<label  for="password">密码</label>

<input  type="text"  id="password">

<form>

<button  type="button"  id="test-button">测试</button>

<script  src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js"></script>

<script  type="text/javascript">

// 获取测试button,点击事件

$("#test-button").click(function () {

// 通过JavaScript获取当前的url

let  current_url = window.location.href;

// 利用encodeURIComponent()编码url规避特殊符号作为来源

let  from_url = encodeURIComponent(current_url);

// 获取登录身份和密码

let  idd = $("#username").val();

let  password = $("#password").val();

// to_url为请求的api

let  to_url;

// ajax请求

$.ajax({

url:  to_url, type:  'GET', success:  function (str) {

// 将获取的json字符串通过parseJSON()的方法转化为json对象

let  json_result = $.parseJSON(str);

if(json_result["status"] === 200){

// 验证成功200,弹出信息debug

alert(json_result["result"]["info"]);

// 获取后端传入的带有token的url重定向跳转

window.location.href = json_result["result"]["to_url"];

}else  if (json_result["status"] === 201){

// 系统错误201

alert(json_result["result"]["info"]);

}else{

// 验证失败

alert(json_result["result"]["info"]);

}

}

});

});

</script>

</body>

</html>

Vue 访问 api

Vue 可以使用 axios 的库来访问 api,下面是引入的过程,参考 npm 库 vue-axios 的使用方法,我得到了 “TypeError: Cannot read property ‘get’ of undefined” 这个报错,并且在我参考文章和视频教程之后还是没有解决这个问题。(确实说一直到写这个文章我也不知道为什么??因为我测试用的代码和教程是完全一样的)

npm 库提供的方法


// 下载

npm install --save axios vue-axios


// main.js

import  Vue  from  'vue'
import  axios  from  'axios'
import  VueAxios  from  'vue-axios'
Vue.use(VueAxios, 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)

})

bug 解决的方法

使用官方给的第三个方法,而可以不使用 VueAxios,将 axios 改写为 Vue 的原型属性


// main.js

import  axios  from  'axios'

Vue.prototype.$http = axios

// 组件调用

this.$http.get(api).then((response) => {

console.log(response.data)

})

然后就完事了!!!

参考文档来源

  • stackoverflow

  • CSDN

  • imooc

  • 思否 segmentfault

可用的测试 api

具体请参考文档 http://api.komavideo.com/news