【VUE3踩坑】

预备知识

样式库

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

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

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

安装第三方包

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

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

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

项目中使用包

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

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

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

"type":"module",

加上这一行后，就无法使用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

接着运行 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