初始化页面基础样式
项目结构
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')