【VUE3踩坑】_vue3 must use import to load es module

预备知识

样式库

Scss和Less，Sass 是一款强化 CSS的辅助工具，它在 CSS 语法的基础上增加了变量 (variables)、嵌套 (nested rules)、混合 (mixins)、导入 (inline imports) 等高级功能，这些拓展令 CSS 更加强大与优雅。使用 Sass 以及 Sass 的样式库（如 Compasss）有助于更好地组织管理样式文件，以及更高效地开发项目。
同样，Less 也是一门CSS预处理语言，它扩充了CSS语言，增加了诸如变量、混合（mixin）、函数等功能，让CSS更易维护、方便制作主题、扩充。

组件库

element-plus，antd，chartjs等。

编译库

主要分为loader，plugin。
loader：babel-loader、style-loader、css-loader、sass-loader、file-loader。
loader 用于加载某些资源文件。因为 webpack 只能理解 JavaScript 和 JSON 文件，对于其他资源例如 css，图片，或者其他的语法集，比如 jsx， coffee，是没有办法加载的。 这就需要对应的loader将资源转化，加载进来。从字面意思也能看出，loader是用于加载的，它作用于一个个文件上。
plugin 用于扩展webpack的功能。它直接作用于 webpack，扩展了它的功能。当然loader也是变相的扩展了 webpack ，但是它只专注于转化文件（transform）这一个领域。而plugin的功能更加的丰富，而不仅局限于资源的加载。

由于ES6目前无法在浏览器中执行，所以，我们只能通过babel将不被支持的import编译为当前受到广泛支持的 require。

编译代码

通过webpack编译，生成浏览器可以识别的js，css，html文件。
vue-cli-service build会编译vue工程，它底层调用了webpack。

创建vue工程

vue create project
1

项目名project不能包含大写字母。

通过脚手架安装sass，babel，eslint，sass-loader，vue，vuex，vue-router

安装第三方包

dependencies字段指定了项目运行所依赖的模块，devDependencies指定项目开发所需要的模块。

$ npm install element-plus --save
$ npm install element-plus --save-dev
1
2

上面代码表示单独安装element-plus模块，--save参数表示将该模块写入dependencies属性，--save-dev表示将该模块写入devDependencies属性。

项目中使用包

默认使用require函数导入第三方模块

var moment=require(“moment”);
moment.month();
1
2

使用import的方法，在package.json中加上这一行：

"type":"module",
1

加上这一行后，就无法使用require导入模块了。

报错

在ubuntu下运行 npm run serve命令时出现如下错误：
System limit for number of file watchers reached
在终端按顺序执行下面两个命令即可解决问题：

echo fs.inotify.max_user_watches=524288 | sudo tee -a /etc/sysctl.conf && sudo sysctl -p
sudo sysctl --system
1
2

接着运行 npm run serve命令时出现如下错误：
Must use import to load ES Module
问题原因：
使用已弃用的babel-eslint解析器不支持ES6模块，可以尝试更新。

解决方法：
1）在package.json文件中，将行"babel-eslint": "^10.0.2"更新为"@babel/eslint-parser": "^7.5.4"。最好使用最新的版本，

2）从文件夹中的终端/命令提示符中运行npm i

3）在.eslintrc中，将解析器行parser: "babel-eslint"更新为parser: "@babel/eslint-parser"。

使用elementplus没有icons

npm install @element-plus/icons
1