Preface:

Changing the default style at development time can be a hassle, and we can solve this problem with a package that resets the style

Mission Objectives:

Add common styles to business components

Steps:

1) Reset the style

NPM I normalize.css to install the restyling package, then import normalize.css in main.js

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
+import 'normalize.css'
createApp(App).use(store).use(router).mount('#app')
Copy the code

2) Common styles

Create a new file SRC /styles/common.less to write common styles to and import them in main.js

src/styles/common.less

* {box-sizing: border-box; } html { height: 100%; font-size: 14px; } body { height: 100%; color: #333; min-width: 1240px; font: 1em/1.4 'Microsoft Yahei', 'PingFang SC', 'Avenir', 'Segoe UI', 'Hiragino Sans GB', 'STHeiti', 'Microsoft Sans Serif', 'WenQuanYi Micro Hei', sans-serif } ul, h1, h3, h4, p, dl, dd { padding: 0; margin: 0; } a { text-decoration: none; color: #333; outline: none; } i { font-style: normal; } input[type="text"], input[type="search"], input[type="password"], input[type="checkbox"]{ padding: 0; outline: none; border: none; -webkit-appearance: none; &::placeholder{ color: #ccc; } } img { max-width: 100%; max-height: 100%; vertical-align: middle; background: #ebebeb url(.. /assets/images/200.png) no-repeat center / contain; } ul { list-style: none; } #app { background: #f5f5f5; user-select: none; } .container { width: 1240px; margin: 0 auto; position: relative; } .ellipsis { white-space: nowrap; text-overflow: ellipsis; overflow: hidden; } .ellipsis-2 { word-break: break-all; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; } .fl { float: left; } .fr { float: right; } .clearfix:after { content: "."; display: block; visibility: hidden; height: 0; line-height: 0; clear: both; }Copy the code

src/main.js

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
​
import 'normalize.css'
+import '@/styles/common.less'
​
createApp(App).use(store).use(router).mount('#app')
Copy the code

Conclusion:

  1. Reset styles to mask differences between browsers
  2. Add a global common style file