-
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); })
webstorm 通过vue-cli3 构建 项目(二)---常用的组件及其配置
猜你喜欢
转载自blog.csdn.net/cuiyuchen111/article/details/99636441
今日推荐
周排行