初始化页面基础样式

项目结构

vue3-ts-cms
├─ .browserslistrc
├─ .editorconfig
├─ .env.development
├─ .env.production
├─ .env.test
├─ .eslintrc.js
├─ .gitignore
├─ .prettierignore
├─ .prettierrc
├─ babel.config.js
├─ package-lock.json
├─ package.json
├─ public
│  ├─ favicon.ico
│  └─ index.html
├─ README.md
├─ src
│  ├─ App.vue
│  ├─ assets
│  │  └─ css
│  │     ├─ base.less
│  │     ├─ index.less
│  ├─ components
│  ├─ global
│  │  ├─ index.ts
│  │  └─ register-element.ts
│  ├─ main.ts
│  ├─ router
│  │  └─ index.ts
│  ├─ shims-vue.d.ts
│  ├─ store
│  │  └─ index.ts
│  └─ views
│     ├─ login
│     │  └─ login.vue
│     └─ main
│        └─ main.vue
├─ tsconfig.json
└─ vue.config.js

安装normalize

• 运行下面脚本指令。

npm install normalize.css

• 在 assets 文件夹下创建 css 文件夹。

创建文件：assets/css/base.less

body {
  margin: 0;
  padding: 0;
}

html,
body,
#app {
  width: 100%;
  height: 100%;
}

创建文件：assets/css/index.less

@import 'normalize.css';
@import './base.less';

• 在入口文件引入 index.less

import { createApp } from 'vue'
import './assets/css'
import App from './App.vue'

const app = createApp(App)
app.mount('#app')