webstorm 通过vue-cli3 构建 项目（二）---常用的组件及其配置

• minireset.css ------ 普通的reset.css
  npm install --save minireset.css
import 'minireset.css';

• normalize.css ------ 常用,相比reset.css有几个优势
  1.保护有用的浏览器默认样式而不是完全去掉它们
  2.一般化的样式：为大部分HTML元素提供
  3.修复浏览器自身的bug并保证各浏览器的一致性
  4.优化CSS可用性：用一些小技巧
  5.解释代码：用注释和详细的文档来
  npm install --save normalize.css
import 'normalize.css/normalize.css'

• element-ui

  cnpm install element-ui --save
  

  1.引用组件

  
  import {
      Button,
      Select,
      Card,
      Form,
      FormItem,
      Input,
      RadioGroup,
      Radio,
      Row,
      Col,
      Menu,
      MenuItemGroup,
      MenuItem,
      Submenu,
      Tree,
      Dropdown,
      DropdownMenu,
      DropdownItem,
      Breadcrumb,
      BreadcrumbItem,
      Dialog,
      Table,
      TableColumn,
      Pagination,
      Option,
      Collapse,
      CollapseItem,
      RadioButton,
      Tag,
      ColorPicker,
      ButtonGroup,
      Tabs,
      TabPane,
      DatePicker,
      Upload,
      Progress,
      Slider,
      Switch,
      TimePicker,
      Loading,
      Tooltip,
      Scrollbar,
      CheckboxGroup,
      CheckboxButton
  } from 'element-ui';
  
  
  
  
  export default {
      Button,
      Select,
      Card,
      Form,
      FormItem,
      Input,
      RadioGroup,
      Radio,
      Row,
      Col,
      Menu,
      MenuItemGroup,
      MenuItem,
      Submenu,
      Tree,
      Dropdown,
      DropdownMenu,
      DropdownItem,
      Breadcrumb,
      BreadcrumbItem,
      Dialog,
      Table,
      TableColumn,
      Pagination,
      Option,
      Collapse,
      CollapseItem,
      RadioButton,
      Tag,
      ColorPicker,
      ButtonGroup,
      Tabs,
      TabPane,
      DatePicker,
      Upload,
      Progress,
      Slider,
      Scrollbar,
      Switch,
      TimePicker,
      Tooltip,
      CheckboxGroup,
      CheckboxButton,
  }
  
  import Vue from 'vue'
  import {Message,MessageBox } from 'element-ui'
  Vue.use(Loading.directive);
  Vue.prototype.$loading = Loading.service;
  Vue.prototype.$message = Message;
  Vue.prototype.$messageBox = MessageBox;
  
  

  2.引用样式

  /* 改变主题色变量 */
  $--color-primary: teal;
  $--font-size-base: 16px;
  $--font-path: '~element-ui/lib/theme-chalk/fonts';
  @import "~element-ui/packages/theme-chalk/src/index";
  

  3.挂载到入口文件

  import components from '@/components';
  import '@/assets/scss/element_variable.scss'
  //注册所有全局组件
  Object.values(components).forEach(item => {
      Vue.component(item.name, item);
  })