本篇文章给大家谈谈vue脚手架创建项目报错，以及vue脚手架目录介绍对应的知识点，希望对各位有所帮助，不要忘了收藏本站喔。

本文目录一览：

• 1、请教大神,vue/cli4 创建的vue3项目. 创建完直接启动就报错, 怎么破 ?
• 2、vue cli创建项目失败
• 3、vue报错streammusthavedata

请教大神,vue/cli4 创建的vue3项目. 创建完直接启动就报错, 怎么破 ?

vue3.0 需要更高的版本。

npm install vue@next,

npm install -g @vue/cli@next

vue cli创建项目失败

最近使用vue cli创建项目时总是失败，在此分享一下我的解决办法，简单粗暴：

如果这些操作之后还是不行的话，找到 .vuerc 文件。

一般这个文件放在C:\Users\Administrator下面，打开之后，修改 useTaobaoRegistry ，看其他帖子都说把false改成true，但是我这个本身就是true,于是我将true改成了false,再次创建时报错找不到yarn，别着急，还是改这个文件，将 packageManager 的yarn改成npm,重新创建，就ok了，如果还不行的话试试将npm和yarn的镜像源换成淘宝的

vue报错streammusthavedata

1.环境资源问题

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

一般git安装成功之后，会在C:\Users\下创建.ssh目录。如果没有就会出现上述问题。

检查是否安装成功：cmd中执行：git --version (两个-)

如果没有正确提示版本号，则配置一下git环境变量（看问题1.5）

如果电脑用户名是中文名字，需要修改为英文

可能是中文名字，导致没有创建.ssh目录

如果改完电脑用户名之后，执行ssh-keygen还是不行的话，就重装git

但是经过测试，很多同学的电脑用户名都无法修改，如果是这样，只能重装系统_

给电脑起中文名，多么痛的领悟…

1.2.无法导入mydb.sql问题

解决方法：

找到my.ini文件 ；

修改内部的数据库引擎为INNODB

#默认为MyISAM

#default-storage-engine=MyISAM

#改为INNODB

default-storage-engine=INNODB

#支持 INNODB 引擎模式。修改为　default-storage-engine=INNODB　即可。

#如果 INNODB 模式如果不能启动，删除data目录下ib开头的日志文件重新启动。

重新导入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保存代码，直接报错

分析

这是因为默认保存时，自动格式化代码给代码前，添加了一个tab键，而tab键是4个空格，但是eslint语法要求只能是2个空格。

以及双引号，末尾分号，这些eslint都不允许。

如果我们一个一个自己修改，太麻烦了。

我们可以通过一个插件：eslint

然后在用户设置中增加：（vscode版本：1.19.1测试OK）

“eslint.autoFixOnSave”: true,

这样以上问题都可以解决：空格问题，引号问题，末尾分号问题。

补充:

如果VSCode版本比较高（1.42.1测试OK）,则换成

“editor.codeActionsOnSave”: {

“source.fixAll.eslint”: true

},

还有一种方式，可以不让代码报错，但是保存代码时不会修复空格引号问题

补充：或者我们可以直接关闭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对象的 createElement属性，所以报错了。没指定，那就是undefined，所以就是不能读取undefined对象的createElement属性

2.2.git命令无法执行

问题如下：没有一个git仓库，没有.git文件夹

问题分析：

通过脚手架创建的项目，已经默认勾选了git初始化，所以默认在项目根目录会有一个.git文件夹，有了这个文件夹就说明我们的项目已经被git管理起来了

如果想执行，git相关命令，需要在有.git文件夹的目录下才能执行、

出现上述问题，可能有两个原因：

1.创建项目时，没有勾选git初始化

2.执行git命令时，项目目录进错了

问题解决：

找到包含.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 404 （Not Found）其他问题雷同

问题描述:

问题分析：

发送的接口请求地址错了

解决问题：

检查两个地方：

A）main.js中配置请求的根路径是否出错，包括单词大小写：

axios.defaults.baseURL = ‘’

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引用名的方式：

只要标签添加ref属性，就会给当前标签创建对象，并且将对象存储到$refs中

vue实例有一个属性 $refs , 存储当前界面中所有带有ref属性的标签的对象

比如此界面中有俩标签添加有ref：

(1)

那么$refs对象就长这样： {“loginForm”:el-form,“item1”:el-form-item}

所以可以通过如下方式获取：

(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. 查看响应数据

关于vue脚手架创建项目报错和vue脚手架目录介绍的介绍到此就结束了，不知道你从中找到你需要的信息了吗 ？如果你还想了解更多这方面的信息，记得收藏关注本站。