vue项目开发过程常见问题

Apollo 发布于2019-08-23 10:28 / 811人阅读

摘要：更新时间这个问题是实例内单组件的必须返回一个对象如下为什么要一个数据对象呢官方解释如下必须声明为返回一个初始数据对象的函数，因为组件可能被用来创建多个实例。

更新时间：2018-07-29

1.data functions should return an object

// 这个问题是 Vue 实例内,单组件的data必须返回一个对象;如下

// 为什么要 return 一个数据对象呢?
官方解释如下: data 必须声明为返回一个初始数据对象的函数，因为组件可能被用来创建多个实例。如果 data 仍然是一个纯粹的对象，则所有的实例将共享引用同一个数据对象！

2.我给组件内的原生控件添加事件,怎么不生效了





导航

3.我用了 axios或ES6promise新特性, 为什么 IE 浏览器不识别(IE9+)

IE系列不能识别promise特性，在webpack入口处添加babel-polyfill插件
module.exports = {
  context: path.resolve(__dirname, "../"),
  entry: {
    // 使用babel-polyfill 可以模拟ES6使用的环境，可以使用ES6的所有新方法
    app: ["babel-polyfill", "./src/main.js"]
  },
  ...
}

4.跨域问题No "Access-Control-Allow-Origin" header is present on the requested resource.

1: CORS 前后端都要对应去配置,IE10+
2: nginx 反向代理，线上环境可以用这个详细配置可以看我另一篇文章nginx反向代理
3：jsonp 只支持get方式，局限太大

如果你用的是vue-cli脚手架生成的目录结构，开发环境可以配置proxyTable来解决跨域，本质上也是node.js代理了请求

// 在 config 目录下的index.js
// target : 就是 api 的代理的实际路径
// pathRewrite : 就是路径重定向
proxyTable: {
  "/apis": {
    target: "http://10.1.1.1:8090",
    changeOrigin: true,
    pathRewrite: {
       "^/": "/"
    }
  }
}

5.明明更改了数组元素的内容，或者添加删除了对象的属性，视图为什么没有更新

// 由于 JavaScript 的限制，Vue 不能检测以下变动的数组：
// 当你利用索引直接设置一个项时，例如：vm.items[indexOfItem] = newValue
// 当你修改数组的长度时，例如：vm.items.length = newLength
// 还是由于 JavaScript 的限制，Vue 不能检测对象属性的添加或删除：
var vm = new Vue({
  data: {
    a: 1
  }
})
// `vm.a` 现在是响应式的
vm.b = 2
// `vm.b` 不是响应式的
// 解决办法：this.$set(obj,item,value);

官方文档传送门：vue

6.为什么我的组件间的样式不能继承或者覆写

// 单组件开发模式下,请确认是否开启了 CSS模块化功能!!
// 也就是scoped(vue-cli 里面配置了,只要加入这个属性就自动启用)
// 复制代码为什么不能继承或者覆写呢,那时因为每个类或者 id 乃至标签都会给自动在css后面添加hash!
// 写的时候是这个
.test{}
// 编译过后,加上了 hash
.test[data-v-1ec35ffc]{}

7.路由模式改为history后,除了首次启动首页没报错,刷新访问路由都报错

当你使用 history 模式时，URL 就像正常的 url，例如 http://yoursite.com/user/id，也好看！
不过这种模式要玩好，还需要后台配置支持。因为我们的应用是个单页客户端应用，如果后台没有正确的配置，当用户在浏览器直接访问 http://oursite.com/user/id 就会返回 404，这就不好看了。
所以呢，你要在服务端增加一个覆盖所有情况的候选资源：如果 URL 匹配不到任何静态资源，则应该返回同一个 index.html 页面，这个页面就是你 app 依赖的页面。
官方文档：vue-router

8.父组件如何直接调用子组件的方法

可以通过$refs或者$chilren来拿到对应的vue实例,从而操作

9.组件的通讯方式有几种

父传子: props
子传父: this.$emit(funName, arg)
兄弟通讯:
event bus: 就是找一个中间组件来作为信息传递中介
vuex: 状态管理，为了避免刷新时丢失数据可以和localStorage或sessionStorage本地存储结合使用
传送门:
vue官方组件间的通讯
vuex

10.既然localStorage和sessionStorage能做到数据维护,为什么还要引入vuex

可维护性: 因为是单向数据流,所有状态是有迹可循的...数据的传递也可以及时分发响应
易用性: 它使得我们组件间的通讯变得更强大,而不用借助中间件这类来实现不同组件间的通讯

11.vuex的用户信息为什么还要存一遍在浏览器里(sessionStorage or localStorage)

vuex的store保存在浏览器的缓存内,若用户刷新的话,数据将会丢失

12.npm run dev 报端口错误!Error: listen EADDRINUSE :::8080

若果是vue-cli脚手架搭建的vue项目
更改webpack 配置: config/index.js

dev: {
 env: require("./dev.env"),
 port: 8080, // 更改启动端口
 ...
}

若是自己搭建的nodejs服务，或nginx服务，更改启动的端口号就行

13.什么时候用v-if,什么用 v-show

v-if : DOM 区域没有生成,只有条件为真时才渲染
v-show: DOM 区域在组件渲染的时候同时渲染了,只是display：none

14.@/components/layout/xxx"中的@是什么意思

// webpack可以配置alias(也就是路径别名)
// 若是vue-cli脚手架位置在build/webpack.base.conf.js
resolve: {
extensions: [".js", ".vue", ".json"],
alias: {
  "vue$": "vue/dist/vue.esm.js",
  "@": resolve("src"),
  "common": resolve("./src/common"),
  "components": resolve("./src/components"),
  "api": resolve("./src/api"),
  "base": resolve("./src/base")
}
// 尽情配置吧

15.我在函数内用了this.xxx=,为什么抛出Cannot set property "xxx" of undefined

这又是this的套路了..this是和当前运行的上下文绑定的...
一般你在axios或者其他 promise , 或者setInterval 这些默认都是指向最外层的全局钩子.
简单点说:"最外层的上下文就是 window,vue内则是 Vue 对象而不是实例!";
解决方案:
    暂存法: 函数内先缓存 this , let that = this;(let是 es6, es5用 var)
    箭头函数: 会强行关联当前运行区域为 this 的上下文;

GPU云服务器云服务器 Vue开发 vue组件开发 Vue开发技巧 vue20开发实践

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/96370.html

Vue现有项目改造为Nuxt项目

摘要：好了，项目启动了，目录结构也清楚了，接下来就是整个现有项目的迁移了目前正在改造项目，文章尚未写完，会抽时间不定期的继续更新项目的改造过程及分享改造过程中遇到的问题公司项目，最初只为了实现前后端分离式开发，直接选择了vue框架进行开发，然而现在项目基本完成了，发现蜘蛛根本就抓取不到网站数据，搜索引擎搜出来，都是一片空白没有数据，需要对项目做SEO优化。本人第一次接触SEO的优化，完全...

Invoker 2019-08-26 10:25 评论0 收藏0
vue for contacts项目总结

摘要：用来主要前台的请求，并处理返回相关的数据，做后台服务。总结做完这个项目，其中的过程还是挺艰辛的，毕竟都是边学边做，不过最后能完成还是挺开心的，终于有了一个从到的项目过程。虽然只是一个小小的练手项目，不过对于目前的我，感觉还是不错的。 showImg(https://oc1gyfe6q.qnssl.com/17-3-30/43434844-file_1490879850754_14751...

tulayang 2019-08-20 15:29 评论0 收藏0
vue for contacts项目总结

摘要：用来主要前台的请求，并处理返回相关的数据，做后台服务。总结做完这个项目，其中的过程还是挺艰辛的，毕竟都是边学边做，不过最后能完成还是挺开心的，终于有了一个从到的项目过程。虽然只是一个小小的练手项目，不过对于目前的我，感觉还是不错的。 showImg(https://oc1gyfe6q.qnssl.com/17-3-30/43434844-file_1490879850754_14751...

ralap 2019-08-14 17:58 评论0 收藏0
vue for contacts项目总结

摘要：用来主要前台的请求，并处理返回相关的数据，做后台服务。总结做完这个项目，其中的过程还是挺艰辛的，毕竟都是边学边做，不过最后能完成还是挺开心的，终于有了一个从到的项目过程。虽然只是一个小小的练手项目，不过对于目前的我，感觉还是不错的。 showImg(https://oc1gyfe6q.qnssl.com/17-3-30/43434844-file_1490879850754_14751...

ARGUS 2019-08-01 16:35 评论0 收藏0