Vue项目package.json、main.js介绍

Vue项目中常见文件

提示：
本博客为个人学习中一些笔记整理，如有错误欢迎指正。
部分内容搬运前辈们总结的知识结晶，部分内容为自己在学习中的debug
  ——md空格方式之一

package.json和package-lock.json

  package.json记录项目中所有模块以及项目的版本信息。
  package-lock.json锁定模块的版本号，相比之下package.json只是锁定大的版本号，因此可以看到package.json相较之下内容更少
  执行npm install时候，node会从package.json文件读取模块名称，从package-lock.json获取版本号，然后进行下载或更新

src/main.js

  main.js文件是Vue项目的入口文件，并且项目中使用的第三方库的注册和Vue实例初始化都是在这个文件下执行的。
  ElementUI是目前比较流行的第三方UI组件库，我们以其为例尝试安装并使用elementUI。

ElementUI

  1.安装ElementUI

terminal:npm i element-ui -S

  2.在main.js中引用，这里我们直接完整引入（如果在一个项目中涉及到多个UI库也可以按需引入）
完全引入

按需引入（如果我只需要按钮Button）

  3.我们在ElementUI组件库中随便选择一个组件，比如日期选择器，直接将代码复制到我们的/src/App.vue中
  下图为ElementUI官方库

  记得将JS部分代码也cv过来

  运行后可以发现已经成功引入ElementUI库（因为没有编写CSS，所以页面看起来比较丑陋）

关于vue文件三部分的介绍

  我们创建一个vue文件，可以发现整个文件被划分为三部分，分别是template、script以及style，分别对应了前端三件套。

template ———— HTMLscript ———— JavaScriptstyle ———— CSS