import Vue from 'vue';

import Vue from 'vue';
import App from './App';
import router from './route';
import axios from 'axios';
import './less/index';

于是赶快上了阮一峰大牛的《ES6标准入门》这辆车,学习了:
1.项目为什么要模块化?

2.ES6模块与CommonJS和AMD模块加载的不同。

3.export命令

4.import命令

5.模块的整体加载


  get到很多的新姿势,然而并不能解释import Vue from vue和其他代码是什么意思。

解释代码之前,先来看我的项目文档(这5行代码位于main.js中):

那么现在我对上述代码一一作出解释:

import Vue from 'vue';

其实最完整的写法是:

import Vue from "../node_modules/vue/dist/vue.js";

意思是:
  因为main.js是在src文件中,所以../向前一级相对目录查找node_modules,再依次寻找后面的文件。

文件找到了,那么文件内是否存在Vue呢?

 

事实证明,Vue是存在于vue.js中的。

下面解释第二条代码:

import App from './App';

完整的写法是

import App from './App.vue';

顾名思义,这句代码的意思就是引入我们写好的.vue文件。(.vue文件是vue框架的单文件组件。)

下面解释第三条代码:

import router from './route';

完整的写法是

import router from './route.js';

顾名思义,这句代码的意思就是引入和main.js同级目录下的route.js文件。

下面解释第四条代码:

import axios from 'axios';

完整意思是:

import axios from '..\node_modules\axios\dist\axios.js';

和引入vue文件是一样的原理,都是从node_modules中加载相应名称的模块。

 

  事实证明,axios.js文件中存在axios。

下面解释第五条代码:

import './less/index';

完整意思是:

import './less/index.less';

查找成功:


个人总结:
1.import...from...的from命令后面可以跟很多路径格式,若只给出vue,axios这样的包名,则会自动到node_modules中加载;若给出相对路径及文件前缀,则到指定位置寻找。
2.可以加载各种各样的文件:.js、.vue、.less等等。
3.可以省略掉from直接引入。

吐槽:
  ES6的import...from...指令挺神奇,不需要指明文件后缀,这样很方便快捷,新手需要一定的耐心去研究,否则是真心看不懂。

 

 

 

 

  • 37
    点赞
  • 90
    收藏
    觉得还不错? 一键收藏
  • 12
    评论
### 回答1: 这个错误通常是由于在你的 JavaScript 代码中没有正确引入 Vue.js 库导致的。请确保你已经在 HTML 中引入了 Vue.js 的脚本文件,或者使用了一个支持 ES6 模块的构建工具(如 Webpack)来正确地导入 Vue.js。 另外,还要检查是否重复引入了 Vue.js 。 ### 回答2: 在使用Vue进行开发时,遇到“import vue from vue报错”这个错误,可能有多种原因导致。以下是可能的解决措施: 1. 检查Vue是否已安装:错误提示可能是由于没有正确安装Vue导致的。在终端中输入“npm install vue”或“yarn add vue”命令,安装最新版本的Vue,再重新运行代码。 2. 检查导入语句是否正确:在导入Vue时,应该使用以下语句:“import Vue from 'vue'”,而不是“import vue from vue”。这个小写的“vue”对应的是npm包的名称,而不是Vue.js的名称。 3. 检查文件路径是否正确:如果Vue.js文件与当前文件不在同一目录下,则应该使用正确的文件路径导入Vue.js。 4. 检查webpack配置:如果项目使用webpack打包工具,可能需要检查配置文件是否正确地引入了Vue,并且配置了正确的别名。 5. 检查是否有其他库与Vue冲突:在某些情况下,可能存在其他库与Vue.js冲突,导致出现错误。可以使用“npm ls”命令查看项目中使用的npm包,确保没有其他端口与Vue.js使用相同的命名空间。 6. 检查网速以及npm源:如果安装包极慢,或者报错为404错误或报网络错误,请检查网络和npm源是否正常以及版本是否过旧。 总之,解决“import vue from vue报错”问题需要从多个方面入手,可能需要检查文件路径、模块引用方式、webpack配置等多个方面。按照上述步骤进行排查,应该能够找到并解决问题。 ### 回答3: 当我们在使用 Vue.js 开发时,有时会遇到类似 import vue from vue 错误的情况。这种错误提示一般发生在我们使用 Vue.js 的过程中导入 Vue.js 库的方式出现了问题。解决此问题的方法如下: 1. 确认 Vue.js 是否被正确引入 首先需要确认引入的方式。如果你使用的是 CDN 引入,那么请确保使用的是正确的 CDN 引入地址,同时检查网络是否正常。如果你使用的是 NPM 安装,那么请确保已经正确安装了 Vue.js。 2. 检查代码是否存在语法错误 当我们使用 import 语法导入 Vue.js 库时,需要保证代码中没有语法错误。一些常见的语法错误包括括号未闭合、变量未定义等。 3. 确认是否使用了正确的导入方式 在 Vue.js v2.x 中,我们使用的导入方式应该为: import Vue from 'vue' 如果你的代码中出现了 import vue from vue 的错误,那么你可以修改导入方式为上述的正式导入方式。请注意区分大小写,Vue.js 库名称的第一字母大写。 4. 检查浏览器是否支持 ES6 语法 在一些较老的浏览器中可能不支持 ES6 语法,导致 import vue from vue 的错误。此时我们需要使用一些工具将 ES6 语法转换为 ES5 语法,例如 Babel。 总的来说,出现 import vue from vue 错误的情况可能存在多种原因。我们需要仔细检查代码、网络与浏览器环境等因素,以找到错误并解决。希望这篇文章对你有所帮助。
评论 12
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值