精华内容
下载资源
问答
  • Vue项目经验总结 1.环境&资源问题 1.1.如果生成私钥提示没有这个目录 一般git安装成功之后,会在C:\Users\下创建.ssh目录。如果没有就会出现上述问题。 检查是否安装成功:cmd执行:git --version (两个-) ...

    Vue项目经验总结

    1.环境&资源问题

    1.1.如果生成私钥提示没有这个目录

    在这里插入图片描述
    一般git安装成功之后,会在C:\Users\下创建.ssh目录。如果没有就会出现上述问题。
    检查是否安装成功:cmd中执行:git --version (两个-)
    如果没有正确提示版本号,则配置一下git环境变量(看问题1.5)
    如果电脑用户名是中文名字,需要修改为英文
    https://jingyan.baidu.com/article/59703552843c458fc0074005.html
    可能是中文名字,导致没有创建.ssh目录
    如果改完电脑用户名之后,执行ssh-keygen还是不行的话,就重装git
    但是经过测试,很多同学的电脑用户名都无法修改,如果是这样,只能重装系统_
    给电脑起中文名,多么痛的领悟…

    1.2.无法导入mydb.sql问题

    解决方法

    1. 找到my.ini文件在这里插入图片描述

    2. 修改内部的数据库引擎为INNODB
      #默认为MyISAM
      #default-storage-engine=MyISAM
      #改为INNODB
      default-storage-engine=INNODB
      #支持 INNODB 引擎模式。修改为 default-storage-engine=INNODB 即可。
      #如果 INNODB 模式如果不能启动,删除data目录下ib开头的日志文件重新启动。

    3. 重新导入mydb.sql

    1.3.导入mysql另一个问题

    在这里插入图片描述
    如果出现这个问题,说明是mysql没有启动
    通过php软件启动mysql
    或者cmd命令中执行,net start mysql

    1.4.git环境变量配置

    参考 —> Windows10下Git环境变量配置
    最后一步是重启cmd

    1.5.第一次push时,输错密码

    删除windows凭据:Win10系统如何删除Windows凭据

    1.6.postman不需要注册在这里插入图片描述

    1.7.vscode保存代码,直接报错

    在这里插入图片描述
    分析

    1. 这是因为默认保存时,自动格式化代码给代码前,添加了一个tab键,而tab键是4个空格,但是eslint语法要求只能是2个空格。
      以及双引号,末尾分号,这些eslint都不允许。
      如果我们一个一个自己修改,太麻烦了。
      我们可以通过一个插件:eslint
      然后在用户设置中增加:(vscode版本:1.19.1测试OK)
      “eslint.autoFixOnSave”: true,
      这样以上问题都可以解决:空格问题,引号问题,末尾分号问题。

    2. 补充:
      如果VSCode版本比较高(1.42.1测试OK),则换成
      “editor.codeActionsOnSave”: {
      “source.fixAll.eslint”: true
      },
      还有一种方式,可以不让代码报错,但是保存代码时不会修复空格引号问题在这里插入图片描述

    3. 补充:或者我们可以直接关闭eslint的语法校验在这里插入图片描述
      这样做之后,末尾分号,双引号等等问题,不会再报错。
      保存之后,生成了一个配置:(如果出现了关闭之后,自动打开,就自己添加如下配置在这里插入图片描述

    1.8.iconfont 无法正常显示,出现口

    这是素材中的资源有兼容问题,我重新下载了,大家找fonts_new.zip
    注意:打开demo_index.html,切换Font class,然后按照后续步骤操作
    在这里插入图片描述

    2. 项目

    2.1. Cannot read property ‘$createElement’ of undefined

    错误如下:不能读取undefined对象的$createElement属性在这里插入图片描述
    解决:路由规则component写成了components,注意没有s

    由于是通过components指定了/login的组件,所以相当于没指定,那么在路由初始化的时候要调用/login对应组件的 c r e a t e E l e m e n t 属 性 , 所 以 报 错 了 。 没 指 定 , 那 就 是 u n d e f i n e d , 所 以 就 是 不 能 读 取 u n d e f i n e d 对 象 的 createElement属性,所以报错了。没指定,那就是undefined,所以就是不能读取undefined对象的 createElementundefinedundefinedcreateElement属性

    2.2.git命令无法执行

    问题如下:没有一个git仓库,没有.git文件夹 在这里插入图片描述
    问题分析:

    1. 通过脚手架创建的项目,已经默认勾选了git初始化,所以默认在项目根目录会有一个.git文件夹,有了这个文件夹就说明我们的项目已经被git管理起来了
      如果想执行,git相关命令,需要在有.git文件夹的目录下才能执行、
      出现上述问题,可能有两个原因:
      1.创建项目时,没有勾选git初始化
      2.执行git命令时,项目目录进错了
    2. 问题解决:
      找到包含.git文件夹的目录,再执行git命令
      或者:在vue_shop目录下执行git init命令,进行git初始化,它会帮助你创建.git文件夹

    2.3.this relative module was not found

    问题如下:这个相关的模块没有找到在这里插入图片描述

    问题分析:
    在main.js中没找到iconfont.css,这种问题,一般都是路径问题
    问题解决:
    在mian.js中确定引入iconfont.css的路径,看是否有误

    2.4.代码切换分支合并分支时被删除

    问题描述: 当我们切换master分支之后,发现login分支的代码消失
    问题分析:在这里插入图片描述

    login分支,创建login.html
    当切换到master的时候,login.html消失(这是因为master本来就没有这个文件,肯定会消失)
    但是,在merge login之后,login.html就回来了
    如果想回退版本:
    git log(查看想要回退的版本号)
    git reset --hard 版本号
    git reset --hard f31cf29afe79a6374e12183541994624221a0e1d 902b8494192a9bc8c3947e39c8494ee6d3878ec8

    2.5. POST http://localhost:8080/login 404 (Not Found)其他问题雷同

    问题描述:在这里插入图片描述
    问题分析:
    发送的接口请求地址错了
    解决问题:
    检查两个地方:
    A)main.js中配置请求的根路径是否出错,包括单词大小写:
    axios.defaults.baseURL = ‘http://127.0.0.1:8888/api/private/v1/’
    B)Login.vue中发送的请求接口地址是否写错:
    const {data:res} = await this.$http.post(“login”, this.loginForm);

    2.6.Element-ui表单总结

    2.6.1.表单数据双向绑定在这里插入图片描述

    在这里进行双向数据绑定的时候,我们是将要绑定的data属性放到了loginForm对象中,然后再进行的绑定,这样做方便后续数据的提交,等到提交数据的时候,直接将loginForm对象提交到后台即可

    2.6.2.表单校验规则在这里插入图片描述

    loginFormRules是一个对象,在对象中可以指定多个字段的校验规则
    username是其中一个校验规则,而这个校验规则是有必填和长度这两个校验规则组成的
    每一个校验规则都是一个对象,对象中有三项信息
    1.校验规则:required必填,min-max长度
    2.校验失败时的提示信息:message
    3.何时触发校验:trigger(触发器):blur(失去焦点),意味失去焦点触发此校验规则

    2.6.3.表单提交在这里插入图片描述

    • 失去焦点需要校验表单,但是最后表单提交的时候,也需要再次校验表单
      • 因为程序员可以通过程序,让表单数据自动填充,所以界面的失去焦点方法校验表单并不完全可靠
      • 其实最后表单提交的时候再次校验,程序员也是可以跳过的,比如通过postman发起请求,不通过界面发起请求,所以前端所有的校验都不靠谱,后端servlet收到数据之后,也还是会重新校验的
    • 注意:这里的validate是el-form的方法,我们需要获取el-form对象之后才能调用,如何获取呢?因为Vue不再通过原始方式获取DOM元素对象,所以采用ref引用名的方式:
      1. 只要标签添加ref属性,就会给当前标签创建对象,并且将对象存储到$refs中
      2. vue实例有一个属性 $refs , 存储当前界面中所有带有ref属性的标签的对象
      3. 比如此界面中有俩标签添加有ref:
        (1)
      4. 那么$refs对象就长这样: {“loginForm”:el-form,“item1”:el-form-item}
      5. 所以可以通过如下方式获取:
        (1)this. r e f s . l o g i n F o r m t h i s . refs.loginForm this. refs.loginFormthis.refs.item1
        (2)this. r e f s [ " l o g i n F o r m " ] t h i s . refs["loginForm"] this. refs["loginForm"]this.refs[“item1”](这个$refs比较特殊,可以通过中括号方式获取属性)
    • validate方法的参数是一个回调函数,函数的参数是校验结果
      • 校验通过,valid=true
      • 校验失败,valid=false
    • 最后需要注意,validate方法内部用到了el-form的model属性,所以如果没有写如下属性:在这里插入图片描述
    • 会报错:在这里插入图片描述
      model是校验工作必须的属性

    2.6.4.表单数据重置在这里插入图片描述

    el-form还有一个方法resetFields,重置字段,会将用户输入的信息以及校验信息都清空 。

    3.

    3.1. TypeError: cannt read property ‘cancelToken’ of undefined

    问题描述:在这里插入图片描述
    问题分析:
    在main.js的拦截器中没有return返回值
    解决问题:
    在main.js的拦截器中return config,固定写法

    3.2.bug调试-network

    如果写完代码没有出现你想要的效果,排错步骤如下:
    1.右键,查看console,如果有错误,其实是好事,因为最起码有错误提示
    2.仔细查看错误,在此文档中查找看有没有类似的错误,如果有按照笔记解决
    3.如果没有,那么就将错误翻译成中文,尝试理解错误是什么意思
    4.实在不行,将错误放入百度,进行搜索
    5. 3-5分钟搞不定的,立马问老师,经过老师的调试,错误搞定之后,一定要将错误收录到此文档中,积累错误文档,是一件非常重要的事情,这些错误就是你的经验
    6.如果console里没有错误,那么我们就需要查看network,看一下请求是否有问题
    7. 比如,用户列表
    8. 先看General 在这里插入图片描述
    注意会发现有两个users请求,看第二个
    查看Request URL,Request Method,Status Code是否有问题
    9. 查看请求参数,是否有问题 在这里插入图片描述
    10. 查看响应数据 在这里插入图片描述

    展开全文
  • productionSourceMap:false......修改 config/index.js build 节点下 assetsPublicPath,把原来 ‘...把基础部分,再次系统的了解一遍,整理成文档。今天使用v-for指令的时候遇到一个错误[Vu...

    productionSourceMap:false

    ...目在开发时运行正常,打包发布后却出现各种报错,这里整理一下遇到的问题,以备忘。

    1、js 路径问题

    脚手架默认打包的路径为绝对路径,改为相对路径。修改 config/index.js 中 build 节点下 assetsPublicPath,把原来 ‘...

    把基础部分,再次系统的了解一遍,整理成文档。

    今天使用v-for指令的时候遇到一个错误

    [Vue warn]: Error in render: "TypeError: Cannot read property 'children' of undefined"

    页面使用代码

    这几天项目运行报了个错: Uncaught RangeError: Maximum call stack size exceeded,刚开始看到 "returnNodeParameter",以为是 "returnNodeParameter" 方法报错,但转眼看到后面 "Maximum

    我给大家整理Vue底层实现原理的知识点总结,如果大家对此有需要,可以学习参考下,希望我们整理的内容能够帮助到你。前言最近在研究 剖析Vue原理&实现双向绑定MVVM 这篇文章,一边学习一边总结一下自己的思...

    下面我就为大家整理了一篇解决vue打包项目后刷新404的问题,具有很好的参考价值,希望对大家有所帮助。vue打包项目后刷新404的问题Nginx配置server {

    listen 80;

    server_name localhost;

    in...

    Message组件源码:

    main.js

    import Vue from 'vue';

    import Main from './main.vue';

    import { PopupManager } from 'element-ui/src/utils

    ...vue-cli+vue-router+webpack建立项目,其中的遇到的三个问题,整理如下:vue-cli+ webpack 建立的项目,cnpm run build 打包项目之后,需要放在http服务器上才可以运行,例如 :nginxvue单页面的启动页面是index.html,...

    ...家,也给大家做个参考。一起跟随小编过来看看吧整理文档,搜刮出一个vue中如何实现变量和字符串拼接的代码,稍微整理精简一下做下分享。在data中定义变量:data() {

    return {

    a: 'A'

    }

    }如何通...

    (1)Vue的生命周期

    1)创建vue实例,初始化生命周期钩子函数

    2)数据检测及方法和计算属性代理。在数据检测和初始化数据之前调用beforeCreated(),这时还获取不到props或者d...

    展开全文
  • Vue 项目在开发时运行正常,打包发布后却出现各种报错,这里整理一下遇到的问题,以备忘。1、js 路径问题脚手架默认打包的路径为绝对路径,改为相对路径。修改 config/index.js build 节点下 assetsPublicPath,...

    Vue 项目在开发时运行正常,打包发布后却出现各种报错,这里整理一下遇到的问题,以备忘。

    1、js 路径问题

    脚手架默认打包的路径为绝对路径,改为相对路径。修改 config/index.js 中 build 节点下 assetsPublicPath,把原来 ‘/’ 改为 ‘./’

    1 build: {2 assetsPublicPath: './'

    3 }

    2、img 路径问题

    在 build/utils.js 文件中 ExtractTextPlugin extract 节点下,添加一行:publicPath: ‘…/…/’

    1 if(options.extract) {2 returnExtractTextPlugin.extract({3 use: loaders,4 fallback: 'vue-style-loader',5 publicPath: '../../'

    6 })7 } else{8 return ['vue-style-loader'].concat(loaders)9 }

    3、favicon.ico 问题

    ① 在 build/webpack.prod.conf.js 文件中 new HtmlWebpackPlugin 节点下, 添加一行:favicon: config.build.favicon

    1 newHtmlWebpackPlugin({2 filename: config.build.index,3 template: 'index.html',4 favicon: config.build.favicon5 })

    ② 在 config/index.js 文件中 build 节点下,添加一行 : favicon:path.resolve( __dirname, ‘…/src/favicon.ico’ )( PS:favicon.ico 放在 src 目录下)

    1 module.exports ={2 build: {3 favicon:path.resolve(__dirname, '../src/favicon.ico')4 }5 }

    4、IE9+ 兼容性问题

    由于 axios 是基于 promise 之上实现的,在 IE 下会有兼容性问题。

    ① 安装 babel-polyfill

    yarn add babel-polyfill

    ② 修改 build/webpack.base.conf.js 文件中 entry 节点

    1 entry: {2 app: ['babel-polyfill', './src/main.js']3 }

    5、禁止生成 .map 文件

    修改 config/index.js 中 productionSourceMap 值

    productionSourceMap:false

    展开全文
  • 方法后台更改header使用http-proxy-middleware 代理解决(项目使用vue-cli脚手架搭建)Jquery jsonp后台更改headerheader('Access-Control-Allow-Origin:*');//允许所有来源访问header('Access-Control-Allow-Method:...

    方法

    后台更改header

    使用http-proxy-middleware 代理解决(项目使用vue-cli脚手架搭建)

    Jquery jsonp

    后台更改header

    header('Access-Control-Allow-Origin:*');//允许所有来源访问

    header('Access-Control-Allow-Method:POST,GET');//允许访问的方式

    使用http-proxy-middleware 代理解决(项目使用vue-cli脚手架搭建)

    打开config/index.js,在proxyTable中添写如下代码:

    proxyTable: {

    '/api': {

    target: '填写请求源地址', //源地址

    changeOrigin: true, //是否跨域

    pathRewrite: {

    '^/api': '' //路径重写

    }

    }

    }

    使用axios

    this.$axios.post("/api/地址",{

    发送的数据

    }).then(data=>{

    console.log(data);

    })

    axios的配置(main.js)

    axios.defaults.headers.post["Content-type"]="application/json";

    Vue.prototype.$axios=axios;

    使用ES6fetch请求

    fetch("/api/test/testToken.php",{

    method:"post",

    headers:{

    "Content-type":"application/json",

    },

    body:JSON.stringify({发送数据})

    }).then(result=>{

    return result.json()

    }).then(data=>{

    console.log(data);

    })

    使用jquery jsonp

    methods: {

    getData () {

    var self = this

    $.ajax({

    url: '地址',

    type: 'GET',

    dataType: 'JSONP',

    success: function (res) {

    self.data = res.data.slice(0, 3)

    self.opencode = res.data[0].opencode.split(',')

    }

    })

    }

    }

    总结

    以上所述是小编给大家介绍的Vue项目中跨域问题解决方案,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

    展开全文
  • Vue项目中跨域问题解决方案方法后台更改header使用http-proxy-middleware 代理解决(项目使用vue-cli脚手架搭建)Jquery jsonp后台更改headerheader('Access-Control-Allow-Origin:*');//允许所有来源访问header('...
  • vue项目中遇到的问题汇总

    千次阅读 2020-12-21 12:00:20
    前:项目用到的技术栈为webpack+vue2.x+pug+stylus+elementUI1、IE9, 请求服务器数据并用v-for渲染option标签出现只显示第一个字的问题解决方法:/*** 强制重绘页面的select 输入框,解决IE9只显示单个字符串问题...
  • 注意点:建议不要使用ESLint 后面选No 就ok 大神跳过此处,否则在项目中只要编码格式有问题就会一直拨错!二.编辑器选择1、推荐使用Visual Studio Code工具打开testproject文件夹即可进行开发。(1)(打开终端快捷键 ...
  • VUE项目中的跨域问题

    千次阅读 2020-12-24 11:03:09
    【摘要】跨域问题是前端开发人员比较常见问题, 那么跨域出现的原因, 该如何解决跨域, VUE中对跨域又是怎样处理的呢【作者】田鋆鹏一、 前端为什么会出现跨域问题?跨域问题是浏览器同源策略限制,当前域名的js只能...
  • 前言在Web端Vue项目开发过程,跨域问题是不可避免的;在我参与的Vue项目中,使用服务器代理的解决方案;针对不同的环境(开发环境/生产环境),采用了不同的服务器代理方案;服务器代理的原理大概是这样:代理服务器...
  • vue实际项目中遇到的问题及解决整理

    千次阅读 多人点赞 2021-06-21 02:52:23
    本篇文章取自实际项目,整理了共45个问题和他的解决方法,全文1.5万字。
  • vue项目浏览器缓存问题

    千次阅读 2021-05-28 11:08:52
    项目中遇到比较棘手的事,就是每次通过jenkins构建发布后最新的代码,访问的是一直是原页面,必须手动刷新才会显示最新的代码,一开始就定位的是浏览器缓存问题。网上也漫无目的的查资料,也一直没有解决。vue...
  • 问题2 项目根目录下有.eslintrc.js文件,在配置文件修改rule配置项,如下: ```javascript // 统一换行符,"\n" unix(for LF) and "\r\n" for windows(CRLF),默认unix // off或0: 禁用规则 'linebreak-style': '...
  • vue项目中的字典问题

    2020-12-28 16:31:20
    我们在项目中经常会遇到一个字典问题,就是一个从后台获取的一个固定的数组,然后在系统的很多地方都会通过select选择框用到。如果每次用的时候获取,就会经常出现两个问题: 1.这个数组数据量过大的时候,有可能...
  • 一、先总结出如下几点vue项目开发中常见问题及解决办法。列表进入详情页的传参问题。本地开发环境请求服务器接口跨域的问题API接口的统一管理UI库的按需加载定时器问题rem文件的导入问题Vue-Awesome-Swiper基本能...
  • 问题描述前端 vue 框架,跨域问题后台加这段代码header("Access-Control-Allow-Origin: *");加了之后报这个错:The value of the 'Access-Control-Allow-Origin' header in the response must not be the wildcard '...
  • 项目中遇到这么一个问题(关于引用图片) 需要在文章页面根据不同类型的文章引入不同图片,例如下: 于是这么引入: 先在data定义imgSrc变量表示图片路径,然后在发送请求,得到文章类型后进行判断...
  • 一、问题引入今天重构之前赶工的项目,父组件通过属性绑定传值给子组件,子组件的图片url在img标签的src属性相对路径写死的。(路径初始就写在src属性)像这种直接写死的没有出现什么问题。但肯定是要改为父组件...
  • echarts在vue项目中不显示的问题

    千次阅读 2021-03-21 20:17:35
    项目时遇见了一个小问题,写篇博客记录一下,233。 写项目时有两个dom需要用到echarts图表,写的时候没注意两个页面的id都写成了main <div id="main" class="main_container"></div> 然后就是js了 ...
  • 修改router的index.js的 mode: ‘history’, export default new Router({ linkActiveClass: 'nav-menus-active', transitionOnLoad: true, hashbang: false, history: true, mode: 'history', //把Router...
  • vue项目怎样解决跨域问题呢?一、问题描述二、问题解决 一、问题描述 在开发过程,和后端交互的时候避免不了有跨域,解决跨域的方法很多,今天聊一聊前端vue项目是如何解决跨域的。 二、问题解决 先提前说明一下 ...
  • 项目中有已经写好的html结构,不想在vue中重新写一套。2.尝试:最开始想到的办法是插值表达式,结果一用就错,插值表达式会将写好的html模板解释成字符串,并不会以html结构去展示例如:visible="basinModal">// ...
  • Nginx反向代理处理vue项目部署跨域问题

    千次阅读 多人点赞 2021-08-26 19:22:31
    线上部署官网项目时,提示域名存在跨域问题,首先想到的是用Nginx来处理这个问题,处理流程如下: A:www.test.com 【网站访问域名】 B:open.test.com 【前端请求接口域名】 C:open.test.com/site/index 【B域名...
  • vue-cli3.0构建的项目,开发过程,可能会遇到内存溢出的情况,改动一点代码,代码编译,进程就会断掉,报JavaScript heap out of memory 内存溢出的错误 解决方案 1.安装两个npm包: increase-memory-limit 和 ...
  • vue项目部署到Nginx遇到的两个问题 经过查阅,成功解决问题。 部署到服务器后Element UI图标不显示的问题 原因:查看 /build/webpack.base.conf.js 文件,可以发现woff 或 ttf 这些字体会经由 url-loader 处理...
  • Vue 项目中使用 echarts以及我遇到的问题怎么解决 我先是按照网上教程安装echarts项目依赖 npm install echarts --save //或者 npm install echarts -S 全局引入 安装完成之后,在 main.js 全局引入 echarts...
  • Vue项目打包路径问题

    千次阅读 2020-12-22 21:43:58
    最近在搞Vue CLI的项目打包,出现了常见的路径问题,经过研究问题和文档,现在有了自己的看法,以下所有内容都是建立在Vue CLI3之上。关于vue.config.js文件:这个文件的配置主要是用来设置打包的文件相关信息的命令...
  • 1、在vue项目中解决 在入口文件index.html添加: <meta http-equiv="pragram" content="no-cache"> <meta http-equiv="cache-control" content="no-cache, no-store, must-revalidate"> <meta ...
  • 今日一个项目一块功能模块是其他系统使用jsp已经开发好的页面,想着直接将其嵌入到当前的vue项目中节约开发成本;但是发现并非想象的那么简单创建一个server.vue组件加载jsp页面1 、第一种(使用 v-html进行jsp ...
  • 我的项目中有曾经写好的html构造,不想在vue中从新写一套。2.尝试:最开始想到的方法是插值表达式,后果一用就错,插值表达式会将写好的html模板解释成字符串,并不会以html构造去展现例如:visible="basinModal">...
  • Vue项目中的文件/文件夹命名规范0.2262018.09.21 16:01:09字数 820阅读 6979文件或文件夹的命名遵循以下原则:index.js或者index.vue,统一使用小写字母开头的(kebab-case)命名规范属于组件或类的,统一使用大写字母...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 150,919
精华内容 60,367
关键字:

vue项目中常见的问题

vue 订阅