Vue项目package.json、main.js介绍以及ElemenUI引入

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库也可以按需引入）

完全引入

import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);

按需引入

  首先需要安装 babel-plugin-component

terminal:npm install babel-plugin-component -D

  官网上提示，需要修改.babelrc文件，如果是旧版CLI，直接添加即可；如果CLI比较高级，没有.babelrc文件的话，可以在babel.config.js中添加（注意，是在文件原来的基础上添加，不能直接暴力替换）
其实presets里面可以忽略，如果添加的话，可能会报错，报错之后将“es2015”改成“@babel/preset-env”

  如果我只想引入button，在main.js中引入即可

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

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

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

关于vue文件三部分的介绍

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

• template ———— HTML
• script ———— JavaScript
• style ———— CSS